PCとスマートフォン両方に対応したFacebookのカバー画像の作り方

SNS

今回は、Facebookのカバー画像の作り方についてのハウツーについて書きます。
エクスマ(エクスペリエンス・マーケティング)を集中的に学ぶ、沖縄エクスマ塾の同期塾生のランド島袋一恵さから、ランドが運営しているブログのヘッダー(看板)画像の制作を依頼されました。
こんなふうに仲間に頼られるのは、うれしいですよね。
 
このことは以前の記事で書いたのでよければどうぞ。
お気に入りの名刺とブログのヘッダーを共通のコンセプトで作る
 
↓制作したブログヘッダー画像はこちら。沖縄らしくて良いですよね。
header-nikkoto2
「島袋一恵の楽しい未来づくり|沖縄でキャラ弁・販促」
 
ランドは沖縄で、
「楽しい【食】は家庭を笑顔にする」→ 愛情が詰まったキャラ弁
「楽しい【職】は人生を豊かにする」→ 温もりたっぷりの販促
というコンセプトで沖縄の地でバリバリと販売促進のサポートをがんばってはるんですよ。
 

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

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

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

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

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

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

コメント