Facebookページのカバー写真のサイズは?スマホから見ると要素が見切れてしまうことがある。

Facebook

複数の写真を組み合わせたり文字を入れたりした画像をFacebookページのカバー写真にしたという相談者から、Facebookページのカバー写真がパソコンから見るとちゃんと見えているのにスマホから見るとうまく表示されないと相談されました。

スポンサーリンク

Facebookページのカバー写真をスマホから確認すると右端が切れている原因は

問題のカバー写真を設定したFacebookページを見せていただきました。確かにスマホから見るとカバー写真の右側が見切れているように見えました。

PCから見るとカバー写真はしっかり表示されています。

Facebookページカバー写真のガイドラインを調べてみた

Facebookの公式ヘルプでFacebookページのカバー写真についてガイドラインがないかを確認してみると

コンピューターでは幅820ピクセルx高さ312ピクセル、スマートフォンでは幅640ピクセルx高さ360ピクセルの大きさでページに表示されます。
引用元 Facebookページのプロフィール写真やカバー写真のサイズはどのくらいですか。

と書かれていました。

PC用とスマホ用で推奨されているサイズが異なっていますね。

相談者が作成したFacebookのカバー写真は、どちらのサイズよりも大きく設定されていました。

気になったのは、サイズよりもFacebookのカバー写真に組み込んだ(見せたい)要素がサイズいっぱいに展開されていたこと。

サイズいっぱいに見せたい要素を配置すると見切れてしまう

組み込んだ要素がPCから見てもスマホから見ても「見切れない」位置に配置できれば問題ないのでは…と調べてみると以下のサイトが見つかりました。

https://blog.comnico.jp/we-love-social/facebook-page-cover-photo

Facebookのカバー写真に設定したい画像を作成するには、横幅はPC用、縦幅はスマホ用で指定しているピクセル数で作成し、見せたい要素を見切れない位置に配置すればいいと分かりました。

上記サイトを参考に、幅828ピクセル・高さ466ピクセルでPhotoshopで新規ファイルを作成し、表示させたい要素を幅828ピクセル・高さ315ピクセル内で作り、縦位置中央に配置した画像を作成しました。

Facebookのカバー写真に設定する際、上下の位置は調整可能ですので、見せたい要素が切れないように配置することで解決しました。

Facebookページのカバー写真とプロフィール写真用のPhotoshop用テンプレートを使うのもおすすめ。

PhotoshopでFacebookカバー写真を作成するなら、AdobeのサイトにFacebookカバー写真とプロフィール写真を作成するためのテンプレート(Photoshop用)が紹介されていたので、こちらからテンプレートをダウンロードすると作りやすいかも。

「Canva」でFacebookページのカバー写真を作る手もある

Photoshopがインストールされていないパソコンなら、Canvaというサイトがお勧めです。

Canva

Photoshopなどの画像加工ソフトに比べればできることは少ないかもしれませんが、レイアウト(作りたい画像のサイズがテンプレート化されている)を選んで写真や文字を入れ替えるだけでサイズ調整なども必要ないのがおすすめしたいところ。

おまけにWebサービスなのに日本語フォントが豊富です。手に入れづらいフォントもあるので、個人的にはそこが一番お気に入りのところです。

Facebookページのカバー写真を「Canva」で作成してみた
Facebookページを開設するとき、依頼主から「これ使って」と写真を送ってこられることがあります。それが1枚ならいいのですが、複数枚写真が送られてきて「組み合わせて1枚にして使って」と言われることもあります。こちらの記事(Facebook

Facebookのカバー写真を作るなら、見せたい要素が見切れないように作成する必要がある

撮影した写真をそのままカバー写真に設定するだけならこのようなことは起こりませんが、いくつかの写真を組み合わせたり、文字を入れたりしてFacebookページのカバー写真を作成するなら、カバー写真いっぱいに見せたいものを載せないようにしましょう。

このような現象は、ブログのヘッダー画像を作るときにも起こりうる可能性があるかもしれません。

カバー写真やヘッダー画像がきちんと収まらないときは、指定されているサイズよりも一回り大きく設定しておいて、その中の中央に見切れては困るものを配置する感覚で作成するのがいいように思います。

Facebookのカバー写真。ガイドラインを守ってアピールできる画像を使おう。
FacebookのタイムラインやFacebookページ、グループにはカバー写真を設定できるようになっていますが、Facebookのカバー写真には「カバー写真のガイドライン」があるのをご存知でしょうか。 Facebookのカバー写真にはガイ...
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。

ホームページ開設・運用、リニューアルのご相談や、SNS・ブログの運用サポート、市民活動団体のIT活用提案・サポート、Webライティングを行っています。
また、県内各所にてパソコン操作講習会やSNS活用セミナーなどの講師もしています。

wseedkをフォローする
Facebook
スポンサーリンク
wseedkをフォローする
だぶるしーど