Facebookページのカバー写真はスマホ基準で作成しよう

記事が気に入ったらシェアお願いします

  • このエントリーをはてなブックマークに追加

Facebookページを作ったのでカバー写真を作ったが、パソコンからFacebookページを見るとちゃんと表示されているのに、スマホから見るとFacebookページのカバー写真の一部が見切れていると相談されました。

スポンサーリンク

Facebookページのカバー写真。推奨されているサイズを調べてみた。

Facebookのカバー写真について推奨されているサイズを調べてみると

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

と書いてあります。

作成したカバー写真を確認すると、コンピューターのサイズである幅820pixel×高さ312pixelより大きなサイズで作成されていました。

Facebookページのカバー写真。パソコンで見てもスマホで見ても見切れないように作成するには

Facebookページのカバー写真をパソコンでもスマホでも同じように表示できるようにするには

先ほど確認した通り、Facebookページのカバー写真はコンピューターの推奨サイズより大きく作成されています。ということは別に理由があるのではないかと調べてみることにしました。

PCのサイズで画像いっぱいにクリエイティブを配置してしまうと、SPで表示した時に両サイドが切れて表示されます。逆に、SPに合わせると縦幅が切れて表示されることになります。
引用元 スマホ対応!Facebookページのカバー写真(画像)のサイズと注意点

確かに、Facebookページのカバー写真として作成された画像は、サイズいっぱいに見せたい情報が入っていました。なるほど、そういうことかと以下の設定でFacebookページのカバー写真として作成された画像を作り替えてみました。

スマホ対応!Facebookページのカバー写真(画像)のサイズと注意点のページを参考に、幅828pixel×高さ466pixelで作成し、見せたい部分を縦位置中央に315pixelの高さで配置すると、パソコンで見てもスマホで見てもカバー写真の見てもらいたい部分が見切れることなく表示されました!

株式会社コムニコさん、ありがとうございます!

Facebookページのカバー写真を「作る」ならカバー写真いっぱいに見せたいものを配置しないように

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

【2016年11月改定】 Facebookカバー写真をスマホとパソコンに最適なサイズにする方法とは?というページにも書かれていましたが、どの端末でも同じように見せようとするなら、上下左右に要素を配置しない領域(見切れてもいい)を作っておく必要があったんですね。

このような現象は、ブログのヘッダーでも起こりうる可能性があるかもしれません。カバー写真やヘッダー画像がきちんと収まらないときは、見せたい要素が指定されている範囲に収まるように制作し、ギリギリまで要素を配置しないようにしておいたほうが良さそうです。

最後までお読みいただきありがとうございます。

使用ソフトや仕事についてはだぶるしーどのお仕事、セミナー講師・インストラクター実績についてはセミナー講師実績に掲載しております。ブログ・SNS運用でお困りの方、ウェブサイト制作についてのご相談などのお問い合わせはメールフォームからお願いいたします。

リンクユニット

記事が気に入ったらシェアお願いします

  • このエントリーをはてなブックマークに追加

フォローはこちら

Facebookページのカバー写真はスマホ基準で作成しよう
この記事をお届けした
だぶるしーどの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク