ブログとFacebookのOGPに最適なサムネイル画像サイズ比率

ブログ等のメディアに記事を書くときに、画像は非常に重要な役割を果たします。

記事の内容を理解してもらうのに役立つと同時に、一見して記事内容のイメージを持ってもらうことで、この記事を読み進めようかという気にさせることができます。

そして、特に重要な役割を果たすのが、その記事に遷移する前の状態、つまり記事一覧やSNS上でのシェア画面から、その記事にクリックしてもらう場面です。
ここでのサムネイル画像・アイキャッチ画像が魅力的であることによって、より多くの人に記事を読んでもらうことができます。

この画像の最適なサイズ・縦横比について検討します。

 

Facebookのシェアに最適な画像サイズ

まず、非常に重要になるのが、Facebookでシェアされるのに最適なサイズ。

過去に数回変更がありましたが、現在FBで推奨されている画像サイズは、縦630×横1200です。このサイズ・比率の画像であれば、FB上で最も見やすくシェアされます。

サイズはある程度の大きさ以上であればよいので、重要なのは縦横比。縦横比が約1:1.9であれば、切れたりすることなく、見やすくFBでシェアされます。

 

 

 

ブログのサムネイルに最適な画像サイズ

FBだけをケアすれば良いなら簡単なのですが、そうはいきません。

例えば当ブログの場合、トップページに記事一覧が並びますが、そこでのサムネイルは正方形です。
つまり縦横比1:1の画像にトリミングされてサムネイルとなります。

当ブログに限らず、多くのブログ等メディアで、記事一覧のサムネイルは正方形となる場合が多いと思われます。

また、シェアされる媒体も、FB以外にも色々と想定され、それらでは正方形のサムネイルとなることがあります。

 

失敗パターン

そうすると、FB上でのシェアと、記事一覧のサムネイルの両方を意識した画像サイズ・内容としなければ、どちらかは上手くいってもどちらかでは失敗してしまいます。

つまり、下記のような1:1.9の画像は、FBでは最適に表示されますが、記事一覧では左右の領域が削られてしまうのです。

 

そうすると、例えば下記のような写真の場合、

このように左右が削られて、せっかくの写真の良いところが台無しです。

 

 

だからといって正方形の写真を用意すると、今度は記事一覧ではいい感じなのですが、FBにシェアされると上下の領域が削られてしまいます。

 

例えば下記のようなイラスト。
サムネイルを意識してあえて正方形の形にしているのですが、

FBにシェアされる際には、上下の領域が削られて、いまいちな感じで見られてしまいます。

 

 

両対応の方法①　情報を詰める

それでは、FBと記事一覧サムネイルに両対応するにはどうれば良いのか。

一つの対策は、真ん中に情報を詰め込むこと。

つまり、1:1.9のFBに最適な画像の場合は、正方形にトリミングされてもOKなように、真ん中に重要な情報を詰め込みます。

つまり、先ほどの写真の場合は、左右位置を調整して、真ん中に重要な情報を移動させることで、左右が切り落とされてもOKな写真にできます。

 

正方形の、記事一覧に最適な画像サイズの場合も同様。

上下端の部分は切り落とされることを意識して、真ん中に重要な情報を詰め込みます。

 

特に、画像中に文字を入れる場合は、削られる領域を意識して、真ん中に文字領域を持っていきます。

 

 

例えば、「今週の知財ニュース」シリーズに使っていたサムネイル画像。
これまでは記事一覧を意識して正方形とすることだけをケアしていましたが、これではFB上では文字が削れて、パッと見の意味が分かりません。

 

これを、このように文字列を真ん中にすることで、FB上でもバッチリな画像となります。

 

特に、画像中に文字を入れる時などは、削られる部分を意識して真ん中に持ってくることで、元々のサイズが正方形でも1:1.9でも、両対応できる画像にすることができます。

 

両対応の方法②　余白を作る

両対応のもう一つの方法が、余白を作ること。

先ほどの詰め込む対応は、重要な情報が一部に限られている場合には良いのですが、結局画像の一部は削られてしまうので、画像全体を見せたいときにはうまくいきません。

したがって、もともとが1:1の正方形画像の場合は、あえて左右に0.45ごとの余白領域を作る。

もともとが1:1.9の画像の場合は、上下に0.45ごとの余白領域を作る。

そうすると、FB上でも記事一覧上でも、画像の一部が削られることなく、全体を見てもらうことができます。

例えば下記のような画像。正方形なので記事一覧ではOKですが、FB上だと上下が削られます。

それを避けるために、左右に余白領域を作りました。

記事一覧では、左右の余白がけずられるだけなので、もともとの正方形の画像で表示されます。
そしてFB上では上下が削られることなく、下記のように左右に余白をもって、全体が表示されます。
記事本文中でも、そんなに変ではないですよね。

このように、正方形の画像なら横に0.45ずつ、1:1.9の画像なら上下に0.45ずつ余白を作るように画像編集をすればOKです。

 

それ以外の縦横比の場合ですが、縦長の画像の場合は、縦を1とすれば、横全体が1.9になるように、

1:1.9以上の横長の場合は、横を1としたときに縦全体が1になるようにすればOK！

ちょっと難しいのが、1:1と1:1.9の間の縦横比の場合。

例えば、1:1.5の画像の場合を考えてみましょう。

まず元画像の横が1.5なので、ここが削られないために、縦を1.5にする必要があります。

それでは横は、1.5×1.9かというと、そうではなく、元画像の縦の1の部分が削られなければ良いので、横は1.9となります。
つまり、1.5:1.9の比率にしておけば、両対応できます。

いかがでしょうか。

こんな感じで、画像にちょっとひと手間を加えることで、見られる人に伝わりやすく、PVも向上する、かも。

 - ブログ

  関連記事