Facebookページカバーサイズ(iPhone対応)

82
Facebookページカバーサイズ(iPhone対応)

Facebookページのカバーサイズのご紹介です。

Facebookページカバーサイズに関しては、最新版(2017年版)特設サイトにて公開しています。少し複雑になっているため、個人プロフィールページカバーサイズとともに調整中です。
下記のページではカバー画像作成に必要なPSDファイルをダウンロードできます。

Facebookページのカバーサイズは2015年に若干変更されています

Facebookページカバーサイズ(iPhone対応)2015

当サイトの人気記事としてもご覧頂いているFacebookのカバー画像サイズ(iPhone対応)でご紹介させていただいているのは、個人アカウントのカバーサイズですが、今回はFacebookページのカバーサイズをご紹介致します。

個人アカウント用のFacebookカバーサイズは、iPhoneやタブレット、パソコンと言った異なる端末で縦横共に表示領域が異なりますが、Facebookページのカバーサイズに関しては、横幅のみ可変となります。

個人用カバーサイズと違い縦幅に違いがないことと、横幅の差が左右それぞれ52.5pxしかありませんので、私の場合は、スマホ&タブレット(Facebook公式アプリ仕様時)とパソコンで見えるデザインとの2種類に分けて作成しました。

Facebookページのカバーサイズ 見え方の違い

昨年まで、当Facebookページのアイコンは、私の顔写真時でしたが2015年からロゴマークに変更しました。

これは、ソーシャルメディア活用を学ぶうちに、Facebookに限らずSNSの利用での公私混同を避けるために行ないました。

アイコンに顔写真がなくなると、運営者の顔が見えなくなるので、カバー写真で顔出しさせていただきました。

しかし、iPhoneなどで使用されるFacebookアプリでは、情報を求められている方のほうが断然多いと考えましたので、顔出しを控える意味も含めて、FacebookページをiPhoneやタブレットで閲覧くださる場合のカバー画像からは見えない領域にプロフ写真を移動させました。

私のような業種でも最近ではモバイルからのアクセスが、全体のアクセスの35%近くを占めるようになってきました。この内約8割がFacebookをはじめとするSNSからのアクセスなのです。

ここ数ヶ月間で行なっているリスティング広告とFacebook広告の比較調査でも私の場合は、Facebook広告の方が費用対効果の高い成果を上げています。

そうはいっても、Facebookは「ソーシャルな場」そこにむやみに広告をガンガン出すのも今後成果が落ち込むことは予測されますので、ひとつひとつ、仕事とプライベートをFacebookの中でも棲み分けを行なっていき、顧客とのコミュニケーションがはかれるよう工夫し勉強していきたいと考えています。

Facebookページをデザインする時に考えていたことは、また別のコラムでご紹介したいと思います。

レスポンシブWEBデザインのサイトに設置したFacebookウィジェットの注意点

Facebookウィジェットをホームページに設置した場合、下記のような「見切れ」問題が発生しましたので追記致します。

Facebookカバー 見切れ

上図は本サイトのトップページなどに設置しているFacebookウィジェットのキャプチャです。

左右に怪しい人影が…(笑)

ということで、修正すると下図のようなFacebookカバーサイズの振り分けが必要なようです。

Facebookページカバーサイズ【修正版】

ウィジェット(max width(横幅)300px設定)で設置していたのですが、レスポンシブWebデザインを採用しているため、画面幅によって、見切れが生じることがわかりました。(Facebookウィジェットの設定やスマホ対応のしようなどによってこの限りではない場合がありますので、ご注意ください。)

私が確認したところ、幅1366pxより大きいモニターサイズでは冒頭のFacebookページカバーサイズでも「見切れ問題」は発生しないようなのですが、それ以下のモニターサイズでは問題が発生することが確認されました。

そこで、左右63px(正確には62.5)の範囲に限り画像(左右の壁紙をめくる男)を掲載すれば、パソコンモニターでは正常に表示されます。

更に左右63px以降からスマホ表示領域の557px枠までの85px(正確には64.5px)間(上図、黄緑+オレンジの領域)に画像を配置しない方が良いようです。

よって、最終的に私のFacebookページカバー画像のデザインには恥ずかしながら、いずれの端末でアクセス頂いても、私の顔出しカバーになりました。←さすがに変更いたしました(笑)。

どうぞ、お見知り置きを

Facebookをビジネスにも生かしたい方には、こちらの書籍がオススメです。