この記事ではFacebookの個人アカウントのカバー画像・カバー写真・トップ画像について、スマホとPCの両方で断ち切りされず綺麗に入るサイズを検証しながら適正のサイズを割り出しています。
Facebookのカバー写真は少々めんどうです。スマホとPCで比率が違うので、どちらかに合わせれば断ち切られてしまったり変に空きが出てしまったりしますので、両方で見て自然な配置とサイズをご紹介します。
-
-
【2019年】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カバーサイズはどちらかのサイズに合わせるとずれる
公式の読み込みが短くなる「幅851px 高さ315pxで 100KB未満 sRGB JPG」でテスト画像を作ってはめて見ましょう。
上のテストの結果では「幅851px 高さ315px」はPCではほぼキレイに入ります。しかしスマホで両サイドと中央のアイコンの重なりが写真を大きく隠してしまいます。
FacebookカバーのPC・スマホ両方で入るサイズは？
上記のテストから分かったPCでもスマホでも安全に両方で表示されるエリアはこんな感じです。かなり狭くなりますね。
エリアに合わせて文字と写真の配置を調整しました。
顔はスマホのアイコンに重ならないように上に移動。文字は内側に寄せて横に長いものは2行に。
カバー写真だけにするとこんな感じになりました。2行の文字は左揃えに変更。
全体的に要素が中央寄りになった印象になりました。
実際に Facebookカバー写真適正サイズ・配置にした画像をはめ込んでみる
PCで見ると、やや中央に寄ってる感はありますが、自然に見えてる範囲ですね。
スマホもバッチリ！文字の左寄せが効いてますね。
Facebookカバー写真のフォーマットは「sRGBのJPG70%」がキレイ
sRGBのJPG70%で書き出したものは画像の劣化もなく、文字のにじみが最小限に抑えられます。公式で推奨されているPNGは逆ににじみが目立ちます。公式情報はあてにならないですね。
Facebookカバーの画像フォーマットは、JPG 、そして可能ならsRGBにしておくとキレイな結果が得られます。
まとめ
Facebookの個人アカウントのカバー写真は以下のようにすれば、スマホでもPCでも比較的自然にはめ込みができるということになりました。
仕様が複雑すぎますが、大切なところは切れないように配置する配慮が大事です。
- 画像サイズは 幅851px 高さ315px
- 両サイド幅172pxより内側、中央は下から142pxの高さは大事な要素を置かない
- 画像の容量は100KB以下がベター
- 画像フォーマットはJPG、70%、できればsRGBで
Facebookカバー写真の失敗しないポイント
カバー写真に、お客様を盛大に集めたセミナーやパーティ写真を使っている人を時々見かけますが、スマホでは堂々とお客様の顔をぶった切ります。その無頓着さにあまり良い印象は受けません。
集合写真など広範囲に数多くの人が入る写真は避けた方がよいでしょう。
また一番ラクでシンプルな方法は、全面がどこを切っても同じ模様のような写真や画像を使うことです。そして文字は入れるなら少ない文字数で中央にドンと配置すること。ぜひやってみてください。
Facebookグループ、Facebookカバー写真の適正サイズはどうなるの？
Facebookグループ・Facebookカバー写真は、この記事と同じサイズでできます。むしろアイコンで写真が隠れることがないので、もう少し広く取れます。
PCとスマホでの適正サイズを合わせて重なった「安全エリア」内に要素を配置する方法を説明しています。詳しくはこちらの記事をご覧ください。