Facebookカバー画像

ソーシャルメディア 活用力

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

投稿日:

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

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よりも縦が長い比率です。

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

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

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

で作ります。

828x466の サイズで作成

スコアメイカーの場合は文字は上部に配置。
タイトル文字がシンプルな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オンラインサロン)

 

-ソーシャルメディア 活用力

Copyright© KAORI CREATIVE , 2018 All Rights Reserved.