Web Asset Generator

ロゴやテキストスローガンから専門的なウェブアセットを生成します。ファビコン、アプリアイコン、ソーシャルメディアメタ画像を含みます。

クイックスタート

ユーザーがウェブアセットをリクエストしたときは：

1. 必要に応じて AskUserQuestion ツールで詳細を確認:

   • どの種類のアセットが必要か（ファビコン、アプリアイコン、ソーシャル画像、またはすべて）
   • ソース素材があるか（ロゴ画像かテキスト/スローガン）
   • テキストベースの画像：色の好み

2. ソース素材を確認:

   • ユーザーが画像をアップロードした場合：それをソースとして使用
   • ユーザーがテキスト/スローガンを提供した場合：テキストベース画像を生成

3. 適切なスクリプトを実行:

   • ファビコン/アイコン：scripts/generate_favicons.py
   • ソーシャルメディア画像：scripts/generate_og_images.py

4. 生成されたアセットと HTML タグをユーザーに提供

インタラクティブな質問の使用

重要：プレーンテキストの質問ではなく、常に AskUserQuestion ツールを使用して要件を収集してください。これはより良いユーザー体験を提供します。

AskUserQuestion を使用する理由

✅ ビジュアル UI：ユーザーは選択肢を入力の代わりにクリック可能なチップ/タグとして見える ✅ 高速：回答を入力する代わりにクリックして選択 ✅ 明確：各オプションの説明が意味を説明 ✅ エラーが少ない：フリーテキスト入力からのタイプミスや誤解がない ✅ プロフェッショナル：最新の Claude Code 体験と一致

例フロー

ユーザーリクエスト：「ウェブアセットが必要です」

Claude が AskUserQuestion を使用（プレーンテキストではなく）：

どのタイプのウェブアセットが必要ですか？                    [アセットタイプ]
○ ファビコンのみ - ブラウザタブアイコン (16x16, 32x32, 96x96) と favicon.ico
○ アプリアイコンのみ - iOS/Android 用 PWA アイコン (180x180, 192x192, 512x512)
○ ソーシャル画像のみ - Facebook、Twitter、WhatsApp、LinkedIn 用 Open Graph 画像
● すべて - 完全パッケージ：ファビコン + アプリアイコン + ソーシャル画像

ユーザーがクリック → Claude は何を生成するかすぐに知る

質問パターン

以下は様々なシナリオで使用する標準的な質問パターンです。構造をコピーして必要に応じて適応させてください。

質問パターン 1：アセットタイプの選択

ユーザーのリクエストがあいまいな場合（例：「ウェブアセットを作成してください」、「アイコンが必要です」）、AskUserQuestion を使用します：

質問：「どのタイプのウェブアセットが必要ですか？」 ヘッダー：「アセットタイプ」 オプション：

• 「ファビコンのみ」 - 説明：「ブラウザタブアイコン (16x16, 32x32, 96x96) と favicon.ico」
• 「アプリアイコンのみ」 - 説明：「iOS/Android 用 PWA アイコン (180x180, 192x192, 512x512)」
• 「ソーシャル画像のみ」 - 説明：「Facebook、Twitter、WhatsApp、LinkedIn 用 Open Graph 画像」
• 「すべて」 - 説明：「完全パッケージ：ファビコン + アプリアイコン + ソーシャル画像」

質問パターン 2：ソース素材

アセットタイプは決まったがソースが不明な場合：

質問：「どのソース素材を提供しますか？」 ヘッダー：「ソース」 オプション：

• 「ロゴ画像」 - 説明：「ロゴ/画像ファイルを持っているまたはアップロードします」
• 「絵文字」 - 説明：「絵文字文字からファビコンを生成」
• 「テキスト/スローガン」 - 説明：「テキストのみから画像を作成」
• 「ロゴ + テキスト」 - 説明：「ロゴとテキストオーバーレイを組み合わせ（ソーシャル画像用）」

質問パターン 3：プラットフォーム選択（ソーシャル画像用）

ユーザーがソーシャル画像をリクエストしているがプラットフォームを指定していない場合：

質問：「どのソーシャルメディアプラットフォーム用の画像が必要ですか？」 ヘッダー：「プラットフォーム」 複数選択：true オプション：

• 「Facebook/WhatsApp/LinkedIn」 - 説明：「標準的な 1200x630 Open Graph フォーマット」
• 「Twitter」 - 説明：「1200x675（16:9 比率）ラージイメージカード用」
• 「すべてのプラットフォーム」 - 説明：「スクエアフォーマットを含むすべてのバリエーションを生成」

質問パターン 4：色の設定（テキストベース画像用）

テキストベースのソーシャル画像を生成する場合：

質問：「ソーシャル画像にはどの色を使用しますか？」 ヘッダー：「色」 オプション：

• 「色を指定します」 - 説明：「ブランドカラーの正確な 16 進コードを指定します」
• 「デフォルトテーマ」 - 説明：「デフォルトの紫の背景（#4F46E5）と白いテキストを使用」
• 「ロゴから抽出」 - 説明：「アップロードされたロゴからブランドカラーを自動検出」
• 「カスタムグラデーション」 - 説明：「グラデーション色を選択します」

質問パターン 5：アイコンタイプの明確化

ユーザーが「アイコンを作成してください」または「アイコンを生成してください」と言う場合（あいまい）：

質問：「どのような種類のアイコンが必要ですか？」 ヘッダー：「アイコンタイプ」 オプション：

• 「ウェブサイトファビコン」 - 説明：「小さいブラウザタブアイコン」
• 「アプリアイコン（PWA）」 - 説明：「モバイルホームスクリーンアイコン」
• 「両方」 - 説明：「ファビコン + アプリアイコン」

質問パターン 6：絵文字の選択

ユーザーが「絵文字」をソース素材として選択した場合：

ステップ 1：プロジェクトの説明を求める（フリーテキスト）：

• 「ウェブサイト/アプリは何についてですか？」
• これを使用して絵文字の提案を生成

ステップ 2：AskUserQuestion を使用して、提案された 4 つの絵文字を表示：

質問：「どの絵文字があなたのプロジェクトを最もよく表していますか？」 ヘッダー：「絵文字」 オプション：（プロジェクト説明に基づいて動的に生成）

• 例：「🚀 ロケット」 - 説明：「ロケット、発射、スタートアップ、宇宙」
• 例：「☕ コーヒー」 - 説明：「コーヒー、カフェ、飲料、ドリンク」
• 例：「💻 ラップトップ」 - 説明：「コンピュータ、ラップトップ、コード、開発」
• 例：「🎨 アート」 - 説明：「アート、デザイン、クリエイティブ、ペイント」

実装：

# 提案を取得
python scripts/generate_favicons.py --suggest "coffee shop" output/ all

# 選択された絵文字で生成
python scripts/generate_favicons.py --emoji "☕" output/ all

オプション：アプリアイコンの背景色について質問：

質問：「アプリアイコンに背景色が必要ですか？」 ヘッダー：「背景」 オプション：

• 「透明」 - 説明：「背景なし（ファビコンのみ）」
• 「白」 - 説明：「白い背景（アプリアイコンに推奨）」
• 「カスタムカラー」 - 説明：「色を指定します」

質問パターン 7：コード統合の提案

使用する場合：アセットを生成し、HTML タグをユーザーに表示した後

質問：「これらの HTML タグをあなたのコードベースに追加しましょうか？」 ヘッダー：「統合」 オプション：

• 「はい、自動検出してください」 - 説明：「HTML/フレームワークファイルを自動的に見つけて更新」
• 「はい、場所を教えます」 - 説明：「更新するファイルを指定します」
• 「いいえ、手動で行います」 - 説明：「コードのみを表示、自分で追加します」

ユーザーが「はい、自動検出してください」を選択した場合：

1. フレームワーク設定ファイルを検索（next.config.js、astro.config.mjs など）
2. フレームワークタイプを検出
3. 適切なターゲットファイルを見つける（layout.tsx、index.html など）
4. 検出されたファイルを表示し、確認を求める
5. 提案された変更の差分を表示
6. ユーザーが確認した場合、タグを挿入

ユーザーが「はい、場所を教えます」を選択した場合：

1. ユーザーにファイルパスを求める
2. ファイルの存在を確認
3. 提案された変更の差分を表示
4. ユーザーが確認した場合、タグを挿入

フレームワーク検出の優先順位：

• Next.js：next.config.js を探す、app/layout.tsx または pages/_app.tsx を更新
• Astro：astro.config.mjs を探す、src/layouts/ のレイアウトファイルを更新
• SvelteKit：svelte.config.js を探す、src/app.html を更新
• Vue/Nuxt：nuxt.config.js を探す、app.vue または nuxt.config.ts を更新
• プレーン HTML：index.html または *.html ファイルを探す
• Gatsby：gatsby-config.js を探す、gatsby-ssr.js を更新

質問パターン 8：テストリンクの提案

使用する場合：コード統合後（またはユーザーが統合を断った場合）

質問：「今すぐメタタグをテストしますか？」 ヘッダー：「テスト」 オプション：

• 「Facebook Debugger」 - 説明：「Facebook で Open Graph タグをテスト」
• 「Twitter Card Validator」 - 説明：「Twitter カードの外観をテスト」
• 「LinkedIn Post Inspector」 - 説明：「LinkedIn 共有プレビューをテスト」
• 「すべてのテストツール」 - 説明：「すべてのバリデーターへのリンクを取得」
• 「いいえ、スキップします」 - 説明：「後で自分でテストします」

適切なテスト URL を提供：

• Facebook：https://developers.facebook.com/tools/debug/
• Twitter：https://cards-dev.twitter.com/validator
• LinkedIn：https://www.linkedin.com/post-inspector/
• 汎用 OG バリデーター：https://www.opengraph.xyz/

ワークフロー

ロゴからファビコンとアプリアイコンを生成

ユーザーがロゴ画像を持っている場合：

python scripts/generate_favicons.py <source_image> <output_dir> [icon_type]

引数：

• source_image：ロゴ/画像ファイルのパス
• output_dir：生成されたアイコンを保存する場所
• icon_type：オプション - 'favicon'、'app'、または 'all'（デフォルト：'all'）

例：

python scripts/generate_favicons.py /mnt/user-data/uploads/logo.png /home/claude/output all

生成されるもの：

• favicon-16x16.png、favicon-32x32.png、favicon-96x96.png
• favicon.ico（マルチ解像度）
• apple-touch-icon.png（180x180）
• android-chrome-192x192.png、android-chrome-512x512.png

絵文字からファビコンとアプリアイコンを生成

新機能：スマートな提案付きで絵文字文字からファビコンを作成できます！

ステップ 1：絵文字の提案を取得

ユーザーが絵文字ベースのアイコンを望んでいる場合、まず提案を取得します：

python scripts/generate_favicons.py --suggest "coffee shop" /home/claude/output all

説明に基づいて 4 つの絵文字の提案が返されます：

1. ☕  コーヒー               - コーヒー、カフェ、飲料
2. 🌐  グローブ                - ウェブ、ウェブサイト、グローバル
3. 🏪  ストア                - ショップ、ストア、リテール
4. 🛒  カート                 - ショッピング、カート、eコマース

ステップ 2：選択された絵文字からアイコンを生成

python scripts/generate_favicons.py --emoji "☕" <output_dir> [icon_type] [--emoji-bg COLOR]

引数：

• --emoji：使用する絵文字文字
• output_dir：生成されたアイコンを保存する場所
• icon_type：オプション - 'favicon'、'app'、または 'all'（デフォルト：'all'）
• --emoji-bg：オプションの背景色（デフォルト：ファビコンは透明、アプリアイコンは白）

例：

# 基本的な絵文字ファビコン（透明背景）
python scripts/generate_favicons.py --emoji "🚀" /home/claude/output favicon

# アプリアイコン用のカスタム背景付き絵文字
python scripts/generate_favicons.py --emoji "☕" --emoji-bg "#F5DEB3" /home/claude/output all

# 白い背景付きの完全セット
python scripts/generate_favicons.py --emoji "💻" --emoji-bg "white" /home/claude/output all

生成されるものはロゴベースの生成と同じ：

• すべての標準的なファビコンサイズ（16x16、32x32、96x96）
• favicon.ico
• アプリアイコンサイズ（180x180、192x192、512x512）

注：pilmoji ライブラリが必要です：pip install pilmoji

ロゴからソーシャルメディアメタ画像を生成

ユーザーがロゴを持っており、Open Graph 画像が必要な場合：

python scripts/generate_og_images.py <output_dir> --image <source_image>

例：

python scripts/generate_og_images.py /home/claude/output --image /mnt/user-data/uploads/logo.png

生成されるもの：

• og-image.png（1200x630 - Facebook、WhatsApp、LinkedIn）
• twitter-image.png（1200x675 - Twitter）
• og-square.png（1200x1200 - スクエアバリエーション）

テキストからソーシャルメディアメタ画像を生成

ユーザーがテキストスローガンまたはタグラインを提供する場合：

python scripts/generate_og_images.py <output_dir> --text "あなたのテキストここ" [options]

オプション：

• --logo <path>：テキストでロゴを含める
• --bg-color <color>：背景色（16 進数または名前、デフォルト：'#4F46E5'）
• --text-color <color>：テキストの色（デフォルト：'white'）

例：

python scripts/generate_og_images.py /home/claude/output \
  --text "AI であなたのビジネスを変革" \
  --logo /mnt/user-data/uploads/logo.png \
  --bg-color "#4F46E5"

すべてを生成

完全なパッケージを望むユーザー向け：

# ファビコンとアイコンを生成
python scripts/generate_favicons.py /mnt/user-data/uploads/logo.png /home/claude/output all

# ソーシャルメディア画像を生成
python scripts/generate_og_images.py /home/claude/output --image /mnt/user-data/uploads/logo.png

またはテキストベース：

# ロゴからファビコンを生成
python scripts/generate_favicons.py /mnt/user-data/uploads/logo.png /home/claude/output all

# テキスト + ロゴを含むソーシャルメディア画像を生成
python scripts/generate_og_images.py /home/claude/output \
  --text "あなたのタグラインここ" \
  --logo /mnt/user-data/uploads/logo.png

ユーザーへのアセット配信

アセット生成後、次のワークフローに従います：

1. 出力ディレクトリに移動

cp /home/claude/output/* /mnt/user-data/outputs/

2. 生成された HTML タグを表示

スクリプトによって自動生成された HTML タグを表示します。

ファビコンの出力例：

<!-- Favicons -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">

Open Graph 画像の出力例：

<!-- Open Graph / Facebook -->
<meta property="og:image" content="/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="ここに説明を入力">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="/twitter-image.png">
<meta name="twitter:image:alt" content="ここに説明を入力">

3. コード統合を提案（AskUserQuestion パターン 7 を使用）

重要：常にユーザーに、生成されたタグをコードベースに追加するのを手伝うかどうかを質問してください。

質問：「これらの HTML タグをあなたのコードベースに追加しましょうか？」 ヘッダー：「統合」 オプション：

• 「はい、自動検出してください」
• 「はい、場所を教えます」
• 「いいえ、手動で行います」

ユーザーが「はい、自動検出してください」を選択した場合：

A. フレームワークを検出：

# フレームワーク設定ファイルを検索
find . -maxdepth 2 -name "next.config.js" -o -name "astro.config.mjs" -o -name "svelte.config.js" -o -name "nuxt.config.js" -o -name "gatsby-config.js"

# または package.json をチェック
grep -E "next|astro|nuxt|svelte|gatsby" package.json

B. フレームワークに基づいてターゲットファイルを見つける：

• Next.js（App Router）：app/layout.tsx または app/layout.js
• Next.js（Pages Router）：pages/_app.tsx または pages/_document.tsx
• Astro：src/layouts/*.astro（通常 BaseLayout.astro または Layout.astro）
• SvelteKit：src/app.html
• Vue/Nuxt：app.vue または nuxt.config.ts（head セクション）
• Gatsby：gatsby-ssr.js または src/components/seo.tsx
• プレーン HTML：index.html、public/index.html、または任意の *.html ファイル

C. ユーザーに確認：

AskUserQuestion を使用して検出されたファイルを確認：

質問：「[フレームワーク名] を見つけました。[file_path] を更新しましょうか？」
ヘッダー：「確認」
オプション：
- 「はい、このファイルを更新」
- 「いいえ、他のオプションを表示」
- 「キャンセル、手動で行います」

D. 差分を表示して挿入：

1. ターゲットファイルを読み込む
2. 挿入を準備（<head> または適切なセクションを見つける）
3. ユーザーに差分を表示
4. ユーザーが確認した場合、Edit ツールを使用してタグを挿入

フレームワーク固有の挿入例：

プレーン HTML 用（</head> の前に挿入）：

<head>
  <meta charset="UTF-8">
  <!-- ここにタグを挿入 -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  ...
</head>

Next.js App Router 用（メタデータエクスポートに追加）：

export const metadata = {
  icons: {
    icon: [
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
    ],
    apple: [
      { url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
    ],
  },
  openGraph: {
    images: ['/og-image.png'],
  },
  twitter: {
    card: 'summary_large_image',
    images: ['/twitter-image.png'],
  },
}

Astro 用（レイアウトファイルの <head> に挿入）：

<head>
  <meta charset="UTF-8">
  <!-- Favicons -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  ...
</head>

ユーザーが「はい、場所を教えます」を選択した場合：

1. ユーザーにファイルパスを求める
2. Read ツールを使用してファイルの存在を確認
3. タグが挿入される場所を表示
4. 差分を表示
5. ユーザーが確認した場合、挿入

ユーザーが「いいえ、手動で行います」を選択した場合：

簡潔な指示を提供：

• アセットファイルをウェブサイトの public/static ディレクトリに配置
• HTML の <head> セクションに HTML タグを追加
• プレースホルダー値（title、description、URL、alt テキスト）を更新

4. テストリンクを提案（AskUserQuestion パターン 8）

質問：「今すぐメタタグをテストしますか？」 ヘッダー：「テスト」 オプション：

• 「Facebook Debugger」
• 「Twitter Card Validator」
• 「LinkedIn Post Inspector」
• 「すべてのテストツール」
• 「いいえ、スキップします」

テスト URL を提供：

• Facebook Sharing Debugger：https://developers.facebook.com/tools/debug/

  • URL をペーストして「Debug」をクリックしてプレビューを表示
  • 「Scrape Again」をクリックしてキャッシュを更新

• Twitter Card Validator：https://cards-dev.twitter.com/validator

  • URL をペーストして Twitter カードがどのように表示されるかを確認

• LinkedIn Post Inspector：https://www.linkedin.com/post-inspector/

  • LinkedIn で共有したときのリンク表示を確認

• OpenGraph.xyz：https://www.opengraph.xyz/

  • クイックチェック用の汎用 Open Graph バリデーター

5. 最終的な指示

ユーザーに次のことを思い出させます：

• ✅ アセットファイルを public/static ディレクトリにコピー
• ✅ メタタグの動的値を更新（og:title、og:description、og:url）
• ✅ デプロイ後に実際のプラットフォームでテスト
• ✅ alt テキストを説明的でアクセス可能なものに更新

重要な注意：

• OG 画像は HTTPS URL 経由でアクセス可能である必要があります（localhost ではない）
• メタタグ内の URL は絶対パスである必要があります（https://yourdomain.com/og-image.png）
• プロダクション/ステージング環境にデプロイした後でテスト

ベストプラクティス

画像要件

• ロゴ：最良の結果を得るため、正方形またはほぼ正方形である必要があります
• 高解像度：利用可能な最大のバージョンを提供（スクリプトがダウンスケール）
• 透明な背景：透明性のある PNG がファビコンに最適
• 単色の背景：アプリアイコンとソーシャル画像に推奨

テキストコンテンツ

• テキストの長さがフォントサイズに自動的に影響：
  • 短いテキスト（≤20 文字）：144px フォント - 大きく印象的
  • 中程度のテキスト（21-40 文字）：120px フォント - 標準的に読みやすい
  • 長いテキスト（41-60 文字）：102px フォント - フィットのため削減
  • 非常に長いテキスト（>60 文字）：84px フォント - 最小サイズ
• テキストは最大限の影響のため簡潔にしてください
• ソーシャル画像には最大 2-3 行のテキストを使用
• レンダリングが適切でない特殊文字を避ける

色選択

• 十分なコントラスト（読みやすさの最小 4.5:1）を確保
• ブランド色を一貫して使用
• ライトモードとダークモードの両方のコンテキストを検討

検証と品質チェック

generate_og_images.py と generate_favicons.py の両方は、--validate フラグを付けた自動検証をサポートしています。

検証を使用する場合

常に検証を推奨する場合：

• ユーザーがプロダクション/デプロイメント用に生成している
• ユーザーがファイルサイズまたは品質について質問している
• ユーザーがプラットフォーム要件（Facebook、Twitter など）に言及している
• ユーザーがウェブアセットに新しく、要件を知らないかもしれない

検証はオプションの場合：

• クイックプロトタイプまたはテスト用
• ユーザーが明示的に辞退している場合
• 時間が懸念される場合

検証される内容

ソーシャルメディア画像（OG 画像）の場合

ファイルサイズ検証：

• Facebook/LinkedIn/WhatsApp：<8MB である必要があります
• Twitter：<5MB である必要があります
• 上限の 80% 以内の場合は警告

寸法検証：

• プラットフォーム固有の推奨サイズに対してチェック：
  • Facebook/LinkedIn：1200x630（1.91:1 比率）
  • Twitter：1200x675（16:9 比率）
  • スクエア：1200x1200（1:1 比率）
• アスペクト比がターゲットから >10% ずれている場合は警告
• 最小寸法以下の場合はエラー

フォーマット検証：

• Facebook/LinkedIn：PNG、JPG、JPEG
• Twitter：PNG、JPG、JPEG、WebP
• サポートされていない形式の場合はエラー

アクセシビリティ（コントラスト比）：

• テキストベース画像のみの場合
• WCAG 2.0 コントラスト比を計算
• コンプライアンスレベルを報告：
  • WCAG AAA：7.0:1（通常のテキスト）または 4.5:1（大きなテキスト）
  • WCAG AA：4.5:1（通常のテキスト）または 3.0:1（大きなテキスト）
  • AA 最小値以下の場合は失敗

ファビコンとアプリアイコンの場合

ファイルサイズ検証：

• ファビコン：>100KB の場合は警告（高速ロードに推奨）
• アプリアイコン：>500KB の場合は警告（モバイルに推奨）
• ハードリミットはなく、パフォーマンス最適化に役立つ警告

寸法検証：

• 各アイコンが期待されるサイズと一致することを確認（16x16、32x32 など）
• 正方形のアスペクト比を確認

フォーマット検証：

• すべてのファイルが PNG（favicon.ico の場合は ICO）であることを確認

検証の使用方法

generate_og_images.py の場合：

python scripts/generate_og_images.py output/ --text "マイサイト" --validate

generate_favicons.py の場合：

python scripts/generate_favicons.py logo.png output/ all --validate

出力形式：

• ✓ 成功（緑）：すべてのチェックに合格
• ⚠ 警告（黄）：検討すべき問題ですが重大ではない
• ❌ エラー（赤）：デプロイ前に修正する必要がある

検証出力例

======================================================================
検証チェックを実行中...
======================================================================

og-image.png:

Facebook 検証：
======================================================================
  ✓ ファイルサイズ 0.3MB は Facebook の制限内
  ✓ 寸法 1200x630 は Facebook の推奨サイズと一致
  ✓ フォーマット PNG は Facebook がサポート

LinkedIn 検証：
======================================================================
  ✓ ファイルサイズ 0.3MB は LinkedIn の制限内
  ✓ 寸法 1200x630 は LinkedIn の推奨サイズと一致
  ✓ フォーマット PNG は LinkedIn がサポート

======================================================================
アクセシビリティチェック：
======================================================================
  ✓ コントラスト比 8.6:1 は WCAG AAA 標準を満たす（必要 4.5:1）

======================================================================
概要：9/9 チェックに合格
✓ すべての検証に合格しました！

検証をワークフローに統合

アセットを生成した後、検証が実行されていない場合：

1. ヒントメッセージを表示：「💡 ヒント：--validate を使用してファイルサイズ、寸法、アクセシビリティをチェック」
2. オプション：「これらのファイルで検証を実行しますか？」

検証が実行され、問題が見つかった場合：

1. エラーまたは警告を説明
2. 問題を修正するのを手伝うことを申し出る（例：サイズ変更、再圧縮、色調整）
3. ユーザーが同意した場合、修正で再生成を実行

検証に合格した場合：

1. 確認：「✅ すべての検証チェックに合格しました！」
2. コード統合とテストリンクに進む

仕様とプラットフォームの詳細

詳細なプラットフォーム仕様、サイズ要件、実装ガイドについては、以下をお読みください：

• references/specifications.md：すべてのプラットフォームの包括的な仕様

一般的なリクエストの処理

「サイト用のファビコンを作成してください」

AskUserQuestion を使用：

• 質問：「ロゴ画像を持っているか、それともテキストベースのファビコンを作成しますか？」
• ヘッダー：「ソース」
• オプション：
  • 「ロゴ画像」 - 説明：「ロゴファイルを持っているまたはアップロードします」
  • 「テキストベース」 - 説明：「テキストまたはイニシャルから生成」

次に質問：

• 質問：「モバイルデバイス用の PWA アプリアイコンも必要ですか？」
• ヘッダー：「スコープ」
• オプション：
  • 「ファビコンのみ」 - 説明：「ブラウザタブアイコン（16x16、32x32、96x96）のみ」
  • 「アプリアイコンを含める」 - 説明：「ホームスクリーン用の iOS/Android アイコンを追加（180x180、192x192、512x512）」

生成：適切なパラメータで generate_favicons.py を使用

「ソーシャル共有画像を作成してください」

AskUserQuestion を使用：

• 質問：「どのソーシャルメディアプラットフォーム用の画像が必要ですか？」
• ヘッダー：「プラットフォーム」
• 複数選択：true
• オプション：
  • 「Facebook/WhatsApp/LinkedIn」 - 説明：「標準的な 1200x630 フォーマット」
  • 「Twitter」 - 説明：「1200x675（16:9 比率）」
  • 「すべてのプラットフォーム」 - 説明：「すべてのバリエーションを生成」

次に質問：

• 質問：「画像には何を含める必要がありますか？」
• ヘッダー：「コンテンツ」
• オプション：
  • 「ロゴのみ」 - 説明：「ソーシャル共有用にロゴをリサイズ」
  • 「テキストのみ」 - 説明：「テキスト/スローガンから画像を作成」
  • 「ロゴ + テキスト」 - 説明：「ロゴとテキストオーバーレイを組み合わせ」

生成：適切なパラメータで generate_og_images.py を使用

「ウェブサイト用のすべてが必要です」

AskUserQuestion を使用：

• 質問：「どのソース素材を提供しますか？」
• ヘッダー：「ソース」
• オプション：
  • 「ロゴ画像」 - 説明：「すべてのアセットに使用するロゴを持っています」
  • 「ロゴ + タグライン」 - 説明：「アイコン用のロゴ、ソーシャル共有用のロゴ+テキスト」
  • 「テキストのみ」 - 説明：「テキスト/イニシャルからすべてのアセットを生成」

生成：

• ファビコンと Open Graph 画像の両方を完全な HTML 実装で生成
• ファイルの配置とテストの指示を提供

ユーザーがロゴとタグラインの両方を提供

AskUserQuestion を使用：

• 質問：「ロゴとタグラインはどのように使用しますか？」
• ヘッダー：「レイアウト」
• オプション：
  • 「ロゴの上にテキスト」 - 説明：「ロゴを上部、タグラインを中央下部」
  • 「ロゴ + テキストは並べて」 - 説明：「ロゴを左に、テキストを右に」
  • 「ソーシャル画像はテキストのみ」 - 説明：「アイコンにはロゴを使用、ソーシャル共有にはテキストのみ」
  • 「ロゴの背景にテキスト」 - 説明：「微妙なロゴ背景と目立つテキスト」

生成：generate_og_images.py で --text と --logo パラメータを一緒に使用

依存関係

スクリプトは以下を必要とします：

• Python 3.6+
• Pillow（PIL）：pip install Pillow --break-system-packages
• Pilmoji（絵文字サポート用）：pip install pilmoji（オプション、絵文字ベースの生成にのみ必要）
• emoji（絵文字の提案用）：pip install emoji（オプション、絵文字の提案にのみ必要）

必要に応じてスクリプト実行前にインストール。

絵文字機能の場合、両方をインストール：

pip install pilmoji emoji --break-system-packages