Facebook用カバー写真を作っているとどうしても目につくのがスマートフォンでの見え方です。

miekata

パソコンではちゃんと見えているのにスマホでは画像が切れてしまう。これで悩んでいる方も多いのではないでしょうか。

Googleで検索しても情報が古く、カチっとレイアウトを決めることができなかったので情報をシェアいたしました。

ベースサイズは828×416px、内部領域サイズは746×316pxでの制作が一番しっくりきた

ベースサイズは828×416pxで制作します。その中に746×316pxの枠を中心に置きます。その枠のサイズ内にテキストや画像などを配置するとスマホでもパソコンでも最適化されて表示されるようになります。

size-1

Facebookカバー写真をスマホ・パソコン用に最適化した際の見え方

after-1024x576-1-798x449

パソコンで見た場合は上下が削られ、スマホで見たときは左右が削られるようになるため、ルールがわかっていればFacebook用カバー写真を制作しても悩む必要はありません。

Facebookカバー画像最適化ルールに従い、バナーを制作

内部領域を意識しながら枠に合わせて画像や文字をレイアウトしてゆきます。

size

参考バナー

ささっと作ったバナーなのでクオリティは無視してください^^;

kansei

実際にFacebookのカバー写真にするとこのようになります。

kansei

レイアウトが綺麗に収まっていいですね^^