※この記事は 2019年6月に公開したものを 2020年度版として一部文章を修正しました。
Facebookページのカバー画像の最適なサイズについての考察記事です。
実際に検証した結果を載せていますので、参考にしてみて下さい。
PC表示・スマホ表示ではサイズが異なる
カバー画像は、Facebookページのお問い合わせボタンの上にある横長のバナーです。
ご覧の通り、今回作成したものは背景に文字が入っているので画像が切れてしまうことはできれば避けたいのです。
改めて画像のサイズについて確認します。
Facebookヘルプセンターによると…
- コンピューターでは幅820ピクセル × 高さ312ピクセル、スマートフォンでは幅640ピクセル × 高さ360ピクセルの大きさでページに表示されます。
- 元のサイズは少なくとも幅400ピクセル × 高さ150ピクセルである必要があります。
- 幅851ピクセル × 高さ315ピクセルで、100キロバイト未満のsRGB JPGファイルだと読み込み時間が短くなります。
- パソコン：幅820px × 高さ312px
- スマートフォン：幅640px × 高さ360px
図で表すとこんな感じになりますね。
赤枠がパソコンでの最適なサイズ、青枠がスマホでの最適なサイズです。
サイズはともかく、比率が異なるのは困ります…。
PC・スマホの両方でぴったりと綺麗に見せるには？
前述の通り、PC表示とスマホ表示では最適なサイズ・比率が異なります。
でも、何とか綺麗に表示させたい！
という事で検証いってみます。
こんな画像を用意して、パソコン・スマートフォンそれぞれの見え方を比較しました。
幅820px × 高さ312pxの場合
↓ パソコン
↓ スマートフォン
幅820px × 高さ312pxの画像の場合、パソコンではぴったり♪
スマホでは両側がトリミングされてしまいました。
幅820px × 高さ360pxの場合
次は横820px、縦はスマホサイズに合わせて360pxにしてみます。
↓ パソコン
↓ スマートフォン
幅820px × 高さ360pxの画像の場合、スマホではぴったり！
でも、今度はパソコンで上下がトリミングされてしまいました。
やっぱりうまくいきませんでしたが、想定通りです。
次は、パソコン最適サイズ、820px × 312pxの “比率を変えずに” 縦360pxまで拡大した画像で試してみます。
幅946px × 高さ360pxの場合
幅820px × 高さ312pxの比率を変えずに縦360pxまで拡大したときの横幅は946pxになりました。
↓ パソコン
↓ スマートフォン
どちらもラインに沿ったサイズで表示されました。
スマートフォンではどうしても両サイドがトリミングされてしまいますが、そういう仕様なので仕方ないのでしょうね。
結論
今回の検証結果。
- パソコン・スマートフォンのどちらでも綺麗に見せたいなら画像サイズは「946px × 360px」
- それでもスマホでは両側がトリミングされてしまうので、「重要な事（素敵となど）は中央 640px × 360px の中に収める」
以上、Facebook（フェイスブック）ページのカバー画像の最適サイズ考察まとめでした。