web-asset-generator

Web アセットジェネレーター

ロゴやテキストのスローガンから、ファビコン、アプリアイコン、ソーシャルメディアのメタ画像など、プロ仕様の Web アセットを生成します。

クイックスタート

ユーザーが Web アセットをリクエストした場合：

1. 要件が不明確な場合は、AskUserQuestion ツールを使って確認します：

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

2. 素材を確認します：

   • ユーザーが画像をアップロードした場合：素材として使用します
   • ユーザーがテキスト／スローガンを指定した場合：テキストベースの画像を生成します

3. 適切なスクリプトを実行します：

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

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

対話形式で質問する

重要：要件を確認するときは、通常のテキストで質問するのではなく、必ず AskUserQuestion ツールを使用してください。選択肢が表示される UI によって、ユーザー体験が向上します。

AskUserQuestion を使う理由

✅ ビジュアル UI：ユーザーは回答を入力するのではなく、クリック可能なチップ／タグから選べます
✅ より速い：回答を入力する代わりにクリックして選択できます
✅ より明確：説明によって各選択肢の意味が分かります
✅ エラーが少ない：自由入力によるタイプミスや誤解がなくなります
✅ プロフェッショナル：最新の Claude Code の体験と一貫性があります

質問の例

ユーザーのリクエスト：「Web アセットが必要です」

Claude は AskUserQuestion を使用します（通常のテキストではなく）：

What type of web assets do you need?                    [Asset type]
○ Favicons only - Browser tab icons (16x16, 32x32, 96x96) and favicon.ico
○ App icons only - PWA icons for iOS/Android (180x180, 192x192, 512x512)
○ Social images only - Open Graph images for Facebook, Twitter, WhatsApp, LinkedIn
● Everything - Complete package: favicons + app icons + social images

ユーザーがクリック → Claude は生成するものをすぐに把握できます

質問パターン

以下は、さまざまな状況で使用する標準的な質問パターンです。構成をコピーし、必要に応じて調整してください。

質問パターン 1：アセットの種類を選択

ユーザーのリクエストが曖昧な場合（例：「Web アセットを作成して」「アイコンが必要です」）、AskUserQuestion を使用します：

質問：「どの種類の Web アセットが必要ですか？」 ヘッダー：「アセットの種類」 選択肢：

• 「ファビコンのみ」 - 説明：「ブラウザータブのアイコン（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：色の希望（テキストベースの画像向け）

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

質問：「ソーシャル画像にどの色を使いますか？」 ヘッダー：「色」 選択肢：

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

質問パターン 5：アイコンの種類の確認

ユーザーが「アイコンを作成して」または「アイコンを生成して」と言った場合（曖昧な場合）：

質問：「どのような種類のアイコンが必要ですか？」 ヘッダー：「アイコンの種類」 選択肢：

• 「Web サイトのファビコン」 - 説明：「ブラウザーのタブに表示される小さなアイコン」
• 「アプリのアイコン（PWA）」 - 説明：「モバイルのホーム画面に表示されるアイコン」
• 「両方」 - 説明：「ファビコン + アプリのアイコン」

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

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

ステップ 1：プロジェクトの説明を尋ねます（自由記述）：

• 「Web サイト／アプリについて教えてください」
• これを使って絵文字の候補を生成します

ステップ 2：AskUserQuestion を使って、提案する 4 つの絵文字を提示します：

質問：「プロジェクトを最もよく表している絵文字はどれですか？」 ヘッダー：「絵文字」 選択肢：（プロジェクトの説明に基づいて動的に生成）

• 例：「🚀 ロケット」 - 説明：「ロケット、打ち上げ、スタートアップ、宇宙」
• 例：「☕ コーヒー」 - 説明：「コーヒー、カフェ、飲み物」
• 例：「💻 ノートパソコン」 - 説明：「コンピューター、ノートパソコン、コード、開発」
• 例：「🎨 アート」 - 説明：「アート、デザイン、クリエイティブ、絵画」

実装：

# Get suggestions
python scripts/generate_favicons.py --suggest "coffee shop" output/ all

# Then generate with selected emoji
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. ☕  Coffee               - coffee, cafe, beverage
2. 🌐  Globe                - web, website, global
3. 🏪  Store                - shop, store, retail
4. 🛒  Cart                 - shopping, cart, ecommerce

ステップ 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：省略可能な背景色（デフォルトは、ファビコンでは透明、アプリアイコンでは白）

例：

# Basic emoji favicon (transparent background)
python scripts/generate_favicons.py --emoji "🚀" /home/claude/output favicon

# Emoji with custom background for app icons
python scripts/generate_favicons.py --emoji "☕" --emoji-bg "#F5DEB3" /home/claude/output all

# Complete set with white background
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 "Your text here" [options]

オプション：

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

例：

python scripts/generate_og_images.py /home/claude/output \
  --text "Transform Your Business with AI" \
  --logo /mnt/user-data/uploads/logo.png \
  --bg-color "#4F46E5"

すべてを生成する

すべてのファイルをまとめて生成したいユーザー向け：

# Generate favicons and icons
python scripts/generate_favicons.py /mnt/user-data/uploads/logo.png /home/claude/output all

# Generate social media images
python scripts/generate_og_images.py /home/claude/output --image /mnt/user-data/uploads/logo.png

テキストベースの場合：

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

# Generate social media images with text + logo
python scripts/generate_og_images.py /home/claude/output \
  --text "Your Tagline Here" \
  --logo /mnt/user-data/uploads/logo.png

生成した素材をユーザーに渡す

素材の生成後は、次のワークフローに従います。

1. Outputs ディレクトリに移動する

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

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

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

ファビコンの出力例：

<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 画像の出力例：

<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="Your description here">


<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="/twitter-image.png">
<meta name="twitter:image:alt" content="Your description here">

3. コードへの統合を提案する（AskUserQuestion を使用 - パターン 7）

重要：タグをコードベースに追加するサポートが必要か、必ずユーザーに確認してください。

質問：「これらの HTML タグをコードベースに追加しましょうか？」 ヘッダー：「統合」 選択肢：

• 「はい。設定を自動検出してください」
• 「はい。追加先を指定します」
• 「いいえ。自分で追加します」

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

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

# Search for framework config files
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"

# Or check 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 を使って、検出したファイルを確認します。

Question: "I found [Framework Name]. Should I update [file_path]?"
Header: "Confirm"
Options:
- "Yes, update this file"
- "No, show me other options"
- "Cancel, I'll do it manually"

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 の場合（metadata export に追加）：

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">
  
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  ...
</head>

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

1. ユーザーにファイルパスを尋ねます
2. Read ツールを使ってファイルが存在することを確認します
3. タグを挿入する場所を示します
4. 差分を表示します
5. ユーザーの確認後に挿入します

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

簡潔な手順を提示します：

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

4. テスト用リンクを提示する（AskUserQuestion - Pattern 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）を更新します
• ✅ デプロイ後、実際のプラットフォームでテストします
• ✅ 代替テキストをわかりやすく、アクセシブルな内容に更新します

重要な注意事項：

• OG 画像には、HTTPS URL（localhost ではない）からアクセスできる必要があります
• メタタグ内の URL は絶対 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 "My Site" --validate

generate_favicons.py 内：

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

出力形式：

• ✓ 成功（緑）：すべてのチェックに合格しました
• ⚠ 警告（黄）：考慮すべき問題がありますが、重大ではありません
• ❌ エラー（赤）：デプロイ前に修正する必要があります

検証出力の例

======================================================================
Running validation checks...
======================================================================

og-image.png:

Facebook Validation:
======================================================================
  ✓ File size 0.3MB is within Facebook limits
  ✓ Dimensions 1200x630 match Facebook recommended size
  ✓ Format PNG is supported by Facebook

LinkedIn Validation:
======================================================================
  ✓ File size 0.3MB is within LinkedIn limits
  ✓ Dimensions 1200x630 match LinkedIn recommended size
  ✓ Format PNG is supported by LinkedIn

======================================================================
Accessibility Checks:
======================================================================
  ✓ Contrast ratio 8.6:1 meets WCAG AAA standards (4.5:1 required)

======================================================================
Summary: 9/9 checks passed
✓ All validations passed!

ワークフローへの検証の組み込み

アセットの生成後に検証が実行されていない場合：

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