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

コラム

デジタル事業部

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

2019年06月28日
2020年01月30日

昨日、久しぶりにスタートミーアップのフェイスブックページのカバー画像を変更しました。
で、いつも思う。

「サイズはいくつで作ったらいいんだっけ？」

という事で、フェイスブックページのカバー画像のサイズについて考えてみました。

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

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

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

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

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

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

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

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

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

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

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

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

幅820px × 高さ312pxの場合

↓ パソコン

↓ スマートフォン

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

幅820px × 高さ360pxの場合

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

↓ パソコン

↓ スマートフォン

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

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

では、パソコン最適サイズ、820px × 312pxの比率を変えずに 縦360pxまで拡大した画像ではどうでしょうか。
この時、横幅は946px になりますね。

幅946px × 高さ360pxの場合

↓ パソコン

↓ スマートフォン

どちらの表示もぴったりうまくいきました！！

結論

今回の検証結果。

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

時には諦めも必要って事で、これで良しとしましょう。

この記事を書いた人

冨江恵: 2014年個人でデザイン事務所を開業後、2018年3月にスタートミーアップ合同会社へ。現在は、デジタル事業部のメンバーとして茨城県つくば市を中心にホームページ制作・グラフィックデザイン・CAD図面データ作成等を行なっています :‑D

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