tsmallfield's diary

たぶんJavaScriptのお話

OGP画像の見え方を簡単操作でシミュレート!

デザイナーのみなさんはOGP画像をデザインする機会がたくさんあると思います。
でもFacebookだと、OGP画像が正方形で表示されたり横長で表示されたりで、
レイアウトが大変ですよね。。。

 

そんな時に便利なのがこちら!!

 

og:image Simulator
http://ogimage.tsmallfield.com/

f:id:tsmallfield:20140108014350p:plain

 

作成したOGP画像が、Facebookのタイムライン上でどのように表示されるかを、
簡単操作でシミュレートできるWEBアプリです。

 

使い方はとっても簡単!
画像をブラウザにドラッグ&ドロップするだけ。

f:id:tsmallfield:20140108015154p:plain

正方形の場合と、横長の場合とでどのように表示されるかプレビューできます!

 

また、裏ワザ的な使い方として、
Facebookhttp://ogimage.tsmallfield.com/ をシェアする際に

f:id:tsmallfield:20140108015935p:plain

赤丸のボタン(複数のOGP画像の中から選ぶボタン)を操作することで
いろんな縦横比の画像がどのように切り取られて表示されるかを
検討することも可能です。

 

なお、現在用意しているのは

・630 x 630
・1200 x 630 (Facebook 推奨)
・1200 x 1200

の3つ。(今後増やす可能性あり)

 

OGP画像をデザインする際は
ぜひぜひ使ってみてくださいー