PCとスマホでキレイに入るFacebookページとFacebookグループのカバー画像サイズを探しましたのでご紹介します。
個人のFacebookアカウントのカバー画像はかなり違うので、別記事にしました。こちらをご覧ください。 この記事ではFacebookの個人アカウントのカバー写真画像（トップのバナー画像）について、スマホとPCの両方で見ても断ち切られずに入る適正 ...
Facebook個人アカウントのカバー写真サイズ【2021年版】
Facebookグループ／Facebookページのカバー画像サイズ
Facebookグループ／Facebookページのカバー画像のサイズは公式のヘルプセンターではこのように記載されています。
- コンピューターでは幅820ピクセルx高さ312ピクセル、スマートフォンでは幅640ピクセルx高さ360ピクセルの大きさでページに表示されます。
- 元のサイズは少なくとも幅400ピクセルx高さ150ピクセルである必要があります。
- 幅851ピクセルx高さ315ピクセルで、100キロバイト未満のsRGB JPGファイルだと読み込み時間が短くなります。
Facebook ヘルプセンター
https://www.facebook.com/help/125379114252045
最後の行にある「幅851px 高さ315px」での方法は、個人アカウントのカバー写真で検証しています。Facebookグループ、ページでも同じく収めることができます。
またファイル形式はPNGよりもJPGの方が文字などはキレイに表示されます。検証した内容はこちらをご覧ください。
スマホ表示とPC表示では適切なサイズが違う
パソコン： 横820px 縦 312px
スマホ：横640px 縦360px
公式のサイズはこうです。やっかいなのは、パソコン（PC）とスマホとではタテヨコ比が違うんですね。PCサイズに合わせてカバー写真を作ればスマホでは下側が変に空いてしまったり、スマホに合わせれば左右が切れてしまうわけです。
文字など大事な要素や人物の顔が変に切れてしまうことは避けたいですよね。
公式のサイズ（PC・スマホ合わせたサイズ）で切れるエリア、入る範囲を確認する
PCとスマホのサイズを合体させ、スマホでもPCでも切れない安全エリアが分かるように色分けした画像でテストします。
画像そのもののサイズは、幅・縦が長い方を採用します。PCとスマホのサイズを重ねて共通のエリア＝切れない安全エリアはとします（グリーン色の部分）。
- 画像サイズは幅820px（PCの幅） 縦360px（スマホの縦）
- PCとスマホの共通面積＝安全エリアは幅640px（スマホの幅） 縦312px（PCの縦）
安全エリア（幅640px 縦312px）はPC・スマホ共にほぼ切れずに表示できる
上記の画像をはめて確認すると、PCはグリーンのエリアがほぼ綺麗に入っています。縦方向の白矢印の下の▼が若干切れていますが、数ピクセルくらいです。
両サイドのオレンジ部分ははスマホの幅に合わせたサイズです。
※2021年の画面とは違いますが、サイズは下記の通りではまります。
▼PC
スマホもオレンジのエリアは入らず、下の黄色いエリア（PCの縦サイズに合わせた長さ）が見えていますが、グリーンのエリアは綺麗に入っていますね。
▼スマホ
ここまでのまとめ
縦横はPCとスマホサイズで大きい方を採用。
その画像の中に幅640px 縦320px の中に切れては困る大事な要素を入れる。
ご注意
画像のサイズそのものは820px 360pxで作ってください。安全エリアのサイズ幅640px 縦320pxで作ると、入り方・切れ方がなぜか変わります。カバー画像そのものは大きめで作り、その中に安全エリアをつくることをおすすめします。
実際に画像を入れてFacebookカバーを作る
※画像の赤の線は安全エリア幅640px 縦320pxのラインです。
写真の要素を位置を決める
縦サイズはPCにとって長めにしてあるため、PCでは赤線より下が隠れます。かといって何ないとスマホで見た時に下が変に空いた感じになります。
したがって切れても問題ないように赤線の下まで要素を配置すると自然に見えます。
文字の位置を決める
スマホ・PCでも影響がなさそうなのは画面の上の方です。そこに切れてはこまるテキストを置いています。
文字を下に置いてしまうとPCではキレイに入っていますが、スマホだと下の方が変に空いて見え、なんとも気持ちの悪いバランスになります。
はめ込み結果はPC・スマホ共にOK
そうしてはめた画像はPCもスマホもねらったイメージで違和感なく入りました。
▼PC
▼スマホ
Facebookグループのカバー画像もこの方法でOK
「Facebookのグループ」のカバーも同じ方法で作成すればキレイに入ります。
以下のサンプルはアメリカのメールマーケティングサービスMailChimpのロゴです。中央にロゴをドカっと置きたいので、スマホで下部の空きが出ないように、ロゴはやや下の方に配置。
PCで見てもぎりぎり違和感ない位置。PC、スマホ共にキレイに入ってバッチリですね！！＾＾
まとめ
Facebookカバー写真の適正サイズは、PC・SPの両方でも大事な部分が切れないエリアはこのようになります。
- 画像サイズ（キャンバスサイズ） 幅820px 縦360px
- 切りたくない安全エリアはその中で幅640px 縦312px
- 文字は少なめに
- 画像はJPGで
自然に見えるようにするには、安全エリア（上記画像のグリーンの部分）に隠れてほしくない要素を入れ、安全エリア外（上記画像のイエローの部分）にも要素を入れておくこと。
また、画像はFacebookにアップロードした時点で容量が圧縮されかなり劣化します。特に図形や文字はにじみが目立つので、文字の量は少なめにしておきましょう。たくさん詰め込んでもスマホで読みずらくなりますしね。
細かい調整が面倒だと言う方は「模様が全面に入った柄」にするのも１つです。どこが切れても気になりませんから！
ぜひ、バッチリはめ込んでくださいね。
