PCとスマホでのFacebookカバー写真表示の違い

スポンサーリンク
Facebookカバー写真画像のサイズ

Facebookのプロフィール画面の上にあるカバー写真。これはPCとスマートフォンでは見た目に違いがある。アスペクト比(縦横比)がまったく異なるのでそのサイズと簡単な制作方法を説明する。

スポンサーリンク

Facebookのカバー写真とは

もはや中高年の仲良しメディアと言われているFacebookだがまだまだ影響力はある。
投稿がFacebookのフィードに流れてきて記事を読む。どんな人が書いているのだろうとプロフィール画面を開く。そうすると一番目立つ位置に大きく配置されているのがカバー写真である。特にビジネスで利用している人はきちんと設定しておきたい。

スポンサーリンク

PCとスマートフォンでは見え方が違う

しかし困るのがPCとスマートフォンではアスペクト比が異なり見え方が大きく異なる。それぞれのアスペクト比はPCが820✕312スマートフォンが640✕360である。どちらかに合わせようとするともう片方では上下、左右どちらかがトリミングされて表示される。大事な部分が見えなくなることもあるので注意が必要だ。次に簡単に設定する方法を解説する。

スポンサーリンク

簡単な画像サイズの設定方法

PCとスマートフォンのカバー写真のアスペクト比
  1. まずはPC用のアスペクト比820✕312の画像を作る。これはピクセル単位ではなく単なる比率なので注意。ピクセルは820✕321pxの等倍~2倍(1640✕624px)あれば十分だろう。
  2. 終り。これだけ。

これをFacebookにアップすれば完了なのだが、ここで注意しなければいけないのはスマートフォンの表示では上図のように左右がトリミングされ、さらに円形のプロフィール写真が左下に大きく表示されることだ。大事な要素、伝えたい要素はこれらを考慮して見えるようにPC用の画像を作ることが必要になる。

PCとスマートフォンとの表示の違い

PCでのFacebookカバー写真表示
PCでのFacebookカバー写真表示
スマートフォンでのFacebookカバー写真表示
スマートフォンでのFacebookカバー写真表示

画像をアップロードして表示すると上のようになる。スマートフォンの場合左右がトリミングされ、プロフィール画像が大きく上から被るので大分印象が異なることがわかる。スマートフォンでの閲覧の方が圧倒的に多いのでスマートフォンを中心に画像の構図を考える。

LINEでもご質問・ご相談を受け付けています
LINEで気軽に質問!

デザインに関する、お問い合わせ、ご相談はLINEでも受け付けています。LINEでの内容は非公開、秘密厳守ですので安心してご使用いただけます。

下の「LINEで質問」ボタン、またはスマートフォンでQRコードを読み込むか、@bcn3204o を検索して米本デザインまでお願いします。

WEBに関するお問合せはこちらまで
WordPressのカスタマイズならbluetraff design
web
スポンサーリンク
フォローをお願いします!
タイトルとURLをコピーしました