Facebookページのカバー写真サイズはどれくらいが適切? 【2017年版】

Facebookページを使っていますか?ここで良く問題となることに、カバー写真のサイズはどれくらいが良いのでしょうか?ということがあります。Facebookが公式に発表している推奨サイズはこちらのページに記載されています。

コンピュータでは幅820ピクセルx高さ312ピクセル、スマートフォンでは幅640ピクセルx高さ360ピクセルの大きさでページに表示されます。

https://www.facebook.com/help/125379114252045

なるほど、しっかり明記されていますね。しかし、このサイズを鵜呑みにしてしまうとPCは良くてもスマホでの写真が思うようにならないことがありました。PCではきちんと表示される画像が、スマホでは両サイドが大きく欠けてしまったり。

では最適なサイズはどれくらいなのでしょうか?どうやら大きく分けると2つのサイズに絞られるようです。
それでは解説してみましょう。

PC表示を重視するパターン:スマホ表示で画像が欠けて良い場合

この場合は 820×360(ピクセル)で作ります

スマホで見た場合、ある程度欠ける部分を理解して画像を用意するのがポイント!
スマホで見た場合、ある程度欠ける部分を理解して画像を用意するのがポイント!

FacebookのPCの推奨サイズに合わせてカバー写真を作ると、スマホで両端が大きく欠けてしまいます。これをある程度見越し、欠けても良い範囲を両サイドに設ける画像を作ります。絶対に欠けてはいけない部分は640×312(ピクセル)の範囲に収めるようにし、最終的に820×360(ピクセル)の画像を作るという感じです。ロゴや文字や人物など絶対に欠けてはいけない物は、この範囲に収めると良いでしょう。

※検証した結果、iPhoneではこちらの方が後述するケースよりも高画質であったことも追記しておきます。

スマホ表示を重視するパターン:スマホ表示で画像すべてを見せたい場合

この場合は 820×461(ピクセル)で作ります

スマホ表示を優先し、PCの画像よりあらかじめ縦に大きな余白を持ったサイズを用意するのがポイント!
スマホ表示を優先し、PCの画像よりあらかじめ縦に大きな余白を持ったサイズを用意するのがポイント!

スマホでの表示を重視し、両サイドを幅一杯にスマホでも表示させたいという場合にはこちらのサイズで画像を作ると良いでしょう。PCでは大きな余白部分ができますが、画像を選ぶ際に上下にスライドして良い位置を選ぶことができます。一方、スマホ表示ではPCでは欠けている部分も含め、画像全てが見えるということになります。ポイントは、PC表示できちんと表示される高さの312pxの範囲に、見せたいものを収めるということになります。

ちなみに高さの461pxはどこから来ているのか?ということなのですが、これはスマホの縦横比を基準に算出しています。
640:360 ≒ 820:461ということになります。

まとめ:スマホ表示をどれほど重視するかという点が決め手になります

いかがでしたか?どちらのサイズを選んでも幅は820pxで作ります。高さがそれぞれ違うんですね。ただ、Facebookの仕様上の問題で、いずれの方法を選んでもスマホ表示での画質が著しく劣化する場合があります。選ぶ画像によってもその印象は変わりますが、スマホの横持ちなどで見る場合は、かなり荒く見えてしまう場合がありました。iPhoneかAndroidか、どうも機種によってもこの辺は違うようです。

今のところ、万能のサイズはないのかもしれません。何かもっと良い情報をお持ちの方は、ぜひコメントくださいね!