OG 画像のレイアウト

スペック#

• 1200×630px を採用すれば全プラットフォームで安全。X の公式 2:1 との差は 2px で実用上問題ない。
• 形式は JPG / PNG / WebP。テキスト入りは PNG(JPEG の DCT 量子化でテキスト周辺がにじむ)。レガシーな scraper の WebP 対応は未確認。
• ファイルサイズの実用目標は 150〜500KB。
• og:image:width / og:image:height を明示し、絶対 URL(HTTPS)で指定する。URL を変えずに画像だけ差し替えると SNS 側のキャッシュが残るので、差し替え時はキャッシュバスティングする。

レイアウト原則#

• Safe zone は中央 960×504px(中心 80%)。全辺 40〜60px 以上のマージン。
• 下辺 60px には何も置かない。プラットフォームがドメイン名や再生ボタンを重ねることがある。
• 視覚階層は 3 層: 頂点 = 見出し、中層 = サポート情報(著者・カテゴリ・日付)、底辺 = ブランドアンカー(ロゴ・ドメイン)。
• タイポ: 見出し太字 48〜64px(日本語 15〜20 字)、サブ 28〜36px、補足 18〜24px。フォントは 2〜3 種まで、同一ファミリーのウェイト違いが統一感を出しやすい。テキストは 2〜3 行まで。
• コントラストは WCAG AA 4.5:1 以上、タイトルなど重要情報は 7:1 推奨。WCAG 1.4.3 の「images of text」は OG 画像にも当てはまる。
• テキストの占有面積は画像の 25% 未満が目安。

1
┌──────────────────────────────────────────┐ 1200×630
2
│  ┌────────────────────────────────────┐  │
3
│  │ Safe zone 960×504                  │  │
4
│  │ [ロゴ]                             │  │
5
│  │     タイトル(太字 48-64px)         │  │
6
│  │     サブタイトル(28-36px)          │  │
7
│  │ 著者 / 日付              [タグ]    │  │
8
│  └────────────────────────────────────┘  │
9
│        ↑ 下辺 60px はオーバーレイ領域     │
10
└──────────────────────────────────────────┘

典型レイアウト 5 パターン#

動的生成(@vercel/og)#

• @vercel/og(Satori + Resvg) が事実上の標準。HTML + CSS(Flexbox のサブセット)をサーバーで PNG 化する。Next.js App Router は app/ に opengraph-image.tsx を置くだけ。
• 既定出力は 1200×630px、CDN ヘッダー自動付与。バンドル上限 500KB(JSX + フォント + 画像)。フォントは TTF / OTF 推奨(WOFF より解析が速い)。

注意点:

• display: grid 非対応。Flexbox だけで組む。
• 既定フォントは Noto Sans のみ。カスタムフォントの埋め込み漏れでフォールバックが崩れる。
• タイトル長(英語 80 字 / 日本語 30 字超)で折り返しが破綻する。word-break / white-space を制御し、長いタイトルでテストする。
• OG 画像は prefers-color-scheme を参照できないので、ライトかダークのどちらかに固定して設計する。SNS のダーク UI との不調和を避けてダーク基調にする例が増えている。

ビジュアルトレンド(2025-2026、鮮度注意)#

• ノイズ / グレイン + 高彩度グラデーション(Acid Fade)。
• ブルータリズムの成熟(重量感のあるスタック組み、スプレッドシート風グリッド、黒白 + 単色アクセント)。
• タイポグラフィ主役(背景最小)。
• タイトル・著者・カテゴリを URL パラメータで渡す記事単位の動的生成。

検証ツール#

未確認(2026-05 時点)#

• X の現行アスペクト比(1.91:1 か 2:1 か)を公式一次情報で確認できていない(公式ドキュメントが 402 で取得不可)。
• Retina 向けに 1500×788px で生成する推奨は一次情報なし。
• prefers-color-scheme で切り替わる OG 画像を各プラットフォームがサポートする計画は不明。

関連#

• Core Web Vitals と画像最適化
• UI ビジュアルトレンド(2025-2026 スナップショット)
• HTML-in-Canvas API

更新履歴#

• 2026-05-08: 初版(ローカル調査ノート)
• 2026-10-17: Wiki へ移植、概念ページとして再構成。冒頭に定義を追加