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

拡張リファレンス

## Delivering Assets to User 以降の詳細な資料は、このスキルを簡潔に保つため、reference/extended.md に移動しました。移動された例、コマンド一覧、チェックリスト、プラットフォームの詳細、または実装テンプレートが必要なタスクでは、このリファレンスを読み込んでください。