スマホでも見切れないfacebookカバーテンプレートを作成しました


こんにちは!フジモトです。

先日facebookカバーをデザインする機会があったのですが、
PCでもスマホでも見切れないように制作するのが一苦労だったため
今後のためにpsdテンプレートを作成してみました。

cover2

以下よりダウンロードして自由にお使いください〜。

http://knap.jp/blog/wp-content/uploads/2015/08/facebookcover.zip

 

※2015年8月24日現在のfacebookの仕様に基づき作成しています。

 

 

 


facebookカバーはPCでスマホで表示比率が変わってくる

facebookカバーはPCとスマホで表示比率が変わってくるため、
画像サイズとデザインの配置を考えて作成する必要があります。

 

cover1

 

サイズを調べてpsdテンプレートを作ってみた

facebookヘルプセンターによると、facebookカバーの表示範囲は以下のとおり。

PC:851×360ピクセル

スマホ:640×360ピクセル

ということで、PCの横幅851ピクセルにあわせて以下のような画像を作成します。

 

facebookカバーガイド

 

 

 

 

 

 

▲851ピクセル×479ピクセルの長方形の中央に851ピクセル×360ピクセルの長方形を配置しました

 

実際にはめてみるとこのようになりました。

cover2

 

見切れたくない要素は、<PC表示範囲>のなかに配置すればOKです。

 


 

 

▼psdテンプレート

http://knap.jp/blog/wp-content/uploads/2015/08/facebookcover.zip

 

facebookカバー作成時に是非つかってみてください。

以上、フジモトでした!

 

 

Scroll to top