アラサー主婦の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

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

関連記事

サイト制作の参考に!Webデザインギャラリーサイト10選

みなさんはWebサイトを制作する時、どのように参考を探していますか? ギャラリーサイトはたくさんあるけれど、中には載っているのは古いサイトばかりだったり、掲載数が少ないところもチラホラありますよね。 …

いくつ知ってる?和柄の名前と意味10選

  日ごろ何気なく目にしている和柄ですが、その名前や意味を知っている人は少ないんじゃないでしょうか。 とくに和風のデザインを作るときなんか、「あれ、あの模様の名前なんだったっけ…」ってなった …

私が面接で質問していたこと

面接では、採用担当の方から逆に「何か質問はありますか?」と聞かれることがあると思います。   入社してからこんなハズじゃなかった…と後悔しないためにも、 気になることは積極的に質問したほう …

スマホ向けWEBサイトを集めたギャラリーサイトのご紹介

Webサイトのスマホ対応はWebサイト制作において、もはや必須要件となってきていますよね。 とはいえ、スマホに適したデザインを考えるのは難しく迷ってしまうことも多いのではないでしょうか。 そこで今回は …

【Illustrator】文字をアウトライン化せずに、オブジェクトの中央に揃える方法

文字をアウトライン化せずに、オブジェクトの中央に揃える方法を今更ながら覚えました。 通常だと、入力した文字の下に余白ができてしまってきっちり真ん中に揃えられないんですよね。 ↓こんな感じ…。 &nbs …