Cursor・Lovable・Bolt・v0向け｜AIでPWAアイコンを一括生成
AIコーディングは速いですが、本番用のPNGやXcode用セットは自動では出ません。Imagconならプロンプトだけで19種のPWAサイズ、AppIcon.appiconset（Contents.json）、Android mipmap、iOSスプラッシュ16枚、manifest.jsonまで揃います。
Cursor・Lovable・Bolt・v0だけではアイコンファイルが足りない理由
これらのツールはコード生成に強い一方、実画像ファイルは作れません。manifestに例示パスだけあり、/icons/が空のままになりがちです。
流れはシンプルです。 Imagconで画像一式を生成 → 次に AIにHTMLや設定へのリンク挿入を依頼。
ZIPの前に：ワークスペースでスタイルとAI編集
生成前に7つのスタイルから選択
ワークスペースで「生成」の前に Flat / Metallic / 2D Game / Clay / 3D / Gradient / Glassmorphism から選べます（各プレビュー付き）。Imagen 4.0 の見た目の方向性が整い、アイコンのモチーフだけを自然文で書けます。
AI編集で仕上げ
生成後はイメージエディタを開き、変更内容を文章で指示（例：「メガネを消して」「細い金枠を」）。Vertex AI の Google Gemini が反映します。大きな修正は1〜2分かかることがあります。手描き・テキスト・切り抜きや、プロンプトからの再生成も併用できます。
Imagconでプロンプトからアイコンを生成
imagcon.app にアクセスし、無料でサインインして、アイコンを自然文で説明してください。
プロンプト例
- "濃い青のグラデに白い稲妻"
- "白背景にミニマルな緑の葉っぱ、フラットデザイン"
- "紫の抽象ウェーブ、モダンなSaaS風"
ZIPには次が含まれます。 PWA 19サイズ、マスカブル版、iOSスプラッシュ16枚、Android mipmap、Xcode用AppIcon.appiconset（Contents.json）、manifest.json。
プロジェクトの public に配置
多くのフレームワークは /public をサイト直下として配信します。/public/icons/ のファイルは /icons/ として配信されます。
| スタック / ツール | アイコン配置 | manifest.json |
|---|---|---|
| Vite（React/Vue/Svelte） | /public/icons/ | /public/manifest.json |
| Create React App | /public/icons/ | /public/manifest.json |
| Next.js（App Router） | /public/icons/ | /public/manifest.json |
| Lovable（内部はVite） | /public/icons/ | /public/manifest.json |
| Cursor上の任意フレームワーク | 上と同様（package.jsonを確認） | 上と同様 |
| Bolt / v0（Vite/Reactへエクスポート） | /public/icons/ | /public/manifest.json |
manifest.json を確認
ダウンロードに manifest.json が含まれます。手動で作る場合はこのテンプレを参考に（名前・色は調整）:
{
"name": "Your App Name",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{ "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" },
{
"src": "/icons/icon-192x192-maskable.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
}
]
}Cursor・Lovable・Bolt・v0のチャットにプロンプトを貼る
CCursor
AIチャット（Cmd+L / Ctrl+L）に貼り付け:
ImagconからPWA用アイコンZIPを取得しました。内容:
- /icons/ フォルダ（icon-72x72.png ～ icon-512x512.png）
- icon-512x512-maskable.png（Android）
- そのまま使える manifest.json
- iOS起動画像の splash/ フォルダ
- Xcode用 AppIcon.appiconset（Contents.json付き）
- Android mipmap フォルダ
お願いします:
1. /icons/ を /public/icons/ にコピー
2. manifest.json を /public/manifest.json にコピー
3. index.html に <link rel="manifest" href="/manifest.json"> を追加
4. index.html に <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png"> を追加
5. AppIcon.appiconset と mipmap をプロジェクトに合わせて統合LLovable
public/icons/ にファイルを置き、チャットで:
- 1. 左サイドバーのファイル → アップロード
- 2. public/icons/ を作成または開く
- 3. ImagconのZIP内のPNGをすべてアップロード
- 4. Lovableチャットに下のプロンプトを貼る
ImagconでPWAアイコンを用意しました。次をお願いします:
1. 全PNGを /public/icons/ に配置
2. PWAインストール用に manifest.json を設定
3. index.html から manifest をリンク
manifest は /icons/icon-{size}x{size}.png を参照。192x192 と 512x512、Android用マスカブル192x192を含めてください。B/vBolt と v0
エクスポート後（多くはVite/React）、Cursorと同様に public/icons/ と public/manifest.json を整え、次を貼ってください:
Bolt/v0からエクスポートしたプロジェクトに、Imagconのアイコンを組み込んでください:
- public/icons/ に全PWAサイズ
- public/manifest.json
- index.html に manifest と apple-touch-icon のリンク
生成されたVite/Reactのパスと整合させてください。Boltとv0はUI実装を加速。Imagconはコードが参照するアイコンパッケージを提供します。
PWAとアイコンを検証
Chrome DevTools
- 1.Chromeでアプリを開く
- 2.DevTools → Application
- 3.左の Manifest
- 4.アイコンの404がないか確認
- 5.「ホーム画面に追加」が出るか確認
Lighthouse（PWA）
- 1.DevTools → Lighthouse
- 2.Progressive Web App にチェック
- 3.ページを分析
- 4.アイコン関連の赤項目を修正
よくある問題
問題: Application → Manifest にアイコンが出ない
対処: index.html の <head> に <link rel="manifest" href="/manifest.json"> があるか確認。
問題: manifestは読めるがアイコンが404
対処: パスは公開URLと一致させる。/public/icons/ は /icons/ として配信される。
問題: Lighthouseでインストール不可
対処: 192×192 と 512×512 が必要。display は standalone または fullscreen。
問題: iOSでAppleタッチアイコンが効かない
対処: <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png"> を追加。