KAORI CREATIVE

惹き寄せるビジネスワードプレスの作り方

Facebookカバー画像

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

投稿日:2018-12-29 更新日:

PCとスマホでキレイに入るFacebookページとFacebookグループのカバー画像サイズを探しましたのでご紹介します。

個人のFacebookアカウントのカバー画像はかなり違うので別記事にしました。

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表示では適切なサイズが違う

公式のサイズはこうです。やっかいなのは、パソコン(PC)とスマホとではタテヨコ比が違うんですね。PCサイズに合わせてカバー写真を作ればスマホでは下側が変に空いてしまったり、スマホに合わせれば左右が切れてしまうわけです。


パソコン: 横820px x  縦 312px
スマホ:横640px  x 縦360px

 

Facebookグループページのカバー画像はPCとモバイルでは比率が違う

文字など大事な要素や人物の顔が変に切れてしまうことは避けたいですよね。

公式のサイズ(PC・スマホ合わせたサイズ)で切れるエリア、入る範囲を確認する

PCとスマホのサイズを合体させ、スマホでもPCでも切れない安全エリアが分かるように色分けした画像でテストします。
画像そのもののサイズは、幅・縦が長い方を採用します。PCとスマホのサイズを重ねて共通のエリア=切れない安全エリアはとします(グリーン色の部分)。

Facebookカバー画像サイズで切れないエリア:KAORI CREATIVE

  • 画像サイズは幅820px(PCの幅) 縦360px(スマホの縦)
  • PCとスマホの共通面積=安全エリアは幅640px(スマホの幅) 縦312px(PCの縦)



安全エリア(幅640px  縦312px)はPC・スマホ共にほぼ切れずに表示できる

上記の画像をはめて確認すると、PCはグリーンのエリアがほぼ綺麗に入っています。縦方向の白矢印の下の▼が若干切れていますが、数ピクセルくらいです。
両サイドのオレンジ部分ははスマホの幅に合わせたサイズです。

▼PC

 Facebookカバーでちょうど入るエリアは?PCで検証


スマホもオレンジのエリアは入らず、下の黄色いエリア(PCの縦サイズに合わせた長さ)が見えていますが、グリーンのエリアは綺麗に入っていますね。

▼スマホ

 Facebookカバーでちょうど入るエリアは?スマホで検証

ここまでのまとめ

画像サイズ:幅820px 縦360px
縦横はPCとスマホサイズで大きい方を採用。
その画像の中に幅640px 縦320px の中に切れては困る大事な要素を入れる

ご注意


画像のサイズそのものは820px 360pxで作ってください。安全エリアのサイズ幅640px 縦320pxで作ると、入り方・切れ方がなぜか変わります。カバー画像そのものは大きめで作り、その中に安全エリアをつくることをおすすめします。

実際に画像を入れてFacebookカバーを作る

実際にFacebookカバーをつくる

※画像の赤の線は安全エリア幅640px 縦320pxのラインです。

写真の要素を位置を決める

縦サイズはPCにとって長めにしてあるため、PCでは赤線より下が隠れます。かといって何ないとスマホで見た時に下が変に空いた感じになります。

したがって切れても問題ないように赤線の下まで要素を配置すると自然に見えます。

文字の位置を決める

スマホ・PCでも影響がなさそうなのは画面の上の方です。そこに切れてはこまるテキストを置いています。

文字を下に置いてしまうとPCではキレイに入っていますが、スマホだと下の方が変に空いて見え、なんとも気持ちの悪いバランスになります。

 

はめ込み結果はPC・スマホ共にOK

そうしてはめた画像はPCもスマホもねらったイメージで違和感なく入りました。

▼PC

綺麗に入るFacebookカバー写真を作る

▼スマホ

綺麗に入るFacebookカバー写真を作る

 

 

Facebookグループのカバー画像もこの方法でOK

念のため「Facebookのグループ」のカバーも同じ方法で作成すればキレイに入ります。

これはアメリカのメールマーケティングサービスMailChimpのロゴです。中央にどかっとロゴがある感じで置きたいので、スマホで見て下が空いてしまわないよう、ロゴは少し下の方に配置しました。

PCで見てもぎりぎり違和感ない位置です。

 

Facebookグループのカバー写真を作って見る:KAORI TAKEHANA

はめてみたらPC、スマホ共にキレイに入ってバッチリですね!!^^

Facebookグループのカバー写真をはめ込み確認:PC

Facebookグループのカバー写真をはめ込み確認:SP

まとめ

 

Facebookカバー写真の適正サイズは、PC・SPの両方でも大事な部分が切れないエリアはこのようになります。

 

Facebookカバー画像のスマホ・PC共通で使える適正サイズ/カオリクリエイティブ

  • 画像サイズ(キャンバスサイズ) 幅820px 縦360px
  • 切りたくない安全エリアはその中で幅640px 縦312px
  • 文字は少なめに
  • 画像はJPGで

自然に見えるようにするには安全エリア(グリーンの部分)に隠れてほしくない要素を入れ、安全エリア外(上の画像でいえばイエローの部分)にも要素を入れておくことです。

また、画像はFacebookにアップロードした時点でかなり圧縮されます。図形や文字などはにじみが目立つので、文字の使用量は控えめの方がよいですね。スマホで読めなくても困りますし。

こんなことめんどくさいと言う方は、「模様が全面に入った柄にすればどこが切れても気にならりません。

ぜひ、バッチリはめ込んでくださいね。

それでは、また。

個人アカウントのFacebookカバーはどのサイズが最適?【2019年版】

-ソーシャルメディア
-,

Copyright© KAORI CREATIVE , 2019 All Rights Reserved.