【レイアウト】Facebookカバー写真のポイント(2016.7最新修正版)

つい最近、
Facebookのデザインが変わりました。

特に大きな変更点は・・・

スマートフォン(スマホ)で見たときの
カバー写真の
インターフェイスです】

具体的には、
カバー写真部分のサイズが変わりました。

今まで:851×696ピクセル
↓ ↓
変更後:851×638ピクセル

となりました。

変更後はサイズが少し小さくなりました。
そのため、今までサイズのままにすると、

カバー写真の下の部分がカットされてしまいます。

デザイン Facebook 新しい カバー写真 スマホ対応

上の写真は今までのカバー写真です。
これをスマートフォンで見ると・・・

デザイン Facebook 新しい カバー写真 スマホ対応

こんな感じになり、
下のネガフィルム部分が表示されていません。
これでは、隅から隅までデザインを作成しても、
削られては意味がありません。

次の写真は、新しいサイズのカバー写真です。
(わかりやすくするため、
前より「サイズを小さくした」のと、
背景だけ変えました。)

デザイン Facebook 新しい カバー写真 スマホ対応

 

この新しいカバー写真サイズを
スマートフォンで確認すると・・・

デザイン Facebook 新しい カバー写真 スマホ対応

見事にピッタリとはまります♪

なお、、
・Facebookページ
・個人ページのスマホ非対応版
のカバー写真サイズ(815×315ピクセル)
は現在のところ、変更ありませんので、
ご参考にして下さい^^

〜〜〜〜〜〜〜〜〜〜

【2016年7月 追記】Facebookのデザイン仕様について追記しました。

 

【主な変更点】

iPhone含む、スマートフォンの表示デザインが変わりました。
(下の画像(スクリーンショット)参照)

Facebook個人ページ(2016最新)

今まで顔写真部分は左端に表示されたのが、中央部に変わりました。

これに伴って、カバー写真のサイズも変わりました。
大きさは
・851×315ピクセル(パソコン)
・851×360ピクセル(スマートフォン)
となります。

なお、Facebookページについては
・828×315ピクセル(パソコン)
・640×360ピクセル(スマートフォン)

 

【変更に伴い、表示(見え方)について】

Facebook最新カバー写真(2016年版)

上記の画像をご覧ください。
具体的にポイントをお伝えしますと・・・

 

【Facebookカバー写真の見え方 5つのポイント】

・黄色く塗られた部分は、
パソコン、iPhoneどちらでも見える共通的な範囲です。
(*見栄えの良いと思われる範囲に絞ったため、若干範囲は狭くしています)

・左右の葉っぱ部分(正確には左右の青い細い線引いた外側部分)は、
パソコンでは見えますが、iPhoneでは見えません。

・下部緑線の部分より下は、iPhoneでは見える部分で、パソコンでは見えません。
(*カバー写真を設置する際、上だけ表示するよう調整した場合です)

・青線の四角部分(中央部)は、iPhoneでは顔写真が出る部分です

・緑線の四角部分(左側)は、パソコンでは顔写真が出る部分です

以上が最新版の情報です。
ぜひご参考にしてください。

(追記)
1)カバー写真画像のお持ち帰りは自由ですが、使用に関しては自己責任でお願いします。
(微妙な差による違いがあるかもしれませんのでご了承を)
2)将来的にFacebook側でデザイン変更が起こる可能性は十分あります。

 

(追記2)
2020年3月に仕様が変わりました!

表示サイズの目安は
コンピューターでは幅820ピクセルx高さ312ピクセル
スマートフォンでは幅640ピクセルx高さ360ピクセル

となります!

フォロー大歓迎です!

■好評いただいている「本音ブログ」はこちら!!■
https://blog.enjoy-eagle.net/

■新しくなった「セルフマガジン」はこちら!!■
https://enjoy-eagle.net/design/selfmagazine

■起業家の後方支援 プロフィール写真撮影(販売ページ)
https://enjoy-eagle.net/

■プロフィール写真撮影(撮影の雰囲気をノーカット版)

■写真撮影メニュー及び価格表
https://enjoy-eagle.net/design/photo_price

■YouTubeチャンネル絶賛公開中!
https://www.youtube.com/channel/UC5EVbeG3aFDMlyd7NbkI2eg

■Twitterフォローお気軽に!(フォロー返しします!)
https://twitter.com/yoshida_proflab

【サーバー代の足しにしたいので、寄り道にぜひお買い求めください!】
Amazon Kindle 電子書籍
Amazon公式サイト

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA