スタートミーアップ合同会社

コラム

デジタル事業部

【2020年度版】Facebook（フェイスブック）ページのカバー画像をパソコン・スマホでピッタリ表示するには？最適なサイズ考察まとめ

2019年06月28日
2020年09月15日

※この記事は 2019年6月に公開したものを 2020年度版として一部修正を致しました。

Facebookページのカバー画像の最適なサイズについての考察記事です。
実際に検証した結果を載せていますので、参考にしてみて下さい。

PC表示・スマホ表示ではサイズが異なる

【2020年度版】Facebook（フェイスブック）ページのカバー画像をパソコン・スマホでピッタリ表示するには？最適なサイズ考察まとめ

カバー画像は、お問い合わせボタンの上にある横長のバナーです。
ご覧の通り、今回作成したものは背景に文字が入っているので画像が切れてしまうことはできれば避けたいのです。

Facebookヘルプセンターを確認すると…

コンピューターでは幅820ピクセル × 高さ312ピクセル、スマートフォンでは幅640ピクセル × 高さ360ピクセルの大きさでページに表示されます。
元のサイズは少なくとも幅400ピクセル × 高さ150ピクセルである必要があります。
幅851ピクセル × 高さ315ピクセルで、100キロバイト未満のsRGB JPGファイルだと読み込み時間が短くなります。

Facebookページのプロフィール写真やカバー写真のサイズはどのくらいですか。

パソコン：幅820px × 高さ312px
スマートフォン：幅640px × 高さ360px

図で表すとこんな感じになりますね。
赤枠がパソコンでの最適なサイズ、青枠がスマホでの最適なサイズです。

【2020年度版】Facebook（フェイスブック）ページのカバー画像をパソコン・スマホでピッタリ表示するには？最適なサイズ考察まとめ

サイズはともかく、比率が異なるのは困ります…。

PC・スマホの両方でぴったりと綺麗に見せるには？

前述の通り、PC表示とスマホ表示では最適なサイズ・比率が異なります。
でも、何とか綺麗に表示させたい！

という事で検証いってみます。

【2020年度版】Facebook（フェイスブック）ページのカバー画像をパソコン・スマホでピッタリ表示するには？最適なサイズ考察まとめ

こんな画像を用意して、パソコン・スマートフォンそれぞれの見え方を比較しました。

幅820px × 高さ312pxの場合

↓ パソコン
【2020年度版】Facebook（フェイスブック）ページのカバー画像をパソコン・スマホでピッタリ表示するには？最適なサイズ考察まとめ

↓ スマートフォン
【2020年度版】Facebook（フェイスブック）ページのカバー画像をパソコン・スマホでピッタリ表示するには？最適なサイズ考察まとめ

パソコンはぴったり♪スマホは両側がトリミングされてしまいました。

幅820px × 高さ360pxの場合

次は横820px、縦はスマホサイズに合わせて360pxにしてみます。

↓ パソコン
【2020年度版】Facebook（フェイスブック）ページのカバー画像をパソコン・スマホでピッタリ表示するには？最適なサイズ考察まとめ

↓ スマートフォン
【2020年度版】Facebook（フェイスブック）ページのカバー画像をパソコン・スマホでピッタリ表示するには？最適なサイズ考察まとめ

今度はスマホはぴったり！でもパソコンでは上下がトリミングされてしまいました。

やっぱりうまくいきませんでした。
でも、ここまでは想定通りです。

では、パソコン最適サイズ、820px × 312pxの比率を変えずに 縦360pxまで拡大した画像ではどうでしょうか？

幅946px × 高さ360pxの場合

820px × 312pxの比率を変えずに縦360pxまで拡大したときの横幅は 946pxになりました。

↓ パソコン
【2020年度版】Facebook（フェイスブック）ページのカバー画像をパソコン・スマホでピッタリ表示するには？最適なサイズ考察まとめ

↓ スマートフォン
【2020年度版】Facebook（フェイスブック）ページのカバー画像をパソコン・スマホでピッタリ表示するには？最適なサイズ考察まとめ

それぞれ引いたラインに合わせてきちんと表示されました。
スマートフォンではやはり両端はトリミングされてしまいましたが、縦はトリミングされることなくピッタリです。

結論

今回の検証結果。

パソコン・スマートフォンのどちらでも綺麗に見せたいなら画像サイズは「946px × 360px」
それでもスマホでは両側がトリミングされてしまうので、「重要な事（素敵となど）は中央 640px × 360px の中に収める」

【2020年度版】Facebook（フェイスブック）ページのカバー画像をパソコン・スマホでピッタリ表示するには？最適なサイズ考察まとめ

スタートミーアップのカバー画像も背景の文字が切れてしまったので、時間を見つけて作成し直したいと思います。

以上、Facebook（フェイスブック）ページのカバー画像の最適サイズ考察まとめでした。

この記事は役に立ちましたか？

スライダー（スライドショー・カルーセル）は本当に必要？その役割と必要性について。 Googleしごと検索（Google for Jobs）求人情報を掲載する流れと構造化データマークアップ徹底解説！