facebookページのカバー写真がキレイに表示されるには

こんにちは、小さなサロンの困ったを解決する、株式会社グラウディア小園です。

皆さんはFBに個人アカウントとは別でサロンのフェイスブックページをお持ちですか??

流行りで終わるかと思いきや、FBページも運用次第では上手に集客や情報発信のツールとして大活躍してますよね!

私は三日坊主の常習犯なので100%の活用は出来ていませんが(-_-;)

それでもFBページは使えるなぁと思っています。

活用出来ていてもいなくてもサロン名で検索をかけるとFBページがある場合上位表示されやすいです。

と、いうことは使っていないのにファーストビューであるカバー写真等は目にされている可能性が高いということです。

そこで一つの問題が浮上しがちなのですが…。

皆さんのフェイスブックページのカバー写真、文字がにじんで(ぼやけて)いませんか?

ご自身で作成されている方は特に注意ですがもしかしたら作ってもらった人にも同様のことが起こっているかもしれませんw( ゚д゚)w

FBの度重なる仕様変更

ここからの情報は私自身の疑問から調べて行った時に解決した2017年5月現在の最適仕様となります。

まず、FBの公式サイトで最新の情報を確認することができますが仕様変更はちょくちょく行われています。

その中でもプロフィール写真やカバー写真についてはサイズの変更がなされています。

お恥ずかしい話、私は数年前にウェブ関係の友達から聞いた851px*315pxが変わるものとは思っていなかったのでずっとそのサイズで作っていたのですが最近どうも文字がにじむなと…。(個人アカウントのカバー写真はこのサイズのままの様です。)

イラストレーターで作っていたのですが過去「イラレはウェブ用に書き出すと文字がにじんでキレイに書き出せない」という記事を読んだことがあったのでイラレで作っているせいなのかな?と思い別のソフトを使用して作ってみるもにじむわけです。

(;-ω-)ウムー

そこから色々調べるとpngでアップするとサイズが大きいためアップロードの際に圧縮されるという仕様が発覚。だからjpgでアップロードせよとの情報(100KB以下だと読み込み時間が短縮されるとのこと)

で、やってみるもののやはりぼやける。

しかもjpgよりpngの方がキレイだし…。

さらに調べていくとカバー写真のサイズがカギを握ることが判明!

過去アップロード推奨サイズ 851ピクセル×315ピクセル

現アップロード推奨サイズ 828ピクセル×315ピクセル

PC表示サイズ 820ピクセル×312ピクセル

全てのサイズでカバー写真(FBページのヘッダー)を作成したところ三つ目のPC表示サイズでやっとクッキリ文字に!!

しかし、pngでヘッダーを作成した際に100KB以下にならなかった場合はサイズを小さくする必要があります。(今回私は106KBになりましたがギリかな~って感じです。)

ただ、スマホで表示されるのが640ピクセル×360ピクセルなので文字などは640ピクセル内に収めるなどの工夫が必要。

縦横比を守って820ピクセル×460ピクセルで画像を作成するとスマホでも画像が切れずに表示されます。(この時、PCでは312ピクセルの高さしか表示されないので残りの148ピクセルは上下白背景で作成するかPC表示の際には隠れても問題ない画像を使用すると良いでしょう。)

また、イラレでもまぁまぁ文字はクリアにはなりましたがもともと言われているイラレの文字がぼやける問題は文字のサイズによってアンチエイリアスのありなしを設定しなければならないようなので文字入れるならフォトショや他のフリーソフトが面倒じゃなくて良いのかな~と(イラレ使いこなしている方は是非イラレをお使いくださいm(__)m)

*本日のまとめ*

◎FBページのカバー写真作成おススメサイズは820px(幅)× 460px(高さ)

◎PC表示では高さ312pxのみが表示されることを意識した上で画像作成すること

◎jpgよりpngの方が画質がキレイ。しかしアップロードする画像は100KB以下にすること

◎イラレを使用する場合は文字のサイズによってアンチエイリスの調整が必要になること

◎FBはこまめに仕様変更するので定期的に確認すること

画像加工のフリーソフトでおススメはInkskape(インクスケープ)かオンラインでも使用できるPixlr Editor(ピクセラエディター)です。

ことPixlr Editor(ピクセラエディター)に関してはphotoshopのような機能が使えるのにフォトショより難しくなく簡単に使えるので私も多用しているお気に入りのソフトです。

どちらも無料なので(広告消したり機能アップで課金あり)是非自分で行なう画像処理やPOP作成、ヘッダー作成にご活用くださいね♪

メルマガの3通目で画像の質を落とさずに圧縮するサイトも紹介していますのでご興味のある方は是非ご登録を☆

本日もお付き合いいただきありがとうございました!

サロン運営上での色々なノウハウ、もっと知りたいな~という方は是非メルマガご購読くださいね。

ブログでは書けない具体的な方法もメルマガではお伝えしています!

登録してくださった方には実践で使えるワークシートや表・テンプレートなどプレゼントしています☆

全て無料ですので気軽にどうぞ~

メルマガ&プレゼント詳細はこちらから

明日もゆるく楽しく真面目にいきましょう♪