app-icon について
app-iconは、プロジェクトのExpo設定、ブランドカラー、アプリのコンセプトをもとにアイコンを生成・調整するスキルです。iOS、Androidのアダプティブアイコン、Webのfaviconに対応し、画像の確認と後処理も扱います。
主な機能
- 01Expo設定からアイコンのパスを確認
- 02プロジェクトから主題と色を決定
- 03各プラットフォーム用の画像を生成
- 04Androidのセーフゾーンに合わせた画像作成
- 05画像ファイルの確認と後処理
活用シーン
- 01Expoアプリのアイコン作成
- 02iOS、Android、Web用アイコン素材の準備
- 03視覚チェックに通らない画像の再生成
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ melvynx/ aiblueprint --skill app-iconインストール後、Claude Code で/app-iconを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yamlassets/codex-icon.svg
詳細
アイコンは、アクセス可能な任意の画像ツールを使って自分で生成してください。Codex:image_gen。gemini-cli が利用可能な場合は使用してください(未認証の場合は gemini-cli auth set <GOOGLE_API_KEY>)。ツールを実行できる場合は、プロンプトをユーザーに返さないでください。SVG を PNG に変換してごまかさないでください。ツールがない場合は、入力済みのプロンプトをユーザーに渡し、ユーザーのファイルを受け取ってから後処理を再開してください。
Expo の設定を読み、実際のパスに書き込んでください:expo.icon、expo.android.adaptiveIcon.foregroundImage、expo.android.adaptiveIcon.backgroundColor、expo.web.favicon。プロジェクトからブランドカラーとアプリのコンセプトを把握してください。プロンプトでは色名を使い、16 進数は使わないでください。
対象:iOS <ASSETS>/icon.png 1024×1024、透明度なし、角丸マスクの焼き込みなし。Android <ASSETS>/adaptive-icon.png。被写体は中央の約 66%のセーフサークル内に収めてください。Web <ASSETS>/favicon.png 192×192。
次の内容を 1 つのプロンプトとして送信し、「Subject」と「Color palette」を入力してください:
Create a 1024x1024 square app icon — premium, vibrant and dimensional, in the style of top App Store featured apps.
Subject: <single hero for <AppName> — soft 3D mascot with simple dot eyes, OR a bold symbolic object; readable at small sizes>
Look: one glossy 3D/2.5D hero, studio lighting, rim light, subtle glow, centered on a FULL-BLEED branded background that reaches all four edges.
Composition: hero fills ~60-80%; one focal point; sharp 90° corners; critical detail inside the central ~70%.
Do NOT: flat pictogram, black-on-white glyph, line icon, white/empty background, icon-in-icon, baked rounded corners, text, letters, faces, logos, chrome, neon, flares.
Color palette: <brand color names>. Technical: square 1:1; readable at 60px.
コンシューマー向け、ソーシャル、ウェルネス、AI にはマスコットを、金融、生産性、ユーティリティにはシンボルまたはオブジェクトを選んでください。
gemini-cli image generate --prompt "$PROMPT" \
--model gemini-3-pro-image-preview --aspect-ratio 1:1 --image-size 2K \
--out ./icon-raw.png --images-only --json
gemini-2.5-flash-image は、より低コストな代替手段です。平面的、単色、SVG 風、白背景、または 64px でぼやけて見える出力は却下して再生成してください。安全性フィルターで拒否された場合は、表現を言い換えて簡潔な 1 段落にしてください。
sips -z 1126 1126 icon-raw.png --out /tmp/icon-up.png
sips -c 1024 1024 /tmp/icon-up.png --out /tmp/icon-fullbleed.png
sips -s format png /tmp/icon-fullbleed.png --out <ASSETS>/icon.png
sips -g hasAlpha <ASSETS>/icon.png
magick <ASSETS>/icon.png -resize 66% -background "<brand-bg-color>" -gravity center -extent 1024x1024 <ASSETS>/adaptive-icon.png
sips -z 192 192 <ASSETS>/icon.png --out <ASSETS>/favicon.png
背景がすでに角まで鮮明に広がっている場合は、拡大してトリミングする処理を省略してください。hasAlpha が yes の場合:magick in.png -background "<brand-bg-color>" -alpha remove -alpha off <ASSETS>/icon.png。expo.android.adaptiveIcon.backgroundColor もその色に合わせてください。magick がない場合は、「Android のアダプティブアイコンのセーフゾーンに合わせて、約 20% の余白を確保」と指定して再生成してください。
アイコンとアダプティブアイコンを変更した場合は、ネイティブで再ビルドする必要があります(npx expo run:ios または npx expo run:android)。ホーム画面に古い画像、平坦なグリフ、または角のハローが表示されたままの場合は、実行を失敗としてください。