アラサー主婦の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デザイナー必須!ブルーライトカットメガネを着用しよう!

Webデザインのお仕事をしていると、長時間のパソコン作業で、目の疲れが酷くありませんか? 目がしょぼしょぼして、酷いときには頭痛までしたり…。   私も、1日8時間とか長い時間パソコンと睨 …

【Illustrator】台形を作る方法

みなさんこんにちは、ぶちこです。 今日は、Illustratorで台形を作る方法について、簡単にですがご紹介します! 制作の手順は以下の通りです。   1.長方形ツールで長方形を描き、選択し …

Macでバラバラに表示されているアイコンをきちっと整列させる方法

フォルダ内のアイコンがぐちゃぐちゃに散らばってしまうことは、Macユーザーなら良くあるのではないでしょうか。 バラバラに表示されたままでは作業もしずらく、ストレスですよね…。 そこで今回は、アイコンを …

コーディング時に使えるコピペサイト「copypet」

今回はコーディングで困った時や、時間を短縮したい時に使えるコピペサイト「copypet」をご紹介します。 パーツや装飾などの指定できるスタイルって、本当にたくさんあって全て覚えるのは難しいと思いますが …