ブログ運営

【アイキャッチ】質と効率を両立する画像サイズ、教えます!

みなさま、はじめまして。
SATSUKIの旦那(通称:社畜旦那)です。

いつも当ブログを読んでいただきありがとうございます。

今回はwebマーケティングのコンサルティングを仕事とする私が、こちらのテーマで執筆させて頂きました。

 

メインビジュアルのサイズについて!
  • アイキャッチの最適なサイズがわからない
  • SNSでシェアされても綺麗に画像がはまらない

 

私の自己紹介

改めまして、社畜旦那です。

平日は外資系コンサル企業に勤めていまして、主にクライアント企業のWebマーケティングのコンサルティングをしております。そして基本的には終電近くまで勤務。→社畜

休日は、当ブログの管理を行いながら、仕事で得た知見を実際に試せる場として色々活用しています。→ブログ管理者

 

本題に入る前に、私のアイコンを「がーこねりー(@gaaconnery)さん」に書いていただきました!

この場を借りて感謝申し上げます。ありがとうございます!とても嬉しいです!

 

私の記事で伝えられること

前置きが長くなりましたが、ここからが本題。

私が書く記事では、普段企業のWebマーケティングに携わる身として得た知識を、みなさまにシェアできればと思っています。

しかし「これをやれば必ずうまくいく」的なものは一切ありません。
それはどんな一流企業も、コンサルタントも、ブロガーにもわかりません。

それでも、あらゆる根拠を手探りで探し出し、「正しいっぽい」方向を見つけ、その方向に正しい形で努力を続け、意味ある成功と失敗の経験を繰り返していくことが重要です。

メディア運営に関する知見を私の実践を踏まえて発信し、読者のみなさまが「正しいっぽい」方向を見出すヒントとなるものがお伝えできたら幸いです!

どうぞよろしくお願いします。

 

意外と奥深い!メインビジュアルのサイズ

普段企業を相手に当たり前のようにやっていることが、個人運営のブログだと手が行き届いていない施策って結構あります。

逆に、できていると素人さんなのにすごい!素敵なブログ!と思っちゃいます。

その代表的な施策が、アイキャッチ  (メインビジュアル)のサイズです。

メインビジュアルはスマートフォンに合わせて作るべし!

パソコンでは問題なく見えているけど、スマートフォンで見るとアイキャッチがボヤける…という方いませんか?

Google Analyticsで見るとほとんどスマートフォンで見られているのに、せっかくの記事の顔がぼやけてる…
それは、適切なサイズの画像を入れられていないからだ!

 

Retinaディスプレイ対策が必要

原因は、最近のスマートフォンがRetinaディスプレイという高解像度ディスプレイを採用していることに起因しています。

高解像度、つまり画像は同じサイズでもディスプレイが虫眼鏡の役割を果たして拡大して表示した結果、粗く見えてしまっているということです。

パソコンでは問題なく見えるのに、スマートフォンで画像がぼやけて見えるのはそういうことなのか!

 

大事なのは、スマートフォンの画面幅の2倍以上で作っておくこと!

その対策として、スマートフォンの画面幅サイズの2倍または3倍で作っておく必要があります。

iPhone6,7,8をカバーするには2倍のサイズ。iPhone Xをカバーするには3倍のサイズが必要です。
例えば、iPhone8の画面幅は375pxなので、2倍の横幅750px以上のサイズが求められます。

当サイトでは基本的にメインビジュアルを横幅1200px 縦幅630pxで作っています。

こちらは、次の「SNSシェア」にも関わりますので後ほど合わせて理由をご説明します♪

 

SNSシェアに配慮すべし!

よくTwitterのタイムラインを見ていると、記事がシェアされている投稿を目にしますよね。

せっかくシェアされているにも関わらず、記事側の設定が不十分なためにSNSで残念な見え方になってしまっているものが多々あります。

そうなるとクリック率が非常に悪くなってしまうのでもったいない!

 

 

ポイントはSNS側の仕様を把握すること

まず押さえておくべきは、SNSが記事をシェアしようとする際、記事の情報(プロパティと言います)を自動で読み取り、表示する仕様になっているということ。

 

SNS側が記事から取得している情報は以下の通りです。

og:title ここに設定されている情報を記事タイトルとしてSNSシェア時に出力します。
og:image ここに設定されている情報を画像としてSNSシェア時に出力します。
og:url ここに設定されている情報を短縮URLとしてSNSシェア時に出力します。またリンク先としても設定されます。
og:description ここに設定されている情報を記事の説明文としてSNSシェア時に出力します。
※PCのみ

つまり、ブログを書いた時にこれらの情報がしっかり設定出来ていれば、綺麗にSNSにシェアされます。

今すぐ自分のブログの記事をチェック!

 

og:imageに注意!

特に注意が必要なのが、画像、og:imageプロパティです。

SNS側がog:imageプロパティを取得する際、最適なサイズになっていないと自動でトリミングして最適なサイズで表示する仕様になっています。

その結果、中途半端に切れた画像がシェアされてしまうという現象が起こります…。

わかりやすい例が、Twitter Cardです。
Twitterでシェアされる際の見え方のことです。

コレも指定ができるので、やってみてください

主に以下の2種類があります。

Summary Card
Summary Card
with large image

(※他にもアプリや動画をシェアする際の設定もありますが、こちらでは割愛します)

 

このTwitter Cardの画像部分を見ていただくとわかる通り、画像のトリミング比率が違います。

Summary Card
Summary Card
with large image
  1. Summary Cardで設定すると1:1の比率で画像がトリミングされる仕様
  2. Summary Card with large imageで設定すると1.91:1の比率で画像がトリミングされる仕様

実はこのSummary Card with large imageの推奨サイズも1200px × 630pxなんです。

 

迷ったらこのサイズ設定で問題ない!

当サイトでは、メインビジュアルをog:imageとして自動で設定されるようにしています。
そして、Twitterのシェアの際もSummary Card with largeの形でシェアされるようにしています。

 

つまり、メインビジュアルを1200px × 630pxのサイズで作っておけば、スマートフォンにも対応しつつ、画像を複数用意する必要がない&SNSでシェアされても綺麗に表示を実現できます

効率的に、質も担保できちゃいます!

アイキャッチの画像サイズを迷っている方はぜひ参考にしてみてください♪

 

まとめ

今回の画像のお話は「メインビジュアルとシェア画像を別のもので設定したい」「もっと広範囲のデバイスをカバーしたい」といったご希望もあると思うので、あくまで迷った時の参考程度に思っていただければ嬉しいです。

また、それぞれの設定方法はアメブロ、はてブ、Wordpress各テーマによって異なりますので割愛させていただきました。

ぜひキーワードをもとに、ご自身の利用しているプラットフォームでの設定方法を調べてみてください。

ちょっと細かくて難しい内容だったかもしれませんが、こういう積み重ねが大きな成果に繋がりますので、引き続き頑張っていきましょう!

以上、社畜旦那でした!

 

ABOUT ME
社畜旦那
SATSUKIの旦那です。平日は外資系コンサル企業にてwebマーケティングのコンサル(社畜)として働いています。休日はこのサイトの管理を担当し、妻との共通の趣味としてゆる〜く楽しんでいます。たまに妻の代打として登場し、初心者にもわかりやすくwebマーケのノウハウを発信していきます。