皆さんは自身のメディアやポートフォリオ、サービスはお持ちでしょうか？
お持ちの方の中には、OGP画像について以下のような悩みを持った方は少なくないはずです。

🫠「埋め込み先のメディアによってプレビューに表示されるOGP画像のアスペクト比がバラバラなのに、１枚しか用意できないのマジ困る…」

私もまさに、その中の一人でした。
弊社サービスのMusubiteのOGP画像を用意するにあたり、マストで表示させたい情報があったのですが、メディアによって情報が切れてしまうという事象がありました。

そこで、埋め込み先として想定されるメディアのOGP画像のアスペクト比を調査し、figmaを用いてOGP画像を作成する際に利用するコンポーネントを作成しました。

今回対象としたメディア/SNSは

• note

• zenn

• qiita

• twitter

です。その他のメディアやSNSは、いくつかチェックをしたのですが、上記のサイトのデータである程度カバーできそうだったので、現時点では対象外としています。

調査

twitter

twitterでOGP情報を表示させるには、以下のようなメタタグをHTMLに追加する必要があります。

<meta name="twitter:card" content="summary"></meta>

カードの種類は４種類ありますが、今回はsummary_large_imageを利用することが決定していたので、OGP画像は

アスペクト比：1.91 : 1

で表示されます。

※ 公式の情報だと2:1と記載されているんですけど、実際に描画される画像を確認すると1.91:1なんですよね。。理由ご存知の方がいましたら教えてください！🙇‍♂️

note・Qiita・Zenn

それぞれのメディアのOGP画像のアスペクト比を以下のようにまとめました。

■ note

• デスクトップサイズ　22:15

• モバイルサイズ　20:23　もしくは 1:1

■ Qiita

• デスクトップサイズ　2:1

• モバイルサイズ　1:1

■ Qiita

• デスクトップサイズ　23:12

• モバイルサイズ　1:1

…見事にバラバラ😇
この全てに対応させるのであれば、20:23（noteのモバイル）の領域にコンテンツが収まるように作成する必要があります。

では、ここからfigmaでコンポーネントを作成します。

FigmaでOGPコンポーネントの作成

まずは完成したものはこちらです

今回はnote用のOGP画像のテンプレートを用意しました。ベースはTwitterのOGP画像のサイズ（1200x630）で作成しています。

レイヤーを順番に紹介すると
（最下層のレイヤー）
　↓
  OGPのベースのデザイン
　↓
  スロット（＝各OGPのコンポーネント）
　↓
  それぞれのメディアの表示サイズ確認用ビュー（＝上の例でいう赤い矩形の領域）
　↓
（最上層のレイヤー）

となります。表示サイズ確認用ビューはvariantで表示/非表示を切り替えられるようになっています。

slotを作成するメリット

slotとは、任意のコンポーネントに置き換えることを目的としたコンポーネントを指します。
以下に、slotのtemplateがあるので、興味のある方はご覧ください👋

メリット１：表示サイズ確認用ビューを常に最上部に置くことができる

実際のOGP画像に表示サイズ確認用ビューを上から重ねることで、各メディアでどの部分が表示されるかを確認することができます。この際、必ず表示サイズ確認用ビューが最上部に来るように、slotを利用することで、レイヤーの順番を固定させます。

メリット２：記事ごとのコンテンツもコンポーネント化することで変更が柔軟にできる

実際の動きを見てもらえたらと思うのですが、コンテンツをコンポーネント化する最大のメリットは、プレビュー（右側）を見ながら、コンテンツ（左）を調整できるということです。

表示サイズ確認用ビューが最上部にあるので、右だけで直接編集しようとするとなかなか厄介だと思うのですが、これによってストレスフリーに作業ができます。

また、作成をしながら確認をすることで、時間ロスが減って作業効率がググググググッと上がります。

最後に

もう少し汎用的に作れたらFigma Communityに公開してみようかな
もっとこうしたらいいのに！という要望があればいつでもご連絡ください😊

以上です👋