【Facebook】カバー画像のサイズなどを最適化！スマホ対応！サンプル色々
2015/09/24
前回、Facebookページを用意したわけですが、カバー画像のサイズを気にせず、手元にあった「はぴすぷ」のロゴ画像を適当にアップしました。
Facebookページの作成手順。ブログ書いてるならFacebookページで更新情報を流そう！
Twitterが画面の大きさに合わせて大きさ変わってたので、同じ感じかなと思っていたら固定なんですね。
だったら、ロゴが綺麗に見えるようにちゃんとした画像を用意しようと考えました。
きっと画像サイズも決まってるだろうと調べていると、どうやらスマホの時に表示する時にはサイズが異なることが分かりました。
縦が短いと、こんな感じに横がカットされてしまいます。
スマホの時にプロフィール写真が表示される場所や、文字の位置も考慮しないといけないです。
ややこしいなぁと思いつつ、色々試行錯誤してみたので紹介します。
スポンサーリンク
スマホにも対応した最適な画像サイズ
まずは、Facebookが公式に出している情報を探します。
コンピュータでは幅851ピクセルx高さ315ピクセル、スマートフォンでは幅640ピクセルx高さ360ピクセルの大きさでページに表示されます。
PCの表示サイズは「851×315px」で、スマホの場合は「640×360px」とのこと。
スマホの幅をPCの幅に合わせた場合の高さを計算すると
360*851/640≒478.69
なので画像サイズは「851×479px」で作成しておくとどちらにも対応可能です。
プロフィール写真等で隠れない領域を調べる
画像サイズは決まったけど、プロフィール写真・テキスト・ボタンで隠されてしまう場所が分からないとデザイン出来ません。
一応先ほどのページにざっくりした配置は載っています。
ページのプロフィール写真:
コンピュータでの表示例:
何か分かりやすいテンプレートとか配ってる人いないかなーと探してみると、発見しました。
Facebookカバー画像をスマホに対応させる！！｜Enjoy Surfer Keisuke の徒然日記
恐らくアメーバに画像を縮小されてしまっているので、実寸サイズでは拾えなかったんですが利用させてもらいました。
何故か縦を638pxで作ると説明されていますが、479pxを超える部分は無駄になるはずなので、実寸に拡大して下の部分はカットしました。
PCでの部品の表示位置は分かるのですが、スマホの場合が分からなかったので、実際に適用して確認してみます。
長い文字の場合は、PCで隠されなかった範囲にも文字がかかる感じですね。
ちなみにPCの場合で、ユーザーにマウスオーバーした時に表示される、下の画像にあるようなダイアログでは上の30px程が表示されません。
なので、以下の画像の黄色で塗った範囲くらいに隠れて欲しくないものを置くといい感じになると思います。
ファイルの保存形式
Facebook公式がこういう風に書いています。
幅851ピクセルx高さ315ピクセルで、100キロバイト未満のsRGB JPGファイルだと読み込み時間が短くなります。
ロゴやテキストを含むプロフィール写真やカバー写真には、PNGファイルを使用すると、より良い結果を得ることができます。
なので基本は品質高めの「JPG」で良いと思いますが、小さめの文字とか入ってると多少の劣化でもかなり読みづらくなるので「PNG」にした方が良いでしょう。
100キロバイト未満のsRGB「JPG」だと高速なサーバーに配置するとかしてるのかな。あえてこういう書き方してるってことは。
sRGBとか書いてますが、基本的に一般の人が触れる「JPG」ならsRGBだと思いますので気にする必要はないです。
sは「standard」の標準という意味なので。
動作確認
というわけで、カバーを作って適用させました！76.6kBなので高速に表示されるはずｗ
システムで表示される文字が白なので若干の色を下の方に付けてます。
思った以上に「は」の文字がプロフィール写真に隠されたので、カバー画像を上に30px程ずらしています。
ダイアログの方は、元から上の30px分程が表示されていなかったからか、ずらす前と位置が変わりませんでした。
更にずらすと、その分は、ずれていくので、ずっと固定されているわけではありませんでした。
スマホでもちゃんと表示されました。
iPhoneアプリ
iPhoneブラウザ
かなりシャドーかけられるので、かなり汚くなってしまいますね(´・ω・｀)
若干アプリとブラウザで違いがあるんですね。
シャドーとかはどうしようもないので、これで完璧だ！と思っていました。
他にも色々な表示のされ方がある
いいね！された時。
Page Plugin（旧Like Box）
(´・ω・｀)
…。
(´；ω；｀)ﾌﾞﾜｯ
カバーでどうしても見せたいものは、右側に寄せるべきですね！
いや、もしかしたら右側でも隠されるパターンもあるかもしれませんがｗ
終わりに
全ての場合で綺麗に表示されるとは言えませんが、普段目につく場所ではいい感じに表示出来るようになったと思います！
Page Pluginはサイト内に置く予定なので、どうしようかちょっと考えましたが、しばらくはこのままで行きます。
何かロゴ以外でカバーにしたい内容を思いついた時にデザインします！
とりあえず、これでFacebookページもそれっぽくなりました。
これからカバー画像用意しようとしてる人の参考になれば幸いです。
それでは。