複数の写真を組み合わせたり文字を入れたりした画像をFacebookページのカバー写真にしたという相談者から、Facebookページのカバー写真がパソコンから見るとちゃんと見えているのにスマホから見るとうまく表示されないと相談されました。
Facebookページのカバー写真をスマホから確認すると右端が切れている原因は
問題のカバー写真を設定したFacebookページを見せていただきました。確かにスマホから見るとカバー写真の右側が見切れているように見えました。
PCから見るとカバー写真はしっかり表示されています。
Facebookページカバー写真のガイドラインを調べてみた
Facebookの公式ヘルプでFacebookページのカバー写真についてガイドラインがないかを確認してみると
コンピューターでは幅820ピクセルx高さ312ピクセル、スマートフォンでは幅640ピクセルx高さ360ピクセルの大きさでページに表示されます。
引用元 Facebookページのプロフィール写真やカバー写真のサイズはどのくらいですか。
と書かれていました。
PC用とスマホ用で推奨されているサイズが異なっていますね。
相談者が作成したFacebookのカバー写真は、どちらのサイズよりも大きく設定されていました。
気になったのは、サイズよりもFacebookのカバー写真に組み込んだ（見せたい）要素がサイズいっぱいに展開されていたこと。
サイズいっぱいに見せたい要素を配置すると見切れてしまう
組み込んだ要素がPCから見てもスマホから見ても「見切れない」位置に配置できれば問題ないのでは…と調べてみると以下のサイトが見つかりました。
Facebookのカバー写真に設定したい画像を作成するには、横幅はPC用、縦幅はスマホ用で指定しているピクセル数で作成し、見せたい要素を見切れない位置に配置すればいいと分かりました。
上記サイトを参考に、幅828ピクセル・高さ466ピクセルでPhotoshopで新規ファイルを作成し、表示させたい要素を幅828ピクセル・高さ315ピクセル内で作り、縦位置中央に配置した画像を作成しました。
Facebookのカバー写真に設定する際、上下の位置は調整可能ですので、見せたい要素が切れないように配置することで解決しました。
Facebookページのカバー写真とプロフィール写真用のPhotoshop用テンプレートを使うのもおすすめ。
PhotoshopでFacebookカバー写真を作成するなら、AdobeのサイトにFacebookカバー写真とプロフィール写真を作成するためのテンプレート（Photoshop用）が紹介されていたので、こちらからテンプレートをダウンロードすると作りやすいかも。
「Canva」でFacebookページのカバー写真を作る手もある
Photoshopがインストールされていないパソコンなら、Canvaというサイトがお勧めです。
Photoshopなどの画像加工ソフトに比べればできることは少ないかもしれませんが、レイアウト（作りたい画像のサイズがテンプレート化されている）を選んで写真や文字を入れ替えるだけでサイズ調整なども必要ないのがおすすめしたいところ。
おまけにWebサービスなのに日本語フォントが豊富です。手に入れづらいフォントもあるので、個人的にはそこが一番お気に入りのところです。
Facebookのカバー写真を作るなら、見せたい要素が見切れないように作成する必要がある
撮影した写真をそのままカバー写真に設定するだけならこのようなことは起こりませんが、いくつかの写真を組み合わせたり、文字を入れたりしてFacebookページのカバー写真を作成するなら、カバー写真いっぱいに見せたいものを載せないようにしましょう。
このような現象は、ブログのヘッダー画像を作るときにも起こりうる可能性があるかもしれません。
カバー写真やヘッダー画像がきちんと収まらないときは、指定されているサイズよりも一回り大きく設定しておいて、その中の中央に見切れては困るものを配置する感覚で作成するのがいいように思います。
