Facebookカバー写真と動画のサイズはこれだ！var201708

先日Facebookのプロフィール写真のサイズを検証してみました。次にやらなきゃならないのは、カバー写真ですね。当然ながら、適当なサイズの写真をアップしても、Facebookのサーバーの中で適当にあしらわれてしまい、キチンとした状態にはなりません。知らんけど。

適切なサイズを教えて！Google先生！

と思って検索すると、出るわ出るわw。ところが、それら多くの指南を書いているブログなどの、特に日付の新しいものを見ても「カバー写真のサイズは、1255×700ピクセルが良い」とか「820×360ピクセルが良い」とか「スマホで見せる場合も考えて、820×461ピクセルで作る。ただし、パソコン画面で見える範囲はその中心のその中心の820×312ピクセルだ」とか、本当にもう色々すぎでした。

ちなみにFacebookのヘルプページは、先日と同じこちら。正直なところ、読んでも「？」にしかなりません。ただし、どうやら横幅が820ピクセルだと良さそうな雰囲気は、文章の中に入っています。そのくせ「851×315ピクセルで100kb未満のJPEGのsRGBだと早く読み込む」とかわけわからん。

 

わからなければ、調べてみよう

ということで、ひとまず840×480ピクセルのファイルを作って調べてみようと思いました。どうやってピクセル数を数えるか、を考えた挙句、20×20の色違いタイルで作れば数えやすいかな、と思って作ってみました。

こんな感じ。作り方を知りたい人はいないでしょうが、本文を下まで読むと、いいことあるかも♪

この色の格子データを、カバー写真としてアップしてみました。

こちらがパソコン画面の場合。ちなみにこれは先日と同じ、MacBook ProのRetinaディスプレイのキャプチャーで、Windowsもやってみましたが、同じだったので割愛。

で、こちらがiPhoneのFacebookアプリでの画面。確かにパソコン画面での表示と比べると、下側の色が多く出ています。ちなみにアップした際に位置決めができるのですが、左右には動かず、上部を基準にしました。なので、パソコン画面とiPhoneの違いが一目瞭然。スマートフォンの方が確かに、高さは大きく出ていますね。

で、念のため画面キャプチャーをして、表示されているピクセル数はどうなのか、Photoshopで調べてみました。

はい。この通り、キチンと同一サイズ、すなわち、等倍サイズで表示されていました。したがって幅の最適サイズは、820ピクセルであることがわかりました。念のため同じように作った幅840ピクセルの写真もアップしてみましたが、縮小されました。なので、820ピクセルが正解。

このまま縦方向のピクセル数を数えれば、どれぐらいなのか一目瞭然。数えると、312ピクセル。したがって、パソコン表示だと820×312で表示されていることがわかりました。

iPhoneの場合、当然引き伸ばされる（iPhone 7 Plusの場合は、横ピクセルが1240）し、スクリーンショットを拡大して見ても「ぼやっ」としているので、ピクセル数を数えることは不可能。ただし、割合で計算してみました。1240:699=820:xで、x=462.24　となり、約462ピクセルなんじゃないかと思いました。

ここまでやってみて、もう一度Google先生に「Facebookカバー写真　サイズ　820ピクセル」で検索してみると。新しい情報をゲットだぜ！

 

Facebookのカバーは、動画にすることができる

どうやら、2017年の6月頃に投入されたサービスのようです。ホホォ。なら写真をアップするんじゃなくて、動画にしようかな。っと。

Facebookページ、個人ページのカバーに対する動画の条件が発表されている（ただし、パソコンのsafari以外では再生されないことがある）模様です。それは次の通り。

・動画の時間は、20〜90秒。20秒未満はダメ。

・動画のサイズは、820×462ピクセルが推奨される。少なくとも少なくとも820×312ピクセルは必要。

ただし、パソコンのブラウザ（safari以外）では、再生されないことがあるようです。ま、Mac OS Xユーザーは、割と頻繁に強制アップデートを余儀なくされるからねw。

まぁ、普通にHDの動画を投げ込んでも大丈夫でしょうが、狙ったところに狙ったものが表示されるか不明なので、最初から推奨サイズで作ることが良いと思います。

あ、ここで検証の疑問が確定しそうです。現状で写真によるカバーを作るには、820 x 462 ピクセル（内パソコンでは312ピクセル以外は切れる）がベストなのでしょう。すでにこの時点で気持ちは動画へ行ってしまいましたが、写真をアップしたい人もいるでしょうし、念のためキチンと検証しました。

 

こんな感じの画像を作ってみました。これは、820 x 462 ピクセルで、内側の色が付いているところは、312ピクセルとなっています。

これをアップしてみると、ちゃんと真ん中が表示されました。キャプチャーの通り、「ドラッグして位置を調整」が出ています。上下にドラッグすると、即白黒の格子が見えますので、縦方向のセンターで表示されているのでしょう。

念のため、iPhoneでもキャプチャ。確かにパソコンよりも広い画面、隠れていた白黒の格子が現れました。ちなみに調整しようと思っても、「ドラッグして位置を調整」は出なかったです。つまり、ジャストサイズ。イェイ！

フェイスブックのカバー写真の推奨サイズ（当ブログ調べ）は、

820 x 462 ピクセル

個人ページもFacebookページも一緒だよ。

 

 

さて、動画の方面の話

つーことで、作りました。2タイプ。多分動画はループになるだろうと想像して、ループで見ることが前提で作った動画ね。

さて、アップロードの手順から。

左上の「カバー写真を変更」をクリックすると、プルダウンメニューが出ます。ここから、「写真・動画をアップロード」をクリック。

あ、その前に、写真にレイヤーで入れている文字をクリアにしました。なぜなら、動画そのものに文字を入れてみたから。これが今後どのような影響が出るのかは、正直わかりませんw。

動画をアップロード中。

そのままエンコードが始まりました。

先ほどの通り、パソコンでは縦が312ピクセルしか表示されません。そして写真をアップするのとは違って、動画の場合はどうやら上部が基準になっているようです。したがって、パソコンで表示する範囲として作ってある中央の312ピクセル（付近）まで「ドラッグして位置を調整」しました。

はい！ここからが問題。最初なんだろな、と思った左右の「<と>」の表示。どうやらアップした動画から「Facebook側が勝手にサムネイルを10件摘出」した模様です。多分動画が表示されない場合に見せる静止画カットなんだと思います。これは運ですね〜。私はたまたま10枚目に出したいカットがピックアップされていました。ホッ。

そして想像通り、ループ再生のための「動画をループで自動リプレイ」のオンオフが選択できました。当然オンにして、投稿、公開で終了。お疲れ様でした。

２種類の動画は、「イメージバンクナカジマ公式Facebookページ」と「中嶋秀磨公式Facebookページ」のカバーとして使っていますので、ぜひどうぞ。

さて、ここまでお読みいただきありがとうございました。

 

プレゼントコーナー！

慣れている人は、パパッと作っちゃうでしょうが、あると便利、かもしれない今回私が作ったいくつかのデータを、どうぞ持って行ってください。

 

この画像をクリックすると、ZIPファイルがダウンロードされます。

中身を解説すると、

左上が「820×462ピクセルで、中央に312ピクセルのカラーが入っている、1マス20ピクセル正方形のJPEGデータ」

右上が「その左上のデータをPhotoshopで作った時のPSDデータ。レイヤーがそのまま残っている」

左下が「1200×800ピクセルで、幅が10ピクセルの縦列、横列別々の縞模様のPSDデータ。レイヤーがそのまま残っている」

右下が「サイズは820×462ピクセルで、中央に312ピクセルの白帯。スマホ表示部分は黄色になっているJPEGデータ」

のセットです。

多分使い勝手がありそうなのは、右下の白黄色のデータ。これを動画編集アプリケーションへひとまず入れて、透明度を下げてあげれば、作るカバー動画の中で、パソコン、スマホの両方で見切れない場所が簡単にわかると思います。もちろんですが、カバー写真を作る上でも、これをベースにしてあげれば、見切れる場所がわかると思います。

ということで、フェイスブックカバーに写真や動画を「ジャストなサイズ」で作ってみてはいかがでしょうか？

ただし、この情報は、Facebookが仕様を変更すると、やり直しです。ま、始まったばかりなので、当分は大丈夫でしょう。知らんけど。