投稿先:

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

Facebookカバー画像
LINEで送る
[`evernote` not found]
Pocket

この記事は、このような方向けに書いています

FacebookページやFacebookグループのカバー画像のサイズが知りたい方
Facebookグループのカバー画像が上手い具合にいかない方
DMMラウンジでサロンを開設しFacebooグループを使う方

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

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

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

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

この記事の情報鮮度: 2017年2月

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グループページのカバー画像はPCとモバイルでは比率が違う
パソコン用に作ったサイズでは
スマホになったときに
縦が足りなくなります。

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

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

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

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

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

fbcover-pconly

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

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

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


 

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

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

fbcover-socre-on-mob-for-pc
MailChimpも文字がギリギリです。


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

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

iphone6-fb-mailchimp

 

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

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

ですので
モバイルの 640×360を
比率を保ったまま

パソコンの横幅のサイズに拡大し

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

で作ります。

[関連記事]  Facebookとブログってどっちにどう力を入れたらいいの?

828×466の サイズで作成

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

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

Score-Maker-FB-optimized

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

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

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

score-iphone5

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

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

fb-cover-PC

iPhone5。まあ、いいです。

mailchimp-mob-wp

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

mailchimp-iphone6

まとめ

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

 

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

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

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

 

トーナメントプロ直伝!
シングルプレイヤーを目指す
ゴルフ脳育成サロン「スコアメイカー」はこちら
(DMMオンラインサロン)

 

LINEで送る
[`evernote` not found]
Pocket


この記事を書いた人

竹花 香
ファン創造WEBプロデューサー。大中規模企業のWEBサイト ディレクション、デザインで伝えたいことを具体な形にする役割を担う。
メッセージ、面白いアイディアなど「まだ形になっていない見えないもの」の、見える・伝わる表現を探し出すことに熱が入る。そこが自分の使命であり、プロとしてのスキルでもある。基本はウェブ周り。
【好きなもの】ネコ、犬、絵、クロッキー、五平餅、牛皮、メロン、ラ・コルベリーヌのクルミ入酵母パン「ノア」、 エンタメ、青森ねぶた、映画。