OG画像ジェネレーター
ソーシャル共有用のOpen Graphプレビュー画像を生成します。
クリックされるソーシャル共有画像をデザインする
概要
Twitter/X・Facebook・LinkedIn・Slack・Discordでリンクを共有すると、プレビューカードがOpen Graph画像(og:image) — タイトルの上に出る大きな画像 — を取得します。よくできたOG画像はクリック率を大きく高め、無い・壊れた画像はリンクを信用できなく見せます。標準サイズは1200×630ピクセルです。このジェネレーターでタイトル・背景・アクセント色のブランド共有画像を構成し、サイトのog:imageタグへすぐ組み込める形で書き出せます。
使い方（ステップ）
- 1
タイトルとスタイルを入力
見出しを入力し背景・アクセント色を選びます。プレビューが実際の1200×630比率で更新されます。
- 2
PNGを書き出す
レンダリングされた画像を完全なOpen Graph解像度でダウンロードします。
- 3
メタタグに組み込む
PNGをホスティングし、ページの<head>に<meta property="og:image" content="...">と<meta name="twitter:image">を追加します。
仕組み
タイトル・サブタイトル・背景(色またはグラデーション)・アクセントを1200×630のライブプレビューで構成します。ツールがデザインを正確なOGサイズのキャンバスにレンダリングし、PNGとして書き出します。そのPNGをホスティングしページのOpen Graph・Twitter Cardメタタグで参照すると、SNSはリンク初回共有時に画像を取得しプレビューカードにキャッシュします。生成はブラウザ内でローカル処理されます。
こんなときに使う
すべてのブログ記事に汎用ロゴでなく独自のブランド共有カードを付けるとき。製品・機能のローンチ告知の作成。Slack/Discordでイベント・ウェビナーのリンクを洗練して見せるとき。マーケサイト全体の共有画像の標準化。クリック率改善のための共有カード見出しのA/Bテスト。
よくある質問
1200×630ピクセル(1.91:1比率)がFacebook・LinkedIn・Twitter大カードの普遍的標準です。一部プラットフォームは端を少し切るため、重要なテキストは端から離してください。