Facebookのカバー画像を作る際にはPCとスマートフォンの両方に対応させよう

SNS

今回は、Facebookのカバー画像の作り方についてのハウツーについて書きます。
昨年の5月から10月にかけて沖縄・那覇で開催された、エクスペリエンス・マーケティングを学ぶ勉強会にボクは大阪から参加してたんです。
そんな仲間のお一人に島袋一恵さんという方がおられまして、その島袋さんからご自分が運営しているブログのヘッダー(看板)画像の制作を依頼されました。
こんなふうに仲間に頼られるのは、うれしいですよね。
このことは以前の記事で書いたのでよければどうぞ。
お気に入りの名刺とブログのヘッダーを共通のコンセプトで作る
↓制作したブログヘッダー画像はこちら。沖縄らしくて良いですよね。
header-nikkoto2
↓島袋さんのブログです。
「島袋一恵の楽しい未来づくり|沖縄でキャラ弁・販促」

「野に咲く花のように周りを和ませ、幸せにする人になろう」

を生き方のテーマにされてて、

「楽しい【食】は家庭を笑顔にする」→ 愛情が詰まったキャラ弁
「楽しい【職】は人生を豊かにする」→ 温もりたっぷりの販促

というコンセプトで沖縄の地でバリバリと販売促進のサポートをがんばってはるわけです。
そんな島袋さんからボクに今度は、以前制作したブログヘッダー画像に関連したお仕事のご依頼を再びいただきました。

ブログと同じコンセプトでFacebookのカバー画像を作る

ブログのヘッダー画像が出来たのに合わせて、Facebookのカバー画像も作っちゃおうということなんです。
ブログ用はすでにデザインが出来てるので、ちょっと手を入れるだけで簡単にできるだろうとその時は割合簡単に思ってたんです。
でもね、そんなに難しくは無いんだけど、いろいろ調べていくうちにいくちかの注意点があることが分かってきました。

カバー画像についてのでFacebookのアナウンス

Facebookがこんな案内ページを用意してくれています。
Facebookページのプロフィール写真やカバー写真のサイズはどのくらいですか。
FBカバー画像サイズ
なるほど、これは分かりやすいです。
画像のサイズはこの指示にしたがって用意すればいいですね。
また、プロフィール写真や、名前が表示される場所をしっかり認識することも大切ですね。
ただ注意が必要なのは、これはパソコンのモニターで表示する場合についての寸法であって、このままスマートフォンで表示する場合と、デザインとレイアウトによっていは不都合が起こることがあります。
風景写真とかだと、とくだん問題はないのかなと思いますが、デザイン的にイラストを入れたり、ロゴやテキストを入れる場合には、注意が必要です。
そうじゃないと、意図しないところで切れちゃったり、被ったりして不細工なことになってしまいます。
例えばボクのブログだと、スマートフォンで見に来てくれる人の割合は、だいたい6割ほど。だからもう、パソコンより、スマホを先に考える時代なんだと言えると思いますよ。

パソコンとスマートフォン両方に対応したカバー画像を作る

↓結論から先に書いちゃうとこんな感じです。
領域
 
黄色の破線で囲っている、部分がスマートフォンで表示される部分です。なので、黄色の破線の外側は見切れることになります。
具体的には、「幅420px 縦315px」ですね。
ただ「px」とかは結構マニアックな話なので、このへんは何となくな感じで受け止めてください。
↓そしてこの画像を適用して、パソコンのモニターで見るとこのように表示されます。
ランドPC
黄色の破線で囲っている、プロフィール画像と、名前が表示されるスペースに注意が必要する必要がありますよ。
この部分にデザインを施したとしても、プロフィール画像と名前表示の文字に重なっちゃうので、そうならないようしないといけません。
 
↓スマートフォンでの表示です。
ランドSMART
同じく、プロフィール画像と、名前が表示されるスペースに注意が必要です。
同じ画像を使って、パソコンとスマートフォンの二通りの条件をクリアさせないといけないので、それなりに気を使います。
今回は、島袋さんのキャラクターや世界観、コンセプトを表現するために、ロゴやテキスト、小窓のデザイン画像などを使ってデザインしたので、いろいろと工夫が必要でした。
逆に風景画像を入れたりとかだと、見切れ困るとかは考えなくて良いので、ぜんぜん簡単ですよね。
↓例えばボクのFacebookのカバー画像の表示例です。ちょっとは工夫したらという声もちらほらと(笑)
金川PC金川SMART
ただ、Facebook側の仕様の変更もあることが予想されるので、その時々で臨機応変に対応することが必要だなと思います。
大きな声では言えませんが、さきほどスマートフォン表示を改めて確認したら、すでにちょっと仕様が変更になってるような気がしますね・・・
まあ今日は見なかったことにしよう(笑)
今日はここまで。みなさんの参考になるとうれしいです。
ナイスパッション!

コメント