Facebook個人アカウントのカバー写真サイズ【2020年版】


この記事ではFacebookの個人アカウントのカバー写真画像(トップのバナー画像)について、スマホとPCの両方で見ても断ち切られずに入る適正サイズを紹介します。

Facebookのカバー写真はスマホとPCでは比率が違い、厄介です。どちらかに合わせれば切れたり変に空きが出てしまうのです。なので、ここでは両方で見て自然に見える「安全エリア」のサイズと配置方法のコツをご紹介します。

Facebookページのカバー画像サイズはこちらに記載しています。

Facebookカバー画像
【2020年】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」でテスト画像をはめた感じです。

作成したカバー画像

Facebookカバー851x315でテスト

PCのはめ込み結果。キレイに入ってます。

FacebookカバーをPCで見た851x315でテスト

スマホのはめ込み結果。見事にテキストが断ち切れています。

Facebookカバースマホで見た851x315でテスト
このように公式の推奨サイズ「幅851px 高さ315px」はPCではキレイですがスマホではかなり断ち切られ、イケてません。

パソコンを基準にして作るとスマホでは予期しない見え方になるので、PC/スマホの両方できちんと見えるエリアを知って置くことは、ブランディングの上でも大事ですね。

サイズは次で説明します。

Facebookカバー画像の適正サイズではめ込んだPC・スマホの見え方

先に見せますとパソコンはこんな感じに入ります。

Facebookカバー写真画像 適正サイズではめたパソコン画面

スマホはこちら。文字は切れず綺麗に入っています。イラストは男性が少し切れますが許容範囲かと思います。

Facebookカバー写真画像 適正サイズではめたスマホ画面

FacebookカバーのPC・スマホ両方で入るサイズは?

キャンバスサイズは赤枠の横851px 縦315px。PC・スマホ両方で安全に表示されるエリアが青の枠の範囲。なので大事な要素は、青枠の横幅558px以内の中央側に収めることです。
スマホでは、中央に大きくアイコンが来るのでその辺も考慮した要素の配置が必要です。

Facebookカバー画像・写真サイズ

FBカバー画像作成のコツ:スマホで切れる左右の端には差し障りのないものを置く

スマホで切れてしまうため、両サイドに重要な要素は置かないようにします。ですが、そのままだと左右が空きすぎて「中央に寄り過ぎ」に見えてしまいます。

なので、文字やイラストなど切りたくないメインの要素は、スマホで切れない「ぎりぎりの範囲に配置」します。そして左右の空きには断ち切られても差し障りのない背景模様を敷きました。

Facebookカバー写真画像 安全エリア ©KAORI CREATIVE

パソコンでは左下にアイコンが来ることと、下部に黒いシャドウが入ります。そこに要素が置かれていると、「後ろに何か見えるけど切れて(暗くて)よく見えない」といったごちゃごちゃした印象になります。

それを避けるため左下と下側1/4位にはモノを置かないようにします。そうすることで、「隠れている何か」がない、スッキリ洗練されたカバーにすることができます。

Facebookカバー写真画像 適正サイズではめたパソコン画面

Facebookカバー写真画像 ©KAORI CREATIVE

Facebook個人アカウントのカバー写真テンプレート

テンプレートにすると、このような感じになります。

Facebookカバー写真画像サイズ テンプレート©KAORI CREATIVE

先ほどのカバー画像にこのテンプレートを当て込むと、こんな感じです。

Facebookカバー写真画像のサイズ 切れないエリアの確認

FBカバー画像作成のコツ:大切な要素を安全エリア内におけば、断ち切られても自然に見える

はじめの失敗例の写真画像を、大切な要素(顔、カップ、文字)を『安全エリア』内に配置し直したものです。どうでしょう?

このように全面が写真の場合でも、重要な要素が安全エリア内であれば自然に見えますよね。

Facebookカバー写真のはめ込み結果:PC Facebookカバー写真のはめ込み結果:SP

 

Facebookカバー写真のフォーマットは「sRGBのJPG70%」がキレイ

公式で推奨されているPNGでは、実はにじみが目立ちます。
それよりも『sRGBのJPG70%』で書き出したものは画像の劣化が少なく、文字のにじみが最小限に抑えられます。公式情報はあてにならないですね。

Facebookカバーの画像フォーマットは、JPG 、そして可能ならsRGBにしておくとキレイな結果が得られます。

FacebookカバーのJPG、sRGBは画像の劣化は抑えれる

 

Facebookカバー写真を失敗しないポイント

Facebookカバー写真にお客様を盛大に集めたセミナーやパーティ写真を使っている人を時々見かけます。スマホでは堂々とお客様の顔をぶった切りていることにお気づきでしょうか?
自分の権威性アピールのためにお客をダシに使っている感が出てしまいかねませんので、使用には注意が必要です。

このように、集合写真は顔が隠れたりスマホでは見えない人たちが出て来ますので、それを認識した上で最低限の調整をしておきましょう。

Facebook cover サイズいっぱいに画像を置いてはいけない

ここでは、スマホでは見えない人がいることを割り切った上で「顔が切れる人がいない配置」を行います。

Facebookカバー写真画像サイズ 集合写真の調整例

とはいえ、プロのデザイナーから見てFacebookのカバー画像サイズの仕様は非常にヘンなのです。可能なら、人混みの写真は避けてシンプルな画像を使いましょう。

それがもっとも置かれた要素(モノ)が良い意味で立って、美しく見えます。

ポイントは、全面がどこを切っても同じ模様のような写真や画像を使うこと。文字は入れるなら少ない文字数で中央にドンと配置する。これがキレイに見せながら強く見える方法です。

Facebookカバー簡単なのは全面模様、言葉も少なく

まとめ

こちらがFacebookの個人アカウントのカバー写真のサイズのまとめです。

以下のようにすれば、スマホでもPCでも比較的自然なはめ込みができます。
複雑すぎる仕様ですが、まずは大切なところは切れないよう配置する配慮が大事です。

Facebookカバー写真画像サイズ テンプレート©KAORI CREATIVE

  • 画像サイズは 幅851px 高さ315px
  • 文字や人の顔など切れて欲しくない要素は横幅558px以内に配置
  • 画像の容量は100KB以下がベター
  • 画像フォーマットはJPG、70%、できればsRGBで
  • 左下、中央下にはなるべく要素を置かない

プレゼント


上記テンプレートの実寸サイズでダウンロードできます。画像作成時に、横851px 縦315pxのキャンバスを作り、そこにテンプレートをおいてガイドとしてお使いください。

Facebookグループ、Facebookカバー写真の適正サイズはどうなるの?

Facebookグループ・Facebookカバー写真は、この記事と同じサイズでできます。むしろアイコンで写真が隠れることがないので、もう少し広く取れます。

PCとスマホでの適正サイズを合わせて重なった「安全エリア」内に要素を配置する方法を説明しています。詳しくはこちらの記事をご覧ください。

Facebookカバー画像
【2020年】Facebookページの適正カバー画像サイズはこちら!

Facebookページ・Facebookグループのカバー画像は、パソコンとモバイルでは縦横比のサイズが違います。この記事では検証しながら、PC、モバイル共に文字も切れずにきれいに入る適性サイズをお伝えします。

必要とされる集客ブログを作るメール講座
ワードプレスを作っただけで精一杯…そんな女性起業家の方へ。
あなたを必要とする人へ届ける集客ブログづくりのメールレッスンを配信。ワードプレスの講座のお知らせも。



ワードプレス集客で抑えて起きたい11のリスト 1

ワードプレスで集客したいのでその方法が知りたい。 集客できるワードプレスを作りたい。失敗しないコツを知りたい。 でも情報が多すぎでググっても ...

2

ワードプレスにどんなプラグインを入れたらいいか、迷いますよね。 ブロ子始めたばかりの初心者なんですが、ワードプレスにどんなプラグインをいれた ...

-ソーシャルメディア SNS集客
-,

© 2020 KAORI CREATIVE