この記事ではFacebookの個人アカウントのカバー写真について、スマホとPCの両方でトリミングされないサイズを検証してみました。
Facebookのカバー写真は少々めんどうです。スマホとPCで比率が違うのでどちらかに合わせれば片方で断ち切られてしまったり変に空間が相手しまったりしまいます。
両方で見て自然な配置とサイズをご紹介します。
-
-
【2019年】Facebookページの適正カバー画像サイズはこちら！
公式のカバー写真のサイズ
Facebookのヘルプセンターによると、このように指定されています。
ページのカバー写真:
コンピューターでは幅820ピクセルx高さ312ピクセル、スマートフォンでは幅640ピクセルx高さ360ピクセルの大きさでページに表示されます。元のサイズは少なくとも幅400ピクセルx高さ150ピクセルである必要があります。
幅851ピクセルx高さ315ピクセルで、100キロバイト未満のsRGB JPGファイルだと読み込み時間が短くなります。ロゴやテキストを含むプロフィール写真やカバー写真には、PNGファイルを使用すると、より良い結果を得ることができます。
Facebook ヘルプセンター
とありますが、コンピューター（PC）のサイズではめた時、スマホのサイズではめた時、それぞれ逆で見ると変に断ち切れてしまいます。
「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とスマホでの適正サイズを統合し、その重なった面積内に要素を配置する方法をとりました。詳しくはこちらの記事をご覧ください。