松村(左)

Facebookページのカバー画像サイズは、公式ペルプの情報だけでは見切れます。今回は、パソコン版、iPhoneアプリ、iPadアプリ、シャアされた際のサムネイル画像、ホームページに埋め込んだプラグインに掲載されるFacebookページのカバー画像を見切れなく配置できるテンプレートを作成しました。

本記事は、2017年4月20日リリースした記事の修正版です。前記事では「Facebookページをシェアされた場合のサムネイル」化されるFacebookページのカバー画像がモバイルアプリ版に限って見切れてしまう不具合がございましたので、修正いたしました。

また、今回のFacebookページカバー画像サイズと配置寸法を計測するにあたり、各種キャプチャを使い実測いたしました。キャプチャに使用したモバイル端末はiPad mini、iPhone6+
です。Facebookページカバー画像サイズとアイコンやページタイトルとの「被り」端末ごとの表示範囲などを計測するにあたり各キャプチャ画像を、拡大縮小しながらテンプレートファイルを作成いたしました。そのため実際にFacebookページカバー画像を作成される場合は、2、3ピクセルの余裕を持たせることをお勧めいたします。

※Facebookページの「写真」に3枚表示される際、最上部にカバー画像が表示されるときに限って、タブレット限定エリアの約50%が見切れます。カバー画像を変更した後に写真を1枚でもアップすると、この見切れ表示は再現されなくなります。

Facebook公式ヘルプ「851px – 315px」では「見切れ」が生じます。

Facebookページのカバー画像サイズは、公式のヘルプを確認すると幅851px高さ315pxと掲載されています。
実際にFacebookの公式ヘルプ通りにFacebookページのカバー画像を作成すると、次の画像のように見切れます。

【図1】
Facebookカバー画像のサイズ851px 315pxで作ると

こちらは、幅851px高さ315pxのサイズで作成したFacebookページカバー画像ですが、下記のキャプチャ通り、パソコン版のFacebookページカバー画像ですら、見比べると分かる通り、両端が見切れてしまっています。

【図2】
 

図2のカバー画像だけを切り抜き採寸してみると幅820px高さ312pxでした。さらにモバイルアプリでもタブレット版アプリでも両端が見切れます(画像省略)。シェアされた場合は憶測ですが、画像の内容を読み込んで左右どちらかを切り捨てるか、中央から左右均等に切り捨てるかを判断し、登校時のサムネイル画像として使われるようです。

【図3】
Facebookページカバー画像851x315でシェアされると
この図3は、左切り捨てでサムネイル画像とされていますが、修正をかける前の私たちが運営する「ボナッポ」のFacebookページをシェアした際には、ほぼ、均等に両はしが切り落とされているように見て取れます。(図4、シェアされた際のサムネイル画像。図5、旧Facebookページカバー画像)

【図4】








【図5】
ボナッポ Facebookページカバー画像

旧カバー画像の縦横比も公式発表の851px – 315pxの比率ではなく、幅1242px高さ693pxですので、トリミングされる場合の条件が変わっている可能性もあります。

今回のFacebookページカバー画像サイズ「見切れなし!」の記事では、これ以上見切れたり文字が被ってしまうような事例画像を掲載することはいたしませんが、いつでもスッキリ、気持ちよくFacebookページを運営したり、閲覧いただくためにも見切れや文字被りがないFacebookページのカバー画像を下記の手順で作成してください。

カバー画像のキャンパスサイズは、幅1255px高さ700pxがベスト

今回Facebookページのカバー画像を作成いただくためにダンロードできるPSDデータのサイズは高さ1255px幅700pxになっています。旧ダウンロードサイズと「縦横比は同じ」ですが、詳しく採寸していくと1ピクセルだけ上端が切り落とされたり、下端だけが2pxだけ見切れたりするようなことが起こっているので、少し大きめのサイズで土台となるキャンパスを作成しました。

図6が、それぞれの表示エリアを色分けした画像です。

【図6】
Facebookカバー画像 表示エリア色分け図

目視できる配色は7色ですが、実は全部で8色あります。薄い緑がホームページにFacebookページを埋め込んだ際のプラグインに表示されるFacebookページカバー画像のエリアです。この薄い緑の中央よりやや下の方に表示されているピンク・エリアは、Facebookページがシェアされた場合のサムネイル画像として表示されるエリアです。

ほぼ同じ「高さ」で灰色の中央寄せエリアになっているのが、同じくシェアされた際にモバイル版のアプリで表示される領域になります。この薄い緑エリアの下に少しだけラインを引いたように見えている『濃い灰色』がパソコンでFacebookページにアクセスした場合に表示されるエリアです。

パソコンでFacebookページのカバーを設定する際には、表示領域を調整できます。今回は「上詰」で設定した場合に、下記すべての表示で見切れなし、文字被りなしで表示できるカバー画像を作成しております。

ここまで解説した「薄緑」「中央薄グレー」「下端だけ覗いている灰色」の3色はすべて上端揃えになっています。

続いて、「下端だけ覗いている灰色」の下部に見えている薄ピンクはタブレット版Facebookアプリで「管理者」がFacebookページにアクセスした際の表示領域です。パソコン版のカバーサイズと比較すると、上端が切り落とされ、下端がより広く表示されます。

【図7:パソコン版Facebookページカバー画像】
 

【図8:タブレット版FB-app管理者アクセス】
 

ただし、タブレット版通常FBアプリで管理者がFacebookページにアクセスした場合、上端が切り落とされるか下端が切り落とされるかは、気まぐれです。図8はカバー画像の下部がアプリ側で薄暗く加工されている『オレンジ白文字エリア』(薄ピンク)が表示されていますが、場合によっては(もしくは作業中のFBアップデート)、管理者用アプリ(ページ)、通常FBアプリ問わずタブレット共通の表示エリアでカバー画像が表示されます。

パソコン版の表示エリアと気まぐれな「薄ピンク」エリアを比較すると図9のようになります。

【図9】
 

上図の下端にある「白エリア」は、スマートフォンアプリで表示されるエリアとなるキャンパス範囲を表すものです。

管理者ではない人がFacebookページにタブレットアプリを使ってアクセスすると、次のようなカバー画像が表示されます。

【図10:タブレット版FBアプリ】
 

この表示エリアは先の色分けした図9では、パソコン表示エリア(濃い灰色)とタブレット版FB通常Facebookアプリ(以下「FB-app」)を使いページ管理者がFacebookページにアクセスした場合に表示される「気まぐれエリア(薄ピンク)」と重なって見えなくなっています。パソコン版よりも下端がより広く、FB-appとの表示面積はほぼ同じ(幅が1pxだけ広い)ですが、FB-appの表示エリアより31ピクセルだけ上部にずれて表示される「水色」エリアがあります。

この「水色エリア」は、タブレットの管理者専用アプリ「ページ」を使った場合でも同じカバー画像表示エリアになります。

【図11:管理者用Facebookページアプリ】
 

気まぐれエリアの薄ピンクとタブレットアプリ共通カバー画像表示エリアの水色を比較すると次のようになります。

【図12】
 

最後にスマートフォンアプリ別エリアになります。

スマートフォンにもタブレット同様に通常盤のFacebookアプリとFacebookページ管理者用アプリ「ページ」があります。スマホ版通常アプリのキャンパスサイズは幅1242px高さ698pxで、「ページ」アプリのカバー画像サイズは幅1247px高さ697pxで、それぞれ微妙に上下左右1px単位でいずれかの方向にずれていたりします。

冒頭で紹介した色分け図で確認すると最下部に見えている「もっとも薄いグレー(iPhoneアプリ)」と、その最下部両端にほんの少しだけ見える「紫色(iPhone「ページ」アプリ)」の部分になります。

【図6】
Facebookカバー画像 表示エリア色分け図

アイコンなどが重なる領域を避ける

各端末で表示されるFacebookページのカバー画像サイズを確認できたら、次は、アイコンやページタイトルなどでカバー画像が隠れてしまう領域をチェックします。この領域のことを「非可視領域」と呼びます。

全体像を色分けして示すと次の図のようになります。

【図13】
 

基本的に左側にアイコンやページタイトル、ページの「いいね!数」などが表示されます。ホームページにFacebookページのプラグインを埋め込んだ場合で、Facebookページに「いいね!」をしているユーザーが閲覧している場合は「いいね!済み」が表示され、まだ「いいね!」をしていないユーザーがホームページを閲覧している場合は「このページに『いいね!』」のボタンが表示されます。この2種類のボタンと「お問い合わせ」などのボタンが表示されます。

このプラグインで表示される非可視領域が「明るい緑色」のエリアになります。

タイトルやサービスジャンルを選ぶ際に注意が必要

本エントリーに掲載している非可視領域の色分け配置図は、私たちのFacebookページのように短いタイトル、短いサービスジャンル名、少ない「いいね!」を基準に作成していますが、長いタイトルやFacebookページの「いいね!」数が増えていくにつれて、この非可視領域は広くなっていきます。そのため、完璧に非可視領域を避け文字を配置したりするのは難しいのではないかと考えています。

特に「いいね!」の数は将来的にどんどん増えて行く上に白文字で表示されます。白文字で表示されるケースではその周辺がFacebook側で薄暗く加工されますので、白文字は見えやすくなりますが、カバー画像にデザインした文字などは読み取り辛くなります。

Facebookカバー画像作成手順

今回ご紹介するFacebookページを閲覧される8種類のシーンで、見切れることなく、文字が重なることなく訴求できるFacebookページカバー画像を作るためには、1px単位でズレが生じたり、Facebookの使用で切り取り範囲が選択されるなど、作業が煩雑になることを抑えるためには、やはり当サイトからダウンロードできるテンプレートデータを使って作成するのが一番簡単だと思います。

それでは、プレゼントさせていただいている、テンプレートを使った見切れ防止、文字被り回避のFacebookページカバー画像作成の手順をご紹介いたします。

土台キャンパスに背景を設定し、環境別「可視領域」からデザインを行う

ファイルをダウンロードすると、中身は「非可視領域」「表示エリア」フォルダが2種類あり、テンプレート背景レイヤーが最背面に設置してあります。

【図14】

 

土台となるカンバスサイズは幅1255px高さ700pxです。ダウンロードファイルをアドビのフォトショップで開いたら、レイヤータブ内にある「非可視領域」と「表示エリア」をグループ化します。次にカンバスサイズに合わせて背景画像を「Template背景」の前面に設定します。背景画像を設定したら、その「オリジナル背景レイヤー」単体でグループ化を行い、レイヤータブを下図のような構成にします。

【図15】

 

次に「非可視領域」を非表示にし「各閲覧環境限定の表示領域」をデザインしていきます。「表示エリア」フォルダ内には、前面(レイヤー上)から「シェアthumbnailモバイル」「シェア時Desktop」「プラグイン」「Desktop」「Tab:気まぐれ」「Tab:共通」「iPhone:app」「iPhone:page」の順に並んでいます。

【図16】

 

この中からまずは、上部4つの表示エリアを非表示にします。タブレットアプリとiPhoneアプリで閲覧された際のみ表示される領域に「帯状のパーツ」などを配置します。

【図17】
 

最上部の「水色」エリアは、タブレットで閲覧した際に「きまぐれ」で表示されず、Facebookページがシェアされた際にも非表示になるエリアです。ピンクしたの「グレー」エリアは、スマホアプリ以外では表示されないエリアになります。水色とピンク・エリアの配置を入れ替えるとカバー画像下部の「きまぐれ表示エリア」範囲を確認することができます。

【図18】
 

上図最下部のグレーとピンク・エリアは「きまぐれ」が、起こらない限りスマホ閲覧時にしか表示されないエリアですので、「ひとつの表示エリア」としてデザインしても良いでしょう(私は気まぐれに備えて分けています)。

次に「デスクトップ」エリア(パソコンで閲覧された際のカバー画像表示エリア)とプラグイン導入時の表示エリアを表示させ、2種類目の限定表示エリアのデザインを行います。

【図19】

 

【図20】
 

図20内グリーンのエリアがプラグインで表示されるFacebookカバー画像の表示エリアです。パソコンで閲覧された際の表示範囲を示す「濃い灰色」の範囲が少しわかりにくいですが、グリーンの「プラグイン表示エリア」の高さは481pxで、濃い灰色のパソコン閲覧時のカバー画像高さは485ピクセルですので、パソコン閲覧時のほうが下端4ピクセルだけ広く表示されます。

カバー画像下端に帯背景を設置して会社ロゴやキャッチコピーなどを掲載する場合には、上図ピンク・エリアと次図の下部グリーン・エリアの取り扱いがキモになってきます。

【図21】
 

【図22】

 

特に下部グリーン・エリアに関しては、上端はページがシェアされた場合のパソコン版タイムラインのサムネイルとなる場合に見切れる境界線となり、下端はシェアされた場合のモバイルタイムラインほかパソコン版Facebookページカバー画像の表示境界線にもなります。

グリーンの上部エリアも取り扱いが微妙です。この領域にはいくつもの表示範囲が重なり合っていますので、フォトショップファイルのグリーンと濃い灰色エリアを非表示にして解説します。

【図23】

 

【図24】
 

図24の上部にある水色と薄いピンクの領域は「タブレットアプリのきまぐれ」が起こらなければ、ひとつのエリアとしてデザインすることも可能なエリアです。私の場合は「外部サービスは気まぐれ」だと考えていますので、その気まぐれに影響を受けないように、配慮しています。デザイン的にもカバー画像上部の「帯装飾」に厚みがあると「頭」を重く感じさせてしまいますので、図24の水色部分に帯は移植を行い、コピーを掲載しました。

最後にページがセアされた際のモバイル版タイムラインに表示されるサムネイル画像としてのFacebookページカバー画像表示領域を確認しながら、アイコンなどと重なる非可視領域を避けながらコピーなどを配置していきます。

実際に微調整をしながらカバー画像を作成する場合の注意点

当サイトにてダウンロード可能なFacebookページカバー画像テンプレートは、実際にパソコンやタブレット、iPhoneでキャプチャを取りながら採寸し作成したテンプレートですので、1、2ピクセル単位でのズレが生じている恐れがあります。
そのため、各表示エリアやアイコン、タイトルなどの文字被り領域など周辺のデザインには余裕を持って作成されることをお勧めいたします。

私たちがテンプレートを制作した行程と同じ手順でカバー画像を制作する場合には、各キャプチャの幅を1255pxに引き伸ばしながらテンプレートで色分けされている各領域に合わせ微調整することもできます。しかし、この場合(特にiPhoneやiPad)Retinaなどの関係からだと考えていますが、倍率(縦横比)が微妙に異なるケースがありますのでご注意ください。

最終的な私たちのFacebookページカバー画像を掲載しておきます。Facebookの仕様変更などで多少実際の表示とは異なる場合もありますので、下記サンプルキャプチャと実際の表示内容をご確認しながら、ステキなカバーデザインを行ってみてください。

【追記】
当サイトからダウンロードできるテンプレートを使ってFacebookページのカバー画像を作成された方は、下記コメントフォームにFacebookページをシェアいただけると光栄です。

【シェアされた際の投稿サムネイルとして表示されるFacebookページカバー画像】
(iPhoneアプリバージョン)
 
下から218pxが見切れ、両端がカットされます(ダウンロードファイル内薄いグレーレイヤー)。

(タブレットアプリ)
 

シェア:タブレット版に関しては、今回の解説の中では触れていませんでした。ダウンロードいただけるファイル内には「黄色レイヤー」で『シェア:タブレット』を追加いたしました。幅1255px高さ582pxです。上端下端共に59px見切れます。

(パソコン)
 
ダウンロードファイル内レイヤー「ピンク」領域のみが表示されます。

Facebookページカバーサイズに関するご質問などは、下記のコメント欄から投稿ください。

当サイトからダウンロードしたカバー画像テンプレートファイルを使って作成したFacebookページも下記コメント欄でシェアいただけると光栄です。