前回の記事で、正しいサイズは「幅851ピクセルx高さ315ピクセル」とお伝えしました。
大事なものは中央にをおいて、このサイズで作ってアップすれば、アプリでもブラウザでも、大きなズレなく表示できます。
ところで、実際、カットされてしまうのは、どのくらいのサイズなのでしょうか？
天地のずれない、幅851ピクセルx高さ315ピクセルで作成した背景画像はこちらです。この画像と見比べながら読み進めてください。
iPhoneアプリで表示されるのは、560px × 315px
オレンジで表示してある部分の外側がカットされます。iPadアプリで見た時が一番大きく削られるので、文字の配置や重要な絵柄は、iPadアプリのサイズを参考に設定するのをおすすめします。
具体的にカットされるのは、片側145px（正確には145.5px）、両方で291pxです。
iPadアプリで表示されるのは、523px × 315px
オレンジで表示してある部分の外側がカットされますので、文字や重要な絵柄はこの中に配置するといいでしょう。
550600iPadアプリは顔写真が大きいので、結局、表示される半分は見えなくなっちゃうんですよね。
具体的にカットされるのは、片側164px、両方で328pxです。
iPhoneブラウザで表示されるのは、803px × 315px
オレンジで表示してある部分の外側がカットされます。ほんの少しなので、iPhoneブラウザのカット分は考慮しなくても、問題ないですが、一応数値だけ、アップしておきます。
具体的にカットされるのは、片側24px、両方で48pxです。
カット部分を配慮したところで…
天地（上下）のサイズを315pxで固定して作成すれば、あまり大きく位置がずれないことをお伝えしてきました。
実際に削られてしまうサイズもわかりました。
わかったところで…なんですよねぇ。顔写真のサイズがアプリやブラウザによって異なるので、すべてに問題ないような背景画像を作るのって、実は結構難しい。
文字を入れたい人は、ある意味不自然に中央より少し右に載せておかないとキレちゃうし。
フェイスブックを見るとき、スマホの場合はおそらく「アプリで見て！」という誘導が出てくるので、多くの方はアプリ見ていることでしょう。一般的なインターネットの使用でも、今はスマホが多いといいますから、画像の作成についてはむしろ、アプリでだけ通用する作り方でもいいんじゃないの？と個人的には思っています。
iPhoneアプリに対応した作り方はこちらの記事から
16:9サイズで作成します。詳しくはこちらの記事の前半で。
