IPFbiz

知財・ 会計・ビジネスニュース

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

   

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

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


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

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

 

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

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

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

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

 

ブログ最適画像1

 

 

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

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

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

ブログ最適画像2

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

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

 

失敗パターン

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

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

ブログ最適画像3

 

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

ブログ最適画像5

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

ブログ最適画像6

 

 

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

ブログ最適画像4

 

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

ブログ最適画像7

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

ブログ最適画像8

 

 

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

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

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

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

ブログ最適画像9

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

ブログ最適画像11

 

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

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

ブログ最適画像10

 

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

ブログ最適画像12

 

 

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

0701

 

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

0804

 

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

 

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

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

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

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

ブログ最適画像13

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

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

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

ブログ最適画像16

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

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

ブログ最適画像15

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

 

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

ブログ最適画像17

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

ブログ最適画像18

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

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

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

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

ブログ最適画像19

いかがでしょうか。

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

 - ブログ

ad

ad

Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

  関連記事

ipfbiz300
ブログを始めて1年を振り返って

このブログを書き始めてから、1年が経ちました。早いものです。 ブログを始めた理由 …

著作権
ブログを書くときに注意すべき著作権

これまでもネット上で注意すべき著作権の問題について、バラバラと書いてきましたが、 …

ブログSEO アクセスアップのための記事タイトルの決め方 Tips

1年半ほどブログを書いてきて、アクセスアップに有効な記事タイトルの決め方にもなん …

WordPressへ移転

livedoorブログから、レンタルサーバーでのWordpressに移転しました …

2021年の振り返り

大晦日恒例の、今年の振り返り! IPTechの振り返り withコロナの状況が続 …

自分メディアとかセルフブランディングとか

先日の企業法務戦士さんとの対談の後に、ブログのあり方について色々と考えました。 …

livedoor_to_wordpress
livedoorブログからWordPressへの移転方法

livedoorブログから、レンタルサーバーを借りてのWordpressへ移転し …

FB
ブログのFacebookページ

昨年末からブログを書き出して、アクセス数も段々増えてきました。もう少しで月1万P …

知財系メディアと雑談ブログをリリースします

新しいWebページを2つ作成しました。紹介させてください。IPFlog 雑談ブロ …

2022年の抱負

明けましておめでとうございます。 一年の計は元旦にあり! ということで、毎年恒例 …