OGP画像シュミレータ「og:image Simulator」

使い方は簡単で、作成したOGP画像をドラッグ&ドロップするだけで、Facebookで表示される5パターンのOGP画像が作成され、それぞれどの様に表示されるのかを一度に確認することができます。
結果を見て、見切れているところなどデザインを調整していけば適切なOGP画像を作成することができますよ。
OGP画像の推奨画像サイズ(1200 x 630 px)も記載されているので、作成する際サイズに迷うこともなく助かりますね!
投稿日:

使い方は簡単で、作成したOGP画像をドラッグ&ドロップするだけで、Facebookで表示される5パターンのOGP画像が作成され、それぞれどの様に表示されるのかを一度に確認することができます。
結果を見て、見切れているところなどデザインを調整していけば適切なOGP画像を作成することができますよ。
OGP画像の推奨画像サイズ(1200 x 630 px)も記載されているので、作成する際サイズに迷うこともなく助かりますね!
執筆者:buchiko
関連記事
Adobe Typekitのフォントが同期されなくなった時の対処法
AdobeのCreative Cloudを契約していると使える「Typekit」。 様々なタイプのフォントを自分のPCに同期させてPhotoshopやIllustrator等で使うことができるのでとて …
終わらない修正のループにはまらないために…参考にしたい記事3選
細部の調整も終わり、デザインがほぼ完成していた状態で、クライアントからの膨大な修正依頼。それもデザインの作り直しになってしまうような大きな修正だったり…。 こういった経験、デザイナーのみな …
適切なシャドウの色が分かる「Material Icon Shadow Color Picker」
オブジェクトを立体的に見せたいときに使うシャドウですが、新米デザイナーさんはつい黒ばかり使っていませんか?(私がまさにそうなんですが…。) シャドウというと黒をイメージしがちですが、実はオブジェクトの …
Webデザイナーの面接ではどのようなことを聞かれるのか、気になりますよね。 私も面接を受ける前は、どんなことを聞かれるんだろうとドキドキしてました。 そこで今日は、私が制作会社2社の面接を受けて聞かれ …
2019/10/18
【Illustrator】配置した背景透明のPSD画像に黒いラインが出てしまう時の対処法
2019/08/19
レトロ・ヴィンテージ風なベクター素材が揃った「Retro Vectors」
2019/08/07
ウェブサイトの配色を解析してくれる「Web Colour Data」