WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： マークアップ >Facebook

OGP画像とは、WebページをFacebookなどのSNSでシェアした際に、シェアした人のタイムラインに表示される画像のことです。下のような画像です。

この画像は、Webページの側で好きなように設定しておけば、見せたい画像を表示させられるため、より興味を持ってもらえそうな画像を設定することで、SNSからの訪問者を増やすことにも繋がります。
役割としては広告のようなものですね。
そのため、SNSを利用して訪問者を増やしたい方にとっては、重要な画像となります。

しかし、このOGP画像の規定画像サイズがころころ変わるようで、「結局どのサイズで作ればいいの？？」と迷ってしまう方も多いと思います。

そこで、2018年時点での最適サイズが分かりましたので、ご紹介いたします。

Facebook、Twitter、Google+は「縦630px×横1200px」

Facebook、Twitter、Google+の場合は「縦630px×横1200px」の画像を設定すればOK、ということが分かりました。

正確には、「縦横比が1：1.91」で「縦630px×横1200px以上」であれば問題ないようですが、あまり大きすぎると重くなってしまうため、横1200pxで良いのではないかと思います。

PCだと正方形になるのでは？

少し前のFacebookでは、

デバイスによって画像が長方形になったり正方形になったりする

という現象が起こっていました。スマホだと長方形、PCだと正方形で表示されていました。
正方形で表示されると、下のような画面になります。

「画像が左、文章が右」で小さく表示され、正方形に切り取られてしまうことがあります。

しかし、最近は仕様が変わったようで、最低限のサイズ以上で作れば、PCでも横長長方形で表示されるようになりました。
※小さい画像を設定すると、正方形になってしまうようです。

「縦630px×横1200px」より小さくても大丈夫そうですが、可能であればこのサイズの画像を設定することをおすすめします。
このサイズが推奨されているのは、これならスマホでの表示の際に画質が悪くならないためです。スマホの画質は今後どんどん良くなっていくと思われるため、将来のことを考えても、画像はできる限り大きいほうが良いということです。

なお、拡張子は「png」が推奨されています。理由は同じ、画質の良さです。ただ、jpg画像の使用自体はOKなようですので、それほど画質に問題なさそうであれば、jpgでも良いのではないかと思います。

はてなブックマークは「縦840px×横1200px」

はてなブックマークについては、もう少し縦に長い「1：1.43」となるようで、Facebook用OGPだと右端が切り取られてしまうそうです（左右ではなく、右だけだそうです…）。
そのため、はてなブックマークが気になる方は「縦840px×横1200px」の画像にして、「縦630px×横1200px」の範囲内に重要な内容が収まるように作ると良いのではないかと思います。

このサイズで画像を作れば、はてなブックマークでは画像どおりに表示され、上下の端が切れても問題ないレイアウトにしておけば、Facebookなどの画像としても違和感なく表示されます。
結局切れてしまうのですが、右端が大幅に切れるよりは、やりやすいかなと思います。

ご注意！LINEは正方形になる

ここまでは、多少比率が違えど横長長方形でした。ところが、LINEでは正方形に切り取られてしまうようです。
Facebookがせっかく正方形をやめてくれたのに…。

長方形の画像を設定すると、左右の端が切り取られて正方形になってしまいます。
サイズが縮小されるだけならそれほど困りませんが、比率が変わってしまうとなると作りにくいですよね。

これだけ比率が違うと、FacebookとLINEでそれぞれ画像を設定したいところですが、現状それは不可能なようです。
そこで、どちらの比率になっても問題のない画像を1つ用意します。

2パターンあります。

1.左右が切り取られてもOKな横長画像を作る

まず、「縦630px×横1200px」の画像を作り、「縦630px×横630px」の範囲内に重要な内容をおさめるパターンです。
これだと、Facebookなどでは画像どおり、LINEでは左右が切り取られた画像になります。

2.上下が切り取られてもOKな正方形画像を作る

次に、「縦1200px×横1200px」の画像を作り、「縦630px×横1200px」の範囲内に重要な内容をおさめるパターン。
こちらは、LINEでは画像どおり、Facebookなどでは上下が切り取られた画像になります。

どちらを選ぶかは、作ろうとしているデザインのレイアウト次第で判断するところです。
ただ個人的には、LINEの画像はかなり小さいので、どちらかというとFacebook、Twitterの規定サイズ「縦630px×横1200px」で作るほうが汎用性が高いのかなと思います。

いろいろ設定を調べるのは少し大変ですが、SNSはもうしばらく流行が続きそうなので、ぜひ素敵なOGP画像を作ってみてください！