この記事ではFacebookの個人アカウントのカバー写真画像(トップのバナー画像)について、スマホとPCの両方で見ても断ち切られずに入る適正サイズを紹介します。
Facebookのカバー写真は、スマホとPCでは比率が違うことなどから少し面倒です。なぜなら、どちらかに合わせれば切れたり変に空きが出てしまうし、アイコンで大きく画像が隠れてしまうからです。
カバー画像に盛り込んだプロモーションのコピーさえ、バッチリ断ち切られしまうのです。
なのでここでは、スマホとPCの両方で自然に見えて断ち切られない「安全エリア」のサイズと配置方法のコツをご紹介します。
Facebookページのカバー画像サイズはこちらに記載しています。
-
-
【2022年】Facebookページの適正カバー画像サイズはこちら!
Facebookページ・Facebookグループのカバー画像は、パソコンとモバイルでは縦横比のサイズが違います。この記事では検証しながら、PC、モバイル共に文字も切れずにきれいに入る適性サイズをお伝えします。
続きを見る
公式のカバー写真のサイズ
Facebookのヘルプセンターでは、このように指定されています。
ページのカバー写真:
コンピューターでは幅820ピクセルx高さ312ピクセル、スマートフォンでは幅640ピクセルx高さ360ピクセルの大きさでページに表示されます。元のサイズは少なくとも幅400ピクセルx高さ150ピクセルである必要があります。
幅851ピクセルx高さ315ピクセルで、100キロバイト未満のsRGB JPGファイルだと読み込み時間が短くなります。ロゴやテキストを含むプロフィール写真やカバー写真には、PNGファイルを使用すると、より良い結果を得ることができます。
Facebook ヘルプセンター
こう公式の説明にはあるものの、どちらかのサイズに合わせれば、どちらかで断ち切れが発生してしまいます。
また、ファイル形式はPNGが推奨されていますが、実際にはPNGよりJPGの方が断然キレイです。これは後述します。
Facebookカバー画像の適正サイズではめ込んだPC・スマホの見え方
先にうまく収められた画像の例をお見せします。元の画像はこのような感じ。
両サイドに要素は配置していません。


元のカバー画像
パソコンはこんな感じ。アイコンが中央に来て影が画面下に入ります。


パソコンでみたカバー画像
スマホはこちら。両サイドがバッサリ落とされているのが、上のパソコン版と比べてもわかります。イラストの男性が少し切れますが、許容範囲かと思います。
文字は切れずにしっかり入っています!


スマホでみたカバー画像
FacebookカバーのPC・スマホ両方で入るサイズは?
キャンバスサイズは赤枠の横851px 縦315px。
PC・スマホ両方でも安全に表示されるためには、青の枠の範囲「横幅558px以内の中央」に要素を収めることです。
FBカバー画像作成の3つのおさえるポイント
画像の中央下はアイコンがくるので、そこには文字を置かない
パソコン・スマホ共にアイコンが中央にくるので、アイコンで隠れないよう「中央の下半分(四分の一くらい)」は文字など切られたくない要素は置かないのがコツです。
両サイドは模様や背景など差し障りないものを配置する
両サイドはスマホで断ち切れるため、重要な要素は置かないようにしたいのですが、そのままだと左右が空きすぎて間延びし、パソコンで「変に中央に寄り過ぎ」に見えてしまいます。
なので左右の空きには、断ち切られても差し障りのない背景模様などを置くとよいです。そして文字やイラストなど切りたくないメインの要素は、スマホでも切れない青枠のぎりぎりの範囲に配置してください。
黒いシャドウが入るためパソコン版の画面下には文字を置かない
パソコンでは下部に黒いシャドウが入るので、そこに要素があると「後ろに何か見えるけど切れて(暗くて)よく見えない」といったごちゃごちゃした印象になります。
文字のような読んでもらわないと意味がないものは画面下には絶対に置かないことです。
ここまでのまとめ
- 文字など断ち切られたくない重要な要素は青枠の横幅558px以内の中央側に置く。
- アイコンと被らないよう、中央の真ん中以下には文字などが来ないようにする。
- カバー画像の両サイドには模様など断ち切られても問題ないものを置く。
何も置かないと間延びするので当たり障りのないものを置くと良い。
Facebookカバー写真のフォーマット:「sRGBのJPG70%」がキレイ
公式で推奨されているPNGでは、実はにじみが目立ちます。
それよりも『sRGBのJPG70%』で書き出したものは画像の劣化が少なく、文字のにじみが最小限に抑えられます。公式情報はあてにならないですね。
Facebookカバーの画像フォーマットは、JPG 、そして可能ならsRGBにしておくとキレイな結果が得られます。
Facebookカバー写真を失敗しないポイント
Facebookカバー写真にお客様を盛大に集めたセミナーやパーティ写真を使っている人を時々見かけます。スマホでは堂々とお客様の顔をぶった切りていることにお気づきでしょうか?
自分の権威性アピールのためにお客をダシに使っている感がにじみ出ますので、使用には注意が必要です。
このように、集合写真は顔が隠れたりスマホでは見えない人たちが出て来ますので、それを理解た上で、どうしても使いたい場合は最低限の調整をしておきましょう。
ここでは、スマホでは見えない人がいることを割り切った上で「顔が切れる人がいない配置」を行います。
とはいえ、プロのデザイナーから見てFacebookのカバー画像サイズの仕様は非常にヘンなのです。可能なら、人混みの写真は避けてシンプルな画像を使いましょう。
ポイントは、全面がどこを切っても同じ模様のような写真や画像を使うこと。文字は入れるなら少ない文字数で中央にドンと配置する。これがキレイに見せながら強く見える方法です。
まとめ
こちらがFacebookの個人アカウントのカバー写真のサイズのまとめです。
以下のようにすれば、スマホでもPCでも比較的自然なはめ込みができます。
複雑すぎる仕様ですが、まずは大切なところは切れないよう配置する配慮が大事です。
- 画像サイズは 幅851px 高さ315px
- 文字や人の顔など切れて欲しくない要素は横幅558px以内に配置
- 画像の容量は100KB以下がベター
- 画像フォーマットはJPG、70%、できればsRGBで
- 中央下はアイコンとかぶるため、はなるべく要素を置かない
プレゼント
サイズ幅851px 高さ315pxのテンプレートをダウンロードできます(右クリックでダウンロード)。以下はグレーが断ち切られる部分、白地は透過のPNGになっています。製作時のガイドとしてお使いください。
※使い方などがわかる方のみご活用ください。
Facebookグループ、Facebookカバー写真の適正サイズはどうなるの?
Facebookグループ・Facebookカバー写真は、この記事と同じサイズでできます。むしろアイコンで写真が隠れることがないので、もう少し広く取れます。
PCとスマホでの適正サイズを合わせて重なった「安全エリア」内に要素を配置する方法を説明しています。詳しくはこちらの記事をご覧ください。
-
-
【2022年】Facebookページの適正カバー画像サイズはこちら!
Facebookページ・Facebookグループのカバー画像は、パソコンとモバイルでは縦横比のサイズが違います。この記事では検証しながら、PC、モバイル共に文字も切れずにきれいに入る適性サイズをお伝えします。