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

Facebookページのカバー写真を作ったけれど、カバー写真の一部が表示されないという事例に遭遇しました。PCから見るとちゃんと表示されているのに、スマホから見ると確かにカバー写真の両端が見切れているのです。

スポンサーリンク

Facebookページのカバー写真の推奨サイズは

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

コンピューターでは幅820ピクセルx高さ312ピクセル、スマートフォンでは幅640ピクセルx高さ360ピクセルの大きさでページに表示されます。

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

引用元 Facebookページのプロフィール写真やカバー写真のサイズはどのくらいですか。

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

これは何かほかの原因があるような気がして検索してみました。見つけたホームページの記事を読んで気が付きました。

PCのサイズで画像いっぱいにクリエイティブを配置してしまうと、SPで表示した時に両サイドが切れて表示されます。逆に、SPに合わせると縦幅が切れて表示されることになります。

引用元 スマホ対応!Facebookページのカバー写真(画像)のサイズと注意点

もう一度画像を見てみると、引用記事にも書いてあるとおり、写真サイズいっぱいに表示したいもの(クリエイティブ)がある状態でした。それをパソコンの表示サイズに合わせて作っていたために、見切れてしまったということか。

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

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

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

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

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

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

リンクユニット
ご案内
最後までお読みいただきありがとうございました。 お困りのことなどございましたらメールフォームからお問い合わせください。 仕事内容や使用ソフトなどについてはだぶるしーどのお仕事にてご紹介しております。

シェアする

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

フォローする

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