画像を加工したり、レイアウトしたりするのは好きなんですね

文字入れしたり、文字装飾したり、バランス考えたり。

なので、結構依頼を受けたり、セミナー用におまけで作ったりもするんですね^^

けどですね、嫌いな画像加工がありまして、、、

そう、フェースブックページ用の、カバー画像です…..

毎回、サイズいくつだっけ？　と思って調べるんですね

で、いろんな情報が、錯綜していて？？？ってなって

で、色々、試行錯誤しながら、なんとか作って、安心していると

FBの仕様が変わっていたりする（笑）

カバー写真内部に、ページのアイコン的画像が来るので、それを考慮して
作ったのに、そうじゃない画像表記に変更になったり。

Facebookさんも、私たちが、便利に使いやすく、色々、試行錯誤を
重ねられてのことだと思うので、そこには、感謝しかありませんが^^

今回、もう、そんな面倒なことと今後おさらばするために
備忘録的に、記事にしてまとめてしまおうと^^

で、仕様が変わったら、又、備忘録として、ここにアップして記録していこうと^^

なので、本日　2017年11月5日現在のベストサイズの　FBページカバー写真作成方法を
記録していきたいと思います^^

FBページ、カバー画像のサイズについて

今回の目的は、PCでFBページを開いた場合と、スマホで開いたときに

カバー写真が良い感じで見える

これを目標に、進めて行きます。

そう、ここが、FBページのカバーが画像の少しめんどくさいところですが

PCで見る場合と、スマホで見る場合の、最適な画像の大きさが異なるのです

もう少し、丁寧に言うと、どちらかに合わせると、どちらかの画像がトリミング（カット）
された感じで表示されるので、バランスが悪くなったりすることが有るのです。

PCとスマホの利用割合

ネットを見るとき、PCを使うか、スマホを使うか？
これ、自分で考えると、圧倒的にスマホですよね。

ちょっと寄り道ですが、実際のところ、みなさんのPCと、スマホの利用状況を

こんな感じで、グーグル先生に聞いてみました。

結果、こちらのサイトに統計が有りますが

10～50代「スマホしか使わない」は46％「スマホとPC」併用者を上回る。10代では「スマホのみ」が7割に | Web担当者Forum

※LINE提供のグラフ表示がデータの見せ方として適切ではなかったので差し替えた（7/27） LINEは、スマートフォンなどのインターネットの利用環境に関する調査を10～50代の男女759名に対して行った。 調査結果は以下の通り。 職場や学校などで週1回以上、インターネットを利用するでは「スマホのみ」が最多、「スマホとPC」併用者を上回る …

こんな感じだそうで、スマホしか使わない方々が、約半数。

両方使う方も合わせると、85％の方々が、スマホでネットを見ているので

今回は、スマホ表示をメインに、話を進めて行きたいと思います。

画像のサイズに関して

結論から先に言いますと、現在のベストサイズとしては

820×461（ピクセル）推奨で行きたいと思います。

理由は

1. 　これで作ると、スマホでそのままのサイズで表示されること。
2. 　PCでも、幅がそのままの幅で表示され、上下のマージンさえ考慮すれば、使いやすい。

こんな感じですね。

では、実際、どうなるか、やっていきましょう。

FBページ、カバー画像の検証

今回、まず、820×461（ピクセル）で作ったのが、こちらの画像。

これを、FBページにあてはめて行きますと

スマホの場合

こんな感じですね。全体が綺麗に入る感じです。

PCの場合

こんな感じですね

これ失敗なのですが^^;

右のインテリアのサイズとか、文字の位置を考慮しないと

こんな感じに、上下で見切れる感じになってしまいます^^;

なので、改善点として

1. PC配置を意識して、文字位置を決める
2. 同じく、右のインテリアのサイズも考えてみる。

この２点を意識して作ってみます。

PCと、スマホの画像高さの違い

スマホの場合は、幅820　高さ461　がそのまま適用されます。

PCの場合、幅は820なのですが、高さが　312となるので

その差　149ピクセル分を考慮する必要があります。

今回の場合ですと

画像の位置は、FB上の設定でいじれるので

この様に、下のエリアに（もしくは上に）必要な情報を集めるか

こんな感じに、センター付近に、必要な情報を入れる事で、調整していきます。

今回は、下よせで作り直します。

作り直してこんな感じですね。

文字と、写真の”具”の部分を下に持ってきました。

これを、FBページのカバー画像にアップロードします。

PCの場合

こんな感じですね、なんか、綺麗におさまりました^^

スマホの場合

これも、こんな感じですね^^

今回、実は、元画像が、花を置いてある、テーブルの下限で撮影されていたので、下よせを行う事になりました。

実際は、もし、画像に文字を入れたり、全体をバランス良く見せる必要がある場合は、真ん中寄せにして画像を作ると良いかと思います^^

今回まとめとして

今回のまとめとしては、こんな感じですね

1.　スマホで見る場合を考慮して、820×461（ピクセル）で画像を準備する。

2.　PC表示も考慮して、高さ　312ピクセル内に、必要な情報を集める。

3.　上記を考慮して、元画像は、センターに寄せつつ、感性型をイメージした、画像を準備する。

ちなみに、今回、写真を提供頂いているのは

代官山にある、素敵なサロン

Aroma Bliss Gardenさんです。

https://www.facebook.com/aromablissgardenebisu/

完成型が、こちらのFBページで、使われる事になると思いますので
ご参考にしてください^^