アラサー主婦のWEBデザイン奮闘記

Webデザイン Web制作 制作お役立ち

OGP画像シュミレータ「og:image Simulator」のご紹介

投稿日:

Webページをシェアした時にFacebook上で表示されるOGP画像ですが、きちんと設定をしないと画像が見切れてしまったり、正方形になってしまったりしますよね。。
そんな悩みを解決する便利なサービスを見つけたので、今回はご紹介したいと思います!
 

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

「og:image Simulator」は、ブラウザ上でOGP画像がどのように表示されるのかシミュレートできるWebサービスです。
 

使い方は簡単で、作成したOGP画像をドラッグ&ドロップするだけで、Facebookで表示される5パターンのOGP画像が作成され、それぞれどの様に表示されるのかを一度に確認することができます。

結果を見て、見切れているところなどデザインを調整していけば適切なOGP画像を作成することができますよ。

OGP画像の推奨画像サイズ(1200 x 630 px)も記載されているので、作成する際サイズに迷うこともなく助かりますね!

 

まとめ

せっかくOGP画像を設定しても表示が崩れてしまっていては悲しいですよね。。
そういったことを防ぐため、OGP画像作成の際にはぜひ「OGP画像シミュレータ」をご活用くださいね。

-Webデザイン, Web制作, 制作お役立ち

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

グラデーションを作る時に役立つサイト5選

ギャラリーサイトを見ていると、グラデーションを使ったデザインをよく見かけますよね。 中でも、色の変化の仕方が綺麗なサイトだとつい見とれてしまいます。 私も綺麗なグラデーションを取り入れたデザインを作り …

PC内のフォントを一覧表示できる「wordmark.it」が便利!

色々なフォントをインストールしてあるのはいいけれど、選ぶ時がけっこう大変…という方も多いのでは? そこで今回は、フォント選びを楽にしてくれるwebサービス「wordmark.it」をご紹介 …

使える背景フリー素材サイト6選!

デザインの背景画像で迷ったときにチェックしたい背景素材サイトをまとめてみました! なんかデザインが物足りないな〜なんて時にも使えるサイトばかりなので、よかったら参考にしてみてください。 それでは、さっ …

Pinterestのボードを他の人と共有する方法

たくさんのアイディアの中から、良いと思ったものを作成したボードに保存・管理することができるPinterest。 これだけでも便利すぎて、デザイナーにとってなくてはならないWebサービスですが、更にその …

【Illustrator】ドキュメントをPDF化する時は「複製を保存」で行うのが安心

IllustratorドキュメントをPDF化する時、私は以下のようなミスをよくやってしまいます。 Illustratorで作ったものを、一旦クライアントに送ったりするために別名保存でPDF化 ↓ PD …