Facebookページの適性カバー画像サイズ【PC・モバイル両方】

Facebookページや
Facebookグループのカバー画像は、
パソコンとモバイルでは
サイズの比率が違います。
（※個人アカウントのカバー画像サイズではありません）

また、DMMラウンジでサロン開設して
コミュニティ運営をFacebookでする場合、

DMMのカバー画像をそのまま
Facebookグループページへ使うと、
スマホで文字が切れたり
文字の位置がヘンになります。

この記事では検証を例に、
Facebookグループの画像が
キチンと入る適性サイズをお伝えします。

Facebookグループ／Facebookページのカバー画像サイズ

Facebookグループ／Facebookページのカバー画像のサイズは
公式のヘルプセンターではこのように記載されています。

パソコン： 横820ピクセル x  縦 312ピクセル
スマホ：横640ピクセル  x 縦360ピクセル

ページのカバー写真:

• コンピュータでは幅820ピクセルx高さ312ピクセル、スマートフォンでは幅640ピクセルx高さ360ピクセルの大きさでページに表示されます。

Facebook ヘルプセンター
https://www.facebook.com/help/125379114252045

数字だけ見るとフーンと思いますが、この数字、
縦横比がパソコンとスマホとでは違います。

つまり、パソコンサイズで画像を
用意して設定すると、
スマホでみるとちょっと
配置や表示がヘンになる
可能性があるわけです。

特に文字を多く
入れている画像の場合は

PC、モバイルと適切な
配置にするために、
サイズは抑えておきたいですね。

問題はスマホ表示とPC表示では適切なサイズが違うこと

パソコン用に作ったサイズでは
スマホになったときに
縦が足りなくなります。

なので思うような配置になりにくいのです。

公式のサイズでFacebookグループ用のカバー画像を作るとモバイルでヘンになる

2種類のパターンでシュミレーションしてゆきます。
1つは私が作成したグループページ、

もう１つは、カバー画像作成をお手伝いさせていただいた
ゴルフ脳を育てるオンラインサロン
「スコアメイカー」の管理人さまにご協力をいただきました。

これは公式のPC用サイズ
『幅820ピクセルx高さ312ピクセル』で作成。
文字や画像は、サイズの中にうまくおさめるよう配置。

パソコンで見るとやや肥大した感じになる

これをFacebookグループページにはめてみますと、
パソコン版で見ればこのような感じ。

上のスコアメイカーのものはまあまあです。
文字が少ないMailChimpのほうはちょっとでかく入ってしまいます。

モバイルで見ると、やっぱりヘンである

モバイル（ iPhone5）で見るとこんな感じです。
スコアメイカーは、タイトルがそもそも切れてしまい、
白い文字のグループ名（モザイクで消してます）と被ってしまいます。

MailChimpも文字がギリギリです。

ちなみにiPhone6のシュミレーターでは
キレイに入っていました。

iPhone6以降だけを考えるのであれば、
公式のサイズ横820ピクセル x  縦 312でよいかもしれません。

Facebookグループページのカバー画像をPCでもモバイルでもきちんと見えるサイズ

公式のモバイル用サイズは
PCよりも縦が長い比率です。

ですので
モバイルの 640x360を
比率を保ったまま、
パソコンの横幅のサイズに拡大し

横幅 828 ピクセル  x  縦長 466 ピクセル

で作ります。

828x466の サイズで作成

スコアメイカーの場合は文字は上部に配置。
タイトル文字がシンプルなmailChimpは文字は中央に配置。

下部は両方とも空けています。

パソコン版／モバイル版、ともにいい感じに

スコアメイカーはいい感じかと思います。

iPhone5。やや文字がタイトルテキストに被ってますが、
元の画像で文字をこれ以上、上にするとおかしくなるので
許容範囲とします。

iPhone6 シュミレーターではバッチリです。

MailChimpは文字が大きく入りますが、OKですね。

iPhone5。まあ、いいです。

iPhone6 シュミレーター。いい感じですね。

まとめ

Facebookグループや
Facebookページのカバー画像サイズは
幅828ピクセルx高さ466ピクセルで作成が適性と思います。

左下にグループページの名前が入りますので、
画面下から148ピクセルよりも下に
文字など大切な要素は配置しないこと。

横幅402ピクセルの
『タイトルで隠れるエリア』は、
グループ名が6文字程度の場合です。

画像文字は量によって
配置を上部に置くか、
中央でよいか変わってきますので、
この辺は何回かテストしてみるといいでしょう。