Facebookのカバー写真をデザインしてみた。

ABOUTこの記事をかいた人

がみたか

兵庫県加古川市在住の2児の父親です。 ・アクセスバーズ®プラクティショナー ・Webの何でも屋さん ・オルゴナイトのネットショップ店長 ・某コミュニティの技術サポート など、「お客さんの周りも笑顔にしたい」という思いで、あれこれやってます^^ 最近のお気に入りのマンガは「暗殺教室」で、ハマりすぎて何周したかわかりませんw

「がみたか.com」でご提供しているサービスはこちら!

今月は月末にかけていろんな人に会うことになりました。

ちょっとwktkしていますw

 

どうも、がみたかです( ̄▽ ̄)

 

先日スマホの写真加工アプリを使った時に、

なかなか良い感じでできたんです(自画自賛w)

 

で、その写真を何かに使えないかな~と思っていたのですが、

ひと手間掛けて、Facebookのカバー写真にしてみました。

 

サイズの関係で悪戦苦闘してしまいましたが…(;´∀`)

スマホアプリの実力

こちらのカフェに寄った時に撮影したこの写真。

IMAG2653

 

これを、スマホアプリ「Photo Editor」というアプリで加工した写真がこちらです。

10415615_504353719690426_2796255836562456701_n

 

モノクロでアンティークな感じにしました。

元の雰囲気が良いので、かなり良い感じに( ̄▽ ̄)

これをFacebookのカバー写真に設定します^^

 

Facebookのカバー写真にする

ここからFacebookのカバー写真にするのに、

「Facebook カバー写真 サイズ」

で検索してぴったり収まる(であろう)サイズを見つけましたが、これが思わぬトラブル?にw

 

検索して出てきたサイズが「851px×315px」だったので、それに合わせてトリミングしてから、

透過した帯の上にテキストを載せてみました。

Facebookpage5

 

これで良し!と思ったのですが、それはあくまでもPC上での話です。

スマホで自分のページを見た時に「あれ?」となりました…

Screenshot_2014-06-19-15-46-27

全然収まってないじゃないかwww

 

スマホとPCによるサイズの違い

このように勝手にトリミングされるのはサイズが違うからなんですね…

そのままでも別に良いのですが、一応Webクリエイターを名乗っているので、

ここはまじめにやりますw

 

さて、スマホ用の最適サイズについて調べてみたところ、下の画像のようなサイズが

ぴったり収まるとのこと…

Facebooksize

 青い部分がPCの最適サイズで、赤い部分がスマホの最適サイズになります。

・PC用=横851px×縦315px

・スマホ用=横851px×縦683px

黒っぽい部分はPC用では表示されない部分ですが、カバー写真を設定する時に、

好きな場所を選ぶことができます。

 

PCとスマホのカバー写真を違和感の無いようにするには?

となると、カバー写真の見え方を同じようにするのであれば、

  1. スマホ用サイズ(横851px×縦683px)にリサイズする。
  2. PC用のカバー写真は設定時に必要な部分を選ぶようにする。

これだけで良いと思います。

 

スマホで撮った写真を載せるときはそこまで気にしなくても良いと思いますが、

デザインしたものをカバー写真にする時はスマホ用サイズを意識してくださいね^^

 

そして完成したカバー画像のスマホ表示がこちらです。

Screenshot_2014-06-19-15-46-03

 

うん、良い感じで収まっていますね^^

 

スマホでいろんな人のページを見ているますと、意外と収まっていない方が多いです…

 

これからも、スマホからのアクセスが増えてくるはずですので、このようなちょっとしたところでも、

ブランディング向上のためにも、少しは気を遣っていきたいところですね(;´∀`)

 

PS.

Facebookのオリジナルカバー画像に興味がある方は、お問い合わせフォームより、

お気軽にご相談ください^^


 

2015.5.15追記:

Facebookページのカバー画像は個人ページと違い、

パソコンもスマホも同じレイアウトになります。

 

全画面_2015_05_15_22_53

 

全体のサイズとしては「横851px 縦315px」となりますが、

綺麗に設置するには…

  • プロフィール画像部分を「横約165px 縦約86px(だいたいですw)」
  • Facebookページのタイトル部分を「横181px 縦86px(だいたいですw)」
  • ボタンの部分を「横約505px 縦38px(だいたいですw)」

これらを考慮したデザインにすると、綺麗に設置できるので、

参考にしていただけると僕もうれしいです^^

 

 

 

この記事に共感していただけたら
いいね!をお願いします。

Twitter で

mineo

記事が気に入ったらシェアをお願いします^^