chongdashu/cc-skills

OG Image Creator

コードベースを理解し、Playwrightと既存コンポーネントを使って各ルートに文脈に合ったOpen Graph画像を生成することで、本物のブランドイメージを備えたOG画像を作成します。

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

OG画像を生成する前に、以下を確認してください:

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

コア原則:

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

ワークフロー

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を使用してコンポーネントを画像にレンダリング
• ブランドカラー、フォント、アセットを適用
• プレースホルダーではなく、実際のページメタデータを注入

技術的アプローチ:

1. ブランドスタイルを含む最小限のHTMLテンプレートを作成
2. 各ルートに対して、ページ固有のマークアップを生成
3. Playwrightを使用して1200x630でスクリーンショットを取得
4. public/og/ または適切な静的ディレクトリに保存
5. ページメタデータを更新して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 Image Generation（@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画像を1つずつ手動で作成しない

• なぜ悪いか: スケーラブルではなく、一貫性を保つのが難しい
• 改善策: 生成プロセスをスクリプト化して全ルートを処理

バリエーションの指針

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

変化させるべき要素:

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

避けるべき収束:

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

文脈がバリエーションを決める:

• 技術ドキュメント → クリーン、整理された、アイコンベース
• マーケティングランディング → 大胆、カラフル、価値重視
• ブログ記事 → 読み手に優しい、著者/日付の文脈
• プロダクトページ → ビジュアルプロダクト重視

技術要件

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

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画像を作成できます。