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

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

  関連記事

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

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

知財ブログ記事、寄稿の募集について

ブログを書き始めて2年ほど経ちます。新しい試みとして、記事の寄稿を募集しようと思 …

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

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

katax × IPFbiz ~企業法務のキャリアについて考える~

対談シリーズ第7回目は、「企業法務について」のkataxさんです。 以前に対談頂 …

企業法務マンサバイバル(はっしー) × IPFbiz ~企業法務専門家の働き方を考える~

対談シリーズ第8回目は、「企業法務マンサバイバル」のはっしーさんです。 はっしー …

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

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

WordPressへ移転

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

ブログに書くこと・書かないこと 読まれる記事・読まれない記事

このブログを書き始めて、半年ほどが経ちました。調べたことや考えたことを、まとめて …

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

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

FB
ブログのFacebookページ

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