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

Facebookグループページのカバー画像はPCとモバイルでは比率が違うパソコン: 横820px  縦 312px
スマホ:横640px   縦360px

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

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

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

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

  • 画像サイズは幅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のロゴです。中央にロゴをドカっと置きたいので、スマホで下部の空きが出ないように、ロゴはやや下の方に配置。Facebookグループのカバー写真を作って見る:KAORI TAKEHANA

PCで見てもぎりぎり違和感ない位置。PC、スマホ共にキレイに入ってバッチリですね!!^^

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

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

まとめ

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

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

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

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

Facebook cover サイズいっぱいに画像を置いてはいけない
Facebookカバーは大事な要素は安全エリア内に配置するまた、画像はFacebookにアップロードした時点で容量が圧縮されかなり劣化します。特に図形や文字はにじみが目立つので、文字の量は少なめにしておきましょう。たくさん詰め込んでもスマホで読みずらくなりますしね。

細かい調整が面倒だと言う方は「模様が全面に入った柄」にするのも1つです。どこが切れても気になりませんから!

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

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

合わせて読みたい個人アカウントのFacebookカバーはどのサイズが最適?【2019年版】

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



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

Copyright© KAORI CREATIVE , 2019 All Rights Reserved.