見出し画像

【配布】OGP画像のテンプレートと作成方法

最近OGP画像を作成する機会があり、
個人的にFigmaにてテンプレートを作成したのですがせっかくなので
配布します〜!✨

01.そもそもOGPとは?


「Open Graph protocol」の略称です。FacebookやTwitter、Google+、mixiなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像(サムネイル)を意図した通りに正しく表示させる仕組みです。

SNSでリンクをシェアする時に各SNS特有のサイズで表示されるサムネイいる画像のことです!


02.OGP画像の適切サイズは1200x630


OGPの適切サイズは

W1200xH630

とされています!

ちなみにOGP画像は実際にどのようなサイズ感で表示されるかシミュレートできるサイトもいくつか存在します。▼

例えばtwitterでは・・・

画像1

あれ、正方形がある・・・😇?


正方形があります(笑)

1200x630が推奨なのに、一部では600x600でトリミングされてしまうのです。

なのできちんとプロモーションするためにも

・今回配布するようなガイドを引いたテンプレートを使う
・サイズやセーフラインを遵守する

ことで

各SNSで表示したい画像部分を意図的に表示でき、予測通りのプロモーションができるのでおすすめです!


03. テンプレートと作成方法はこちら!

テンプレートはこちら▼

画像5

※こちらは独自調べで作成したものなので、作成したらシミュレーターで試したり、OGPの仕様が変わったら都度ご自身での確認推奨です。

以下、シミュレーターで試してみたものになります▼

Facebook

画像5

Twitter

画像5

はてブ・LINE

画像5

小さめの物は正方形が多いですね。

ご自身で作成される方へ▼

==================

01.アートボードサイズ
・W1200xH630

02.セーフライン(見せたい文字情報)
・W600xH600

03.素材配置推奨
・W169xH600をセーフラインのサイドに

04.必要情報はみ出し注意
・残り部分

==================

簡単になりますが、皆さんも適切なOGPで作成してみてください〜!


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

ありがとうございます!
14
株式会社ゆめみのUX/UIデザイナー (前職はゲームUIデザイナー/VR系) 情報収拾のために登録しましたが、発信を目標に頑張ります!

この記事が入っているマガジン

デザイン関連
デザイン関連
  • 4本
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。