この記事は、このような方向けに書いています
FacebookページやFacebookグループのカバー画像のサイズが知りたい方
Facebookグループのカバー画像が上手い具合にいかない方
DMMラウンジでサロンを開設しFacebooグループを使う方
Facebookページや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文字程度の場合です。
画像文字は量によって配置を上部に置くか、中央でよいか変わってきますので、この辺は何回かテストしてみるといいでしょう。