Facebookのプロフィール画面の上にあるカバー写真。これはPC、タブレット、スマートフォンでは見た目に違いがある。PCとスマートフォンではアスペクト比（縦横比）が異なるため見た目も大きく異なるのだ。ユーザー側では制御できないカバー写真のサイズを1枚で済ませる方法を解説する。
Facebookのカバー写真とは
もはや中高年の仲良しメディアや「オワコン」と言われているFacebookだが、まだまだ影響力はある。
投稿がFacebookのフィードに流れてきて記事を読む。どんな人が書いているのだろうと、プロフィール画面を開く。そうすると一番目立つ位置に大きく配置されているのがカバー写真である。特にビジネスで利用している人は、この画像をきちんと設定しておきたい。
これがホントのカバー写真アスペクト比
しかし困るのが、PC、タブレット、スマートフォンではアスペクト比が異なり、見え方が大きく異なる点だ。それぞれのアスペクト比は、PCが820✕312、タブレットが820✕360で、スマートフォンが640✕360と言われている。どれかに合わせようとすると、もう片方では上下、左右どちらかがトリミングされて表示される。大事な部分が見えなくなることもあるので注意が必要だ。
だが、この通りのアスペクト比で設定すると、上の画像のようになるのだが、実際はトリミングされる位置がかなり異なる。
また某有名アプリのWebサイトには推奨サイズが851✕315px、アスペクト比が16：9とあるが、どこから出てきた数字なのだろうか。これもまた違う。そしてこの件に対して書いた、どのWebサイトにもタブレットに関しての記述がない。
2024年に本記事を初めて書いた時にはPCが820✕312、スマートフォンが640✕360で終わっていたのだが、この記事を読んだ方からタブレット端末についても教えてほしいとのリクエストをいただいた。その際、一緒に改めて記事を検証してみたところ、上述のアスペクト比と実際のアスペクト比が異なるため、今回、それぞれのデバイスで実際に表示した画面のスクリーンショットを撮り、画像をレイヤーで重ねてみた。このように画像を重ねることで、オリジナルの画像からどの部分がどれくらいトリミングされ、プロフィール写真がどの場所に配置されるかがわかる。よって、今回のこのリライト記事は、数字だけを見て書いた机上の話ではなく、実際に検証した“決定版”である。
このサイズ1枚アップすればいい──簡単な設定方法
- まずはオリジナルの画像としてアスペクト比820✕312の画像を作る。これはピクセル単位ではなく単なる比率なので注意。ピクセルは820✕321pxの等倍～2倍（1640✕624px）あれば十分だろう。
- このオリジナル画像をカバー写真としてアップロードする。PCブラウザー、タブレットのブラウザー、タブレットのアプリそしてスマートフォンのアプリ、各デバイスの表示領域の差異をすべて表すと下図のようになる。今回タブレットはAndroidを、スマートフォンはiPhone15Proを使用している。
- カバー画像内に閲覧者に読ませたいテキスト、見せたい要素がある場合は、下図のすべての領域にかぶらない位置、例えば中央寄りの上部1/3に収めれば、どのデバイスでも表示される。
少し複雑なので、オリジナルと各デバイスでの表示領域の違いを以下順に解説する。今回はデバイスごとのアスペクト比は意味がないため示さない。表示領域ギリギリに重要な文字や画像などが被らないようにして、数ピクセルの差異は許容範囲として運用したほうが楽だろう。
PCブラウザーでの表示
オリジナル画像と比較すると、横幅は同じだが、下部が少しトリミングされる。FacebookにはPC版アプリもあるが、Edgeブラウザーを使ったPWA（Progressive Web Aplication：Webサイトをネイティブ・アプリケーションのように利用）であるため、ブラウザー版の表示と同一である。
タブレットでの表示
タブレット端末の場合は少し複雑である。アプリ版とブラウザー版では表示が異なる。
タブレット・アプリ版
上図はPCブラウザーに表示した上にタブレットアプリ版（Facebook Lite）の領域を重ねている。
アップロードしたオリジナル画像と比べると、左右がトリミングされ、縦は同じ。プロフィール画像の円が左に大きく配置されるので注意。
実際の表示は下図のようになる。
タブレット・ブラウザー版
アスペクト比は縦横共にオリジナル版と同じ。ただし、センターにプロフィール画像が配置される。プロフィール画像のサイズと位置が同じタブレットでもアプリ版とは大きく異なることに注意。
実際の表示は下図のようになる。
スマートフォン・アプリ版
スマートフォンの場合、オリジナル画像と比べると、左右が大きくトリミングされ、縦は同じ。プロフィール画像が左に大きく上から被るので、大分印象が異なることがわかる。通常スマートフォンでの閲覧が圧倒的に多いのでスマートフォンを中心に画像の構図を考える。
実際の表示は下図のようになる。
まとめ──アスペクト比 820✕321 の画像をアップすればOK
アスペクト比 820✕321の画像をアップロードして、閲覧者に見せたい文字や画像などの要素がある場合には、左右が大きくトリミングされることを考慮し、なるべく中央よりやや右寄りにする。ただし上下はそれほど神経質になる必要はないが、プロフィール画像によってカバー画像が隠れてしまうことに注意する。
