og-image

このスキルは、ソーシャルメディアで共有するためのプロフェッショナルな Open Graph 画像を作成します。既存のコードベースを分析してプロジェクトのデザインシステムに合わせ、専用の OG 画像ページを生成してスクリーンショットを撮影し、必要なすべてのメタタグを設定します。

ワークフロー

フェーズ 1：コードベースの分析

プロジェクトを調査し、以下を把握します。

1. フレームワークの検出

   • package.json を確認し、Next.js、Vite、Astro、Remix などを特定します。
   • ルーティングパターン（ファイルベース、設定ベース）を特定します。
   • /og-image ルートの作成場所を確認します。

2. デザインシステムの調査

   • カラーパレットを確認するため、Tailwind の設定ファイル（tailwind.config.js/ts）を探します。
   • グローバルスタイルの CSS 変数（:root の定義）を確認します。
   • 既存のカラー トークン、フォントファミリー、スペーシングスケールを確認します。
   • テーマまたはデザイントークンのファイルを探します。

3. ブランドアセット

   • /public、/assets、/src/assets 内のロゴファイルを探します。
   • ファビコンやアプリアイコンを確認します。
   • ブランド要素のある既存のヒーローセクションやランディングページを探します。

4. 製品情報

   • package.json、ランディングページ、またはメタタグから製品名を抽出します。
   • 既存のページからキャッチフレーズや説明を確認します。
   • 現在の設定を把握するため、既存の OG／メタ設定を確認します。

5. 既存のコンポーネント

   • 再利用できる UI コンポーネントを探します。
   • ガラス効果、グラデーション、特徴的な視覚パターンがあるか確認します。
   • 全体的なデザイン（ダークモード、ライトモードなど）を特定します。

フェーズ 2：OG 画像ページの作成

/og-image（またはフレームワークに相当するルート）に専用のルートを作成します。

ページの要件：

• 固定サイズ：幅 1200px × 高さ 630px ちょうど
• 自己完結したスタイル（正しく表示されない可能性がある外部依存関係を使用しない）
• CSS で開発ツールのインジケーターを非表示にします。

[data-nextjs-dialog-overlay],
[data-nextjs-dialog],
nextjs-portal,
#__next-build-indicator {
  display: none !important;
}

コンテンツ構成：

• 製品のロゴ／アイコン（目立つ位置に配置）
• 独自性のあるタイポグラフィを使った製品名
• キャッチフレーズまたは価値提案
• 製品を視覚的に表現する要素（モックアップ、イラスト、抽象的なデザインなど）
• 下部に URL／ドメイン
• プロジェクトのデザインに合った背景（グラデーション、パターンなど）

デザイン原則：

• プロジェクトで既に使用しているカラーパレットを使います。
• メインサイトのタイポグラフィに合わせます。
• 製品を表現する視覚要素を含めます。
• 小さなサイズでも読みやすいよう、高いコントラストを確保します（ソーシャルメディアのプレビューは小さく表示されることがよくあります）。
• 画像を幅約 400px に縮小したときもテキストが読めることを確認します。

フェーズ 3：スクリーンショットの撮影

Playwright を使って OG 画像を撮影します。

1. OG 画像ページに移動します（通常は http://localhost:3000/og-image など）。
2. ビューポートを 1200×630 ちょうどに変更します。
3. アニメーションの完了やフォントの読み込みを待ちます。
4. PNG のスクリーンショットを撮影します。
5. プロジェクトの public フォルダーに og-image.png として保存します。

Playwright コマンド：

browser_navigate: http://localhost:{port}/og-image
browser_resize: width=1200, height=630
browser_take_screenshot: og-image.png (then copy to /public)

フェーズ 4：メタタグの設定

プロジェクトのメタタグ設定を確認して更新します。Next.js App Router の場合は layout.tsx を更新します。他のフレームワークの場合は、適切な場所を更新します。

必須のメタタグ：

// Open Graph
openGraph: {
  title: "Product Name - Short Description",
  description: "Compelling description for social sharing",
  url: "https://yourdomain.com",
  siteName: "Product Name",
  locale: "en_US",
  type: "website",
  images: [{
    url: "/og-image.png",  // or absolute URL
    width: 1200,
    height: 630,
    alt: "Descriptive alt text for accessibility",
    type: "image/png",
  }],
},

// Twitter/X
twitter: {
  card: "summary_large_image",
  title: "Product Name - Short Description",
  description: "Compelling description for Twitter",
  creator: "@handle",  // if provided
  images: [{
    url: "/og-image.png",
    width: 1200,
    height: 630,
    alt: "Descriptive alt text",
  }],
},

// Additional
other: {
  "theme-color": "#000000",  // match brand color
  "msapplication-TileColor": "#000000",
},

appleWebApp: {
  title: "Product Name",
  statusBarStyle: "black-translucent",
  capable: true,
},

相対 URL が正しく解決されるよう、metadataBase が設定されていることを確認します。

metadataBase: new URL("https://yourdomain.com"),

フェーズ 5：検証と出力

1. 画像が public パスに存在することを確認します。

2. HTML にメタタグが正しく出力されていることを確認します。

3. キャッシュを更新する方法を案内します。

   • Facebook／LinkedIn：https://developers.facebook.com/tools/debug/
   • Twitter／X：https://cards-dev.twitter.com/validator
   • LinkedIn：https://www.linkedin.com/post-inspector/

4. 概要の出力：

   • 生成した OG 画像のパス
   • OG 画像ページをローカルでプレビューする URL
   • 追加・更新したメタタグの一覧
   • ソーシャルメディアのプレビュー確認ツールへのリンク

不足している情報の確認

コードベースから判断できない場合に限り、ユーザーに質問してください。

1. ドメイン／URL - 既存の設定に見つからない場合は、「本番環境のドメインを教えてください。（例：https://example.com）」と質問してください。

2. Twitter／X のハンドル名 - twitter:creator を追加する場合は、「クレジット表記に使用する Twitter／X のハンドル名を教えてください。（任意）」と質問してください。

3. タグライン - 明確なタグラインが見つからない場合は、「ソーシャルメディアのプレビューに使用する短いタグラインを教えてください。（1 文）」と質問してください。

フレームワーク固有の注意事項

Next.js App Router：

• /app/og-image/page.tsx を作成します
• /app/layout.tsx のメタデータを更新します
• OG ページには 'use client' ディレクティブを使用します

Next.js Pages Router：

• /pages/og-image.tsx を作成します
• _app.tsx を更新するか、next-seo を使用します

Vite/React：

• ルーター設定でルートを作成します
• index.html のメタタグを更新するか、react-helmet を使用します

Astro：

• /src/pages/og-image.astro を作成します
• メタタグを含めるようにレイアウトを更新します

品質チェックリスト

完了前に、以下を確認してください。

• OG 画像が 1200×630 で正しく表示される
• スクリーンショットに開発ツールの表示が含まれていない
• 画像が public フォルダーに保存されている
• メタタグに絶対 URL を指定できる og:image が含まれている
• メタタグに twitter:card として summary_large_image が含まれている
• メタタグにサイズ（width/height）が含まれている
• メタタグにアクセシビリティ対応の alt テキストが含まれている
• ブランドに合わせて theme-color が設定されている
• キャッシュ回避用 URL についてユーザーに伝えている

---

クレジットと帰属表示

このスキルは、 Stevy Smith による素晴らしい成果をもとにしています。

元のリポジトリ：https://github.com/stevysmith/og-image-skill

このスキル集の形成に役立った、Stevy Smith による寛大なオープンソースへの貢献に、心より感謝します。 webconsulting.at がこのスキル集向けに調整しました