Facebookのカバー画像サイズ(iPhone対応)

678
Facebook カバー画像サイズ

2015年版Facebookページのカバーサイズ図解記事を追加しました。こちらの記事はFacebook個人アカウント用カバーサイズ図解コラムです。Facebookのカバー画像サイズには,個人アカウント用のカバーサイズとFacebookページ用で異なります。Facebookページのカバーサイズ図をお探しの方は、下記記事リンクをクリックしてご確認ください。

Facebook個人アカウント専用カバーサイズ

昨日、新年ということで今年のテーマを発表したり、トップページのスライドを追加したり、Facebookのカバー画像やアイコンなどを変更しましたが、レスポンシブWebデザインのホームページ作成サービスを提供しているにもかかわらず、iPhoneで見た際に文字が見切れていたり、iPadminiでFacebookアプリを使った場合にカバー画像のバランスがおかしかったりと不細工なところが多かったので、FacebookのカバーサイズiPhoneアプリ対応版を作成しました。

まずは、全体像を今回作成した私のカバー画像でご紹介します。

「図1」Facebookカバー画像の全体像
「図1」Facebookカバー画像の全体像

Facebookカバー画像のサイズというキーワードや、フェイスブックカバーサイズといったキーワードで検索すると、その多くは幅851px高さ315pxのカバーサイズが紹介されていますが、このサイズで作成してしまうと、iPhoneで個人プロフィールページを閲覧した際のカバー画像が見切れてしまっています。

previewフェイスブックカバー画像の見切れ
previewフェイスブックカバー画像の見切れ
従来(私も採用していた)カバー画像のサイズ幅851px高さ315pxで作成すると赤矢印で示した通り、Facebookアプリで表示させた際に見切れてしまいます。

上図のカバー写真を選択するサムネイル画面を見てもご確認頂ける通り、従来のカバー画像サイズで作成したものだとピンク枠で表した通り選択枠に余白ができてしまいます。

アルバムで確認しても、もちろんですがサムネイルに大きな違いが生じています。

このカバー画像の適切なデバイスごとの表示エリアサイズを把握しておくと、記事末にご紹介しているようなiPadアプリで見ると確認できるエリアやiPhoneアプリじゃなければ確認できないエリアだけに表示させる画像や文字をデザインすることができます。

thumbnail

では、細かくスマートフォン(iPhone5と4sにて実機確認済み:Androidでは確認していません)でも適切に表示できるFacebookのカバー画像サイズをご紹介していきます。

Facebookのカバー画像は851×638で作成

冒頭に掲載したカバー画像の全体図で示した通り、カバー画像は851×638のサイズを土台としパソコンで表示させた場合のアイコンが被ってしまうエリアや「友達になる」「フォローする」のボタンでデザインが見切れてしまわないようにするためには、次のカバー画像作成寸法を参考に作成してみてください。

パソコンで表示されるカバー画像エリア
パソコンで表示されるカバー画像エリア
  1. 赤文字183pxはカバー画像左端からプロフィールアイコン右端までの距離
  2. 青文字175pxはカバー画像上端からプロフィールアイコン上端までの距離
  3. 白文字276pxは「メッセージ」ボタンまで
  4. 白抜き文字236pxは「友達になる」「フォローする」のボタンまで
  5. オレンジ文字235pxはカバー画像右端から「友達になる」ボタン左端まで
  6. 緑帯文字775pxは、iPhoneアプリカバー画像の表示幅サイズ

プロフィールアイコン左余白サイズや「フォローする」ボタン右側の余白サイズは省略致しました。

主要画像は775pxでセンタリング

 

まとめると、Facebookカバー画像は851×638で土台を作成し、幅775pxでセンタリングすることで、レスポンシブWebデザイン的なカバーイメージを作成できます。

iPadアプリを使用している友達に見せたいデザインは高さ407pxからPCカバーサイズ高さの315pxの上下46pxの範囲にデザインします。

更にiPhoneアプリを使っている友達にだけ見せたいデザインは土台となっている638pxまでの上下115px(土台サイズ638pxーiPadアプリサイズ407px)の範囲にデザインしてください。

今回作成した個人プロフィールページに掲載されるカバー画像をここまでこだわる方は少ないと思いますが、Facebookページのカバー画像では制約が多いですし、個人プロフィールカバー画像のように各ディバイスで画像サイズは変化しません。

ただ、Facebookをビジネスシーンでのブランディングに使っている方も少なくないでしょうし、単純にビジネス仕様だけじゃなくても個性的なプロフィールページとするためにもパソコンで表示されるカバー画像とiPhoneアプリで表示されるカバー画像のサイズが違うのですから、折角ならiPhoneだけで見れるデザインを行なってみても面白いのではないでしょうか。





最終的には以下のようなカバー画像となりました。(下記画像をクリックするとFacebookのプロフィールページに移動しますので、iPhoneやiPadアプリでも確認してみてください。)

Facebookカバーのサイズ

各ディバイスでのカバー画像の違い

iPadアプリだと上記の画像に加え下記が表示されます。(851×407エリア)

  • 【2014】の上にバレーボール
  • プロフィールアイコン上に、カメラの写真

iPhoneアプリだと上記iPadアプリエリアに加え下記が表示されます。

  • 画像上部に公式サイトロゴ帯
  • プロフィールアイコン上にサーフボード画像
  • 画像右下に公式ロゴマークとレスポンシブWebデザインイメージ