OG画像生成ツール

コードベースを理解した上で、各ルートにコンテキストに適したOpen Graph画像を、Playwrightと既存コンポーネントを使用して生成します。

哲学：テンプレートより本物を

OG画像を生成する前に確認すべきこと:

このサイトのブランドアイデンティティ（色、フォント、ロゴ、デザイン言語）は？
どのルート/ページが存在し、それぞれの目的は？
一貫性のために再利用できるコンポーネントやアセットは？
ページタイプごとに異なるビジュアル処理が必要か？

基本原則:

生成前に調査: コードベースの構造、ルーティング、ブランドを理解してから作成する
テンプレートより本物: 汎用のソーシャルカードテンプレートではなく、実際のブランドカラー、フォント、コンポーネントを使用する
コンテキストを考慮したデザイン: ランディングページ、記事、商品、ドキュメントでは異なるビジュアルアプローチが必要
スマートな自動化: ルートを自動検出しブランド情報を抽出するが、ユーザーによるカスタマイズも可能にする

ワークフロー

1. 発見と分析

ルート発見:

プロジェクト構造を分析してフレームワーク（Next.js、Astro、Reactなど）を特定
フレームワークの慣例に基づいてルートを自動検出:
- Next.js: app/*/page.tsx または pages/*.tsx
- Astro: src/pages/*.astro
- React Router: ルート設定を分析
ページからルートメタデータ（タイトル、説明）を抽出
ページタイプ（ランディング、記事、商品、アバウトなど）を分類

ブランド抽出:

ロゴ/アイコンファイルを検出（SVG優先）
CSS/Tailwind設定からカラーパレットを抽出
スタイルシートや設定からプライマリフォントを特定
既存コンポーネントからデザインパターンをキャプチャ

自動発見には scripts/analyze_codebase.py を使用します。

2. デザイン戦略

ページタイプごとに適切なレイアウトを決定:

ランディングページ: 大胆、ミニマル、バリュープロポジションを強調
記事/ブログポスト: タイトル＋抜粋、必要に応じて日付/著者
商品ページ: 商品名、主要機能、可能ならビジュアル
ドキュメント: トピック＋説明、整理された構造的な印象
アバウト/企業: ブランド重視、プロフェッショナル

レイアウトの原則:

十分な余白（ごちゃごちゃさせない）
共有時の可読性を高める高いコントラスト
ブランドカラーはアクセントとして使用し、過剰にしない
サイトに合ったタイポグラフィ階層
1200x630px（標準OGサイズ）

3. 画像生成

コンポーネントベースの生成:

一貫性のために可能な限りReactコンポーネントを再利用
Playwrightを使用してコンポーネントを画像にレンダリング
ブランドカラー、フォント、アセットを適用
プレースホルダーではなく実際のページメタデータを挿入

技術的アプローチ:

ブランドスタイルを含む最小限のHTMLテンプレートを作成
各ルートに対してページ固有のマークアップを生成
Playwrightを使用して1200x630のスクリーンショットをキャプチャ
public/og/または適切な静的ディレクトリに保存
OG画像を参照するようにページメタデータを更新

自動化には scripts/generate_og_images.py を使用します。

4. 検証と最適化

HTML内のOG画像メタデータを検証
OGプレビューツール（opengraph.xyz、LinkedInインスペクター）でテスト
ファイルサイズが適切であることを確認（200KB以下推奨）
異なるスケールでの画像の見え方を確認

フレームワーク別ガイダンス

Next.js

App Router:

// app/page.tsx
export const metadata = {
  openGraph: {
    images: ['/og/home.png'],
  },
}

Pages Router:

// pages/index.tsx
<Head>
  <meta property="og:image" content="/og/home.png" />
</Head>

動的OG画像: 動的コンテンツにはNext.js OG画像生成（@vercel/og）を検討するが、ブランドの一貫性には静的生成を使用する。

Astro

---
// src/pages/index.astro
const ogImage = '/og/home.png';
---
<head>
  <meta property="og:image" content={ogImage} />
</head>

React SPA

public/index.htmlにOGタグを追加するか、react-helmetを使用:

<Helmet>
  <meta property="og:image" content="/og/home.png" />
</Helmet>

避けるべきアンチパターン

❌ 汎用テンプレート: サイトのブランドを無視した既製のソーシャルカードテンプレートを使用しない

なぜ悪いか: サイトとソーシャル共有体験の間に乖離が生じる
改善策: 実際のブランドカラーやフォントを抽出し、一貫して使用する

❌ ワンサイズフィットオール: すべてのページタイプに同じOG画像デザインを使わない

なぜ悪いか: コンテキストに適した表現の機会を逃す
改善策: ランディング、記事、商品などで異なるレイアウトを使用する

❌ プレースホルダーコンテンツ: 「Lorem ipsum」や汎用的なテキストを使わない

なぜ悪いか: プレビュー画像の目的を損なう
改善策: メタデータから実際のページタイトルと説明を使用する

❌ 過密レイアウト: テキスト、画像、複雑なレイアウトを詰め込みすぎない

なぜ悪いか: ソーシャルフィードで縮小表示されたときに判読不能になる
改善策: 十分な余白とともに1〜2の主要要素に集中する

❌ コンポーネントの無視: 既存コンポーネントがあるのにOG画像をゼロから作成しない

なぜ悪いか: サイトとのビジュアル一貫性が崩れる
改善策: コンポーネントからボタンスタイル、カードレイアウト、タイポグラフィを再利用する

❌ 手動生成: OG画像を一つずつ手動で作成しない

なぜ悪いか: スケーラブルでなく、一貫性の維持が困難
改善策: 生成プロセスをスクリプト化してすべてのルートを処理する

バリエーションガイダンス

重要: OG画像はページコンテキストに応じて変化させるべきであり、単一のデザインに収束してはいけません。

変化させるべき要素:

レイアウト: 中央揃え vs 左揃え、単一カラム vs 分割カラム、テキスト重視 vs ビジュアル重視
色の強調: プライマリブランドカラー vs ニュートラル、グラデーション vs ソリッド
コンテンツ階層: 大きなタイトル vs バランスの取れたタイトル＋説明
ビジュアル要素: ロゴのサイズ/配置、装飾要素、アイコン
タイポグラフィ: サイズ比率、ウェイト配分、フォントの組み合わせ

収束を避けるべきもの:

すべてで同じグラデーション背景
同一の「タイトル＋ロゴ」レイアウト
単一のフォントサイズ比率
固定のロゴ位置

コンテキストがバリエーションを生む:

技術ドキュメント → クリーン、整理された、アイコンベース
マーケティングランディング → 大胆、カラフル、価値重視
ブログ記事 → 読みやすい、著者/日付のコンテキスト
商品ページ → ビジュアル重視の商品強調

技術要件

依存関係（必要に応じてインストール）:

npm install playwright sharp
# または
pip install playwright Pillow

Playwrightのセットアップ:

playwright install chromium

ファイル構造:

project/
├── public/og/          # 生成されたOG画像
│   ├── home.png
│   ├── about.png
│   └── ...
└── scripts/            # 生成スクリプト
    ├── analyze_codebase.py
    └── generate_og_images.py

忘れずに

OG画像はブランドの延長であり、汎用のソーシャルカードではありません。

コードベースを調査してデザイン言語を理解しましょう。ブランドアイデンティティを抽出しましょう。実際のコンポーネントとコンテンツを使用しましょう。サイトに自然に感じられる、コンテキストに適した画像を作成しましょう。

誰かがあなたのページを共有したとき、OG画像はテンプレートを貼り付けたものではなく、自然なプレビューのように感じられるべきです。

あなたは、サイトのアイデンティティを損なうのではなく強化する、洗練されブランドに沿ったOG画像を作成することができます。

OG画像生成スキル