トピックス

トピックス Facebookの写真サイズ

種別

Facebookの写真サイズ

2012年4月26日からFacebookのプロフィール写真の表示サイズが変わりました。
125×125px表示だったのが、160×160px表示に変わりましたよね(27日には表示サイズも反映され変わっているようです)。
アップロードサイズ自体は180×180px以上と変わっていませんので、表示サイズが大きくなるだけなのですが、カバー写真とプロフィール画像がつながったようなデザインにされている場合、今まで揃っていたデザインもずれてしまいます(周りの友人たちも、何社もあるクライアントの対応に追われて大変だった様子…)。
Facebookは仕様変更も多いため、なかなか写真の表示サイズが覚えられません。
そこで、Facebookの写真サイズが分るように以下のようなものを作ってみたので、トピックスで記事にしてみました。

Facebookの写真サイズ

Facebookの写真サイズ

補足

●カバー写真サイズ
851×315px
丁度のサイズでアップロードすると、リサイズされませんので綺麗に表示されます。

●プロフィール写真サイズ
160×160px
180×180px以上のサイズでアップロードしないといけません。
リサイズされる分、少しぼけた感じになってしまいます。

●プロフィール写真の余白・線幅
プロフィール写真には、4pxの余白と1pxの線が付きます。

●プロフィール写真の表示位置
左から23px、上から210pxの位置に表示されます。

●カバー写真とプロフィール写真をつながったデザインにするには?
カバー写真とプロフィール写真それぞれのサイズと表示位置を考えた上で、プロフィール写真が180pxから160pxにリサイズされるので、元のサイズから88.88%リサイズされることが分ります(160÷180=0.8888…)。
そうすると、Photoshop等でカバー写真やプロフィール写真を作成する場合、カンバスのサイズを958×450pxで作成したものから書き出した画像をFacebookでアップロードし、リサイズ表示させれば、カバー写真とプロフィール写真をつながったデザインにすることができます。

詳しくは、英語のサイトですが、HyperArtsさんのサイトで紹介されています。
こちらのサイトでは、Photoshop形式(.psd)のテンプレートファイルもダウンロードすることができます。
HyperArtsさんのサイトの該当ページ

Facebookでリサイズ表示させると、どうしてもぼけた感じになってしまうので、そこは好みの問題ですね。

●アプリのイメージ写真サイズ
111×74px
アプリの設定編集画面から任意の画像をアップロードすることができます。

●投稿写真サイズ
404×404px
Facebookから写真を投稿した場合の表示サイズです。

●ハイライト写真サイズ
843×403px
投稿した写真を”ハイライト”にするとこのサイズで表示されます。
また、Facebookでは記念日なんかも表示させることができますが、そこに表示される画像も同サイズで表示されます。

こちらの記事は、2012年5月3日時点のFacebookの仕様に合わせたものです。
Facebookの仕様は頻繁に変わりますので、いつまで参考にできるか分りませんが、その点はご了承ください。

List

関連記事(※当記事と関連性が高いと思われる記事)

Facebookページ

2012/02/23
Facebook Page
スコア:30 ※スコアの数値が大きいほど、関連性の高い記事です。 当サイト用のFacebookページを作成しました。まだ、ほとんど何もできていない状態ですが、とりあえず、当サイトで配信している記事とフィードをポストしてFacebook... 続きを読む...

Facebookページのタイムライン

2012/03/06
Facebookページのタイムライン
スコア:29 ※スコアの数値が大きいほど、関連性の高い記事です。 2012年3月より、Facebookページにもタイムラインが導入されました。3月30日まではプレビュー期間として、Facebookページを見ているユーザーには公開せずに... 続きを読む...

Facebookを非同期通信で読み込む

2012/05/28
Facebookを非同期通信で読み込む
スコア:28 ※スコアの数値が大きいほど、関連性の高い記事です。 FacebookのLikeボタンやLikeボックスをサイトに設置している方は多いと思います。その際、bodyタグのすぐ後にFacebookのJavaScript SDK... 続きを読む...

FacebookのOGPの記事を更新

2012/06/02
FacebookのOGPの記事を更新
スコア:28 ※スコアの数値が大きいほど、関連性の高い記事です。 以前掲載していた「FacebookのOGP」の記事を一部更新しました。 Facebookの仕様変更もあり、内容が多少古くなっていたためです。 以下よりご覧いただけますの... 続きを読む...

FacebookのOGP(更新版)

2012/02/28
FacebookのOGP(更新版)
スコア:27 ※スコアの数値が大きいほど、関連性の高い記事です。 ◎2012.6.2更新5月に入った位からFacebookの仕様変更もあり、OGPに関しての内容が多少古くなってきましたので、一部内容を更新しました。 SNS(Faceb... 続きを読む...

おすすめ書籍・商品(※当記事と関連性が高いと思われる書籍・商品)

ページの先頭へ