Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/attlabo-ssl/web/buchiko-web.com/wp-content/plugins/all-in-one-seo-pack/modules/aioseop_opengraph.php on line 844
OGP画像シュミレータ「og:image Simulator」のご紹介 | ぶちろぐ

アラサー主婦の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デザイナーが入社1ヶ月目を振り返る

制作会社でwebデザイナーとして働き始めて、早1ヶ月が経ちました。   せっかくなので今日は、この1ヶ月を振り返って感じたことや学んだことなどをまとめていきたいと思います。 では早速。   …

便利なパターンジェネレーター3選

今回は、WEBサイトを作る上で使えるパターンジェネレーターを3つご紹介します。 手間をかけずに簡単にパターンを作成できるので、とても便利で助かりますよ〜!   便利なパターンジェネレーター3 …

ゲーム感覚でベジェ曲線を練習できる「The Bezier Game」

イラストレーターの特徴とも言えるベジェ曲線について、「難しい」「上手く描けない」と思われている方は多いと思います。 私自身、まだまだベジェ曲線を使いこなせていなくて、苦手意識がすごくあります…。 そん …

【Photoshop】人物や物など不要なものを消す方法(コンテンツに応じた塗りつぶし)

今回は、Photoshopで人物や物など不要なものを消す方法についてご紹介します。 様々な方法がありますが、ご紹介するのはその中でも「コンテンツに応じた塗りつぶし」を使った方法です!   「 …

パス編集可能なフリーアイコン素材サイト「ICON BOX」

みなさんは、ICON BOXというアイコン素材サイトをご存知ですか? 細いラインを使用したお洒落〜なアイコンがたくさんあるサイトなのですが、なんとどれもパスの編集が可能なんです! フリーのアイコン素材 …