はてなブックマーク - FacebookページでPCとスマホどちらから見ても綺麗に文字と画像が表示されるカバー写真を作る方法
Pocket

ペット名刺の「ハピテン」

facebookページのカバー写真ですが、手前のプロフィールアイコンとの兼ね合いを考えないとこのように、カバー写真に入れた文字が重なってしまって読めなくなります。

それだけではありません。

スマホでみると、カバー写真の左右がガッツリとカットされてしまっています。これではテキストもイメージ写真もまったく意味がありません。

という事で、PCとスマホどちらから見てもちゃんと伝いたいことが伝えられる効果的なカバー写真を作る方法を紹介します。

スポンサードリンク

それぞれのサイズを知ろう

Facebookページのプロフィール写真やカバー写真のサイズはどのくらいですか。 | Facebookヘルプセンター

コンピュータでは幅851ピクセルx高さ315ピクセル、スマートフォンでは幅640ピクセルx高さ360ピクセルの大きさでページに表示されます。

高さが異なりますね。表示される画像はあくまで同じ1枚のカバー写真なので、高さはリサイズされる事となります。

薄いグレーが851×315ピクセルになります。濃いグレーがスマホで見る事の出来る範囲です。640×360ピクセルとなっていますが、基本は851×315ピクセルで作るので、表示される範囲は、560×315ピクセルという事になります。

そして赤茶色の長方形がパソコンで表示されるプロフィール写真、赤い正方形がスマホで表示されるプロフィール写真のそれぞれの配置位置となります。

基本は851×315ピクセルで作りますが、メインとなるイメージ画像とテキストを入れる場合は、まず濃いグレーの560×315ピクセルに、なおかつプロフィール写真の配置位置にも重ならないようにしないといけません。

このルールにそって作りなおしたのが以下のカバー写真です。

ちょっと左右が寂しいかもしれませんが、元の素材がそれほど横幅がないので、このようにグラデーションでぼかすしかありませんでした。

でスマホで見てみると

ほらバッチリ。いい感じです。

どこに配置すればいいか一目瞭然の851×315ピクセルのイメージ画像をこちらからダウンロードする事ができるので、良かったら参考にしてください。

2015年4月14日

ブログの更新情報はこちらからどうぞ

RSSリーダーへ登録していただく他に、facebookページや、twitterからもブログの更新情報をお知らせしています。是非ご登録下さい。



自己紹介

サムリ。1974年4月生まれ。東京都出身、埼玉在住。アメコミ映画に、仮面ライダー、ロボットアニメが好きな二児の父でフリーランスやっています。詳しいプロフィールはこちら

  • サムリブログのはてなブックマーク数