今回、Claude Code とGeminiに日本語で指示を出すだけでサイゼリヤのメニュー組み合わせアプリを作ってもらいました。
最終的に React + PWA 対応の本格アプリに進化したのですが、面白かったのは 「完璧な指示を出さなくていい」 ということ。
出てきたものを見て「もうちょっとこう…」と追加注文するスタイルで進めました。
思い立ってからサイト公開までの所要時間は「1時間」でした。
この記事では、実際に投げたプロンプトをそのまま全部公開します。
使ったツール
- Gemini (Google) — メニューデータの抽出担当
- Claude Code (Anthropic) — アプリ実装担当
- エディタは VS Code
- 自分で書いたコード行数: 0行
🎬 やりとり全記録
第0ラウンド：データ準備は Gemini に丸投げ
アプリを作る前に、まずメニューデータが必要です。
サイゼリヤ公式サイトのメニューページ（複数枚の画像）を Gemini にアップロードして、こう指示しました。
メニュー一覧を作成して。json形式で。重複なし。
結果:
画像を解析して、構造化されたJSONをそのまま出力してくれました。
100品超のメニューが一発でデータ化完了。
- id（注文番号）
- category（カテゴリ）
- name（メニュー名）
- price（値段）
💡 サイドメニューによくある「人気の組み合わせ」など重複しがちなデータも、「重複なし」と一言添えただけでうまく整理してくれました。
ただ1点だけ問題が。デザートは「すぐに提供」と「食後に提供」で注文番号が違うのですが、最初のJSONでは番号がスラッシュで連結されていました（例: "id": "3206/3906"）。プログラムで使うには分けたいので追加指示。
デザートは、nameのあとに、（すぐに）（あとで）を付与して、idを分けてください。
{ "id": "3206/3906", "category": "デザート", "name": "イタリアンプリン", "price": 250 },
{ "id": "3212/3912", "category": "デザート", "name": "プリンとティラミスクラシコの盛合せ", "price": 500 },
{ "id": "3201/3901", "category": "デザート", "name": "ティラミスクラシコ", "price": 300 },
{ "id": "3205/3905", "category": "デザート", "name": "ミルクジェラート", "price": 250 },
{ "id": "3216/3916", "category": "デザート", "name": "チョコレートケーキ＆ミルクジェラート", "price": 500 },
{ "id": "3207/3907", "category": "デザート", "name": "チョコレートケーキ", "price": 300 },
{ "id": "3213/3913", "category": "デザート", "name": "トリフアイスクリーム", "price": 350 },
{ "id": "3215/3915", "category": "デザート", "name": "コーヒーゼリー＆ミルクジェラート", "price": 350 },
{ "id": "3214/3914", "category": "デザート", "name": "ジェラート＆シナモンフォッカチオ", "price": 450 },
これで完璧に整形された JSON 配列が完成。
Claude Code に渡す準備が整いました。
🤖 ポイント: 画像 → 構造化データの変換は Gemini の得意分野。
Claude Code に「画像を見てJSON作って」とお願いするより、最初から Gemini に作らせて Claude Code には実装に専念させる 方が分業として効率的でした。
第1ラウンド：ベースを作る
Claude Codeへの最初の指示はこれだけ。
Geminiで生成したメニューデータのJSONを一緒に貼り付けました。
静的サイトとして、サイゼリヤのメニューからランダムに選択するジェネレーターを生成して。合計金額は800円～1200円になるように。モバイル対応するように。
メニューデータは以下のとおり。
``` json
[
{ "id": "1202", "category": "サラダ", "name": "小エビのサラダ", "price": 350 },
{ "id": "1209", "category": "サラダ", "name": "チキンのサラダ", "price": 350 },
{ "id": "1205", "category": "サラダ", "name": "わかめのサラダ", "price": 350 },
{ "id": "1425", "category": "サラダ", "name": "柔らか青豆の温サラダ", "price": 200 },
{ "id": "1413", "category": "サラダ", "name": "キャロットラペ", "price": 200 },
（Geminiで生成したjsonを丸っとペーストする）
]
```
結果:
ものの数十秒で index.html が完成。1ファイル完結のHTMLで、ボタンを押すと予算内のメニューが出る、ちゃんと動くものが出てきました。
カテゴリ除外機能まで勝手につけてくれて、最初の状態で アルコールやトッピングがデフォルト除外になっていたのは「分かってるな」と思いました。
🤖 ポイント: 仕様を細かく指定しなくても、文脈から「こういうUIだろうな」を補完してくれる
第2ラウンド：見た目をブラッシュアップ
最初は赤一色のシンプルなデザインだったので、もう少しサイゼっぽさを出したくなり、サイゼリヤ公式のロゴ画像と一緒に追加指示。
・"合計800円〜1200円のメニューをランダム生成" は不要。
・赤と緑のカラーコードを抽出して、サイトのデザインに使用して。現状緑がない。
・ガチャ感を出したいので、演出を追加して。
結果:
トップ画像の下に余計なサブタイトルがあったので除去。
また画像から #E60012（赤）と #009944（緑）を抽出して CSS 変数化。
さらに 演出を細かく指示していないのに、こんな演出が追加されました:
- スロットマシン風の高速サイクル → 徐々に減速
- 確定時にカード背景が黄色フラッシュ
- 紙吹雪が60個降ってくる
- 「🎰 抽選中…」バッジがパルスアニメ
「ガチャ感を出したい」だけで全部やってくれました。
🤖 ポイント: 抽象的な要望（"ガチャ感"）でも汲み取って具体化してくれる。画像から色抽出も自動。
第3ラウンド：実用性の改善
実際に「サイゼで使う場面」を想像したら、肝心なものが目立たないことに気づきました。サイゼでは紙のシートに4桁の番号を書いて注文します。
商品名より番号の方が大事なんです。
メニュー名（name）の前に、注文番号（id）を表示して。サイゼリヤでは注文する際にこの番号を入力するので、大きめに表示して。
結果:
緑のバッジで番号がドンと表示されるように。「サイゼリヤでは番号を入力する」という理由を一緒に伝えると、サイズ感やデザインの判断もうまくやってくれます。
続けて、
注文番号とメニュー名は改行して。
これで番号が独立した行になり、視認性が一気に上がりました。
🤖 ポイント: なぜそうしたいのか（背景）を伝えると、見た目の判断精度が上がる。
第4ラウンド：React + PWA に作り直し
シングルHTMLで動いていたものを、本格的なアプリに進化させたくなったので…
reactで作り直して。PWA対応して、インストール可能にして。
結果:
- Vite + React 18 のプロジェクトに丸ごと再構築
- vite-plugin-pwa で Service Worker 自動生成
- beforeinstallprompt を捕捉する独自インストールボタン
- アイコンSVG → PNG (192/512/maskable/apple-touch) を sharp で自動生成するスクリプトまで作ってくれた
- npm install → npm run build まで自動実行して、ビルドが通ることを確認してくれた
ここまで含めて1回の指示で完了。ホーム画面に追加できるアプリになりました。
🤖 ポイント: 「PWA対応して」だけで、マニフェスト・SW・アイコン生成・インストールUIまで全部やる。
第5ラウンド：アイコンの微調整
PWA用に生成された「サ」のアイコンを見たら、文字が円の中央じゃなくて上にズレていました。
アイコンの"サ"を中央にして。
修正前
↓↓↓
修正後
完璧に中央揃いになりました。
やってみて気づいたこと
① 「完璧な指示」は必要ない
最初から仕様書みたいなものを書く必要はなくて、3行くらいの雑な指示 + 出てきたものを見ながら追加注文 で十分形になります。
② 背景・理由を添えると精度が上がる
「番号を大きく」だけより「サイゼでは番号で注文するから大きく」と伝える方が、適切なサイズ・色・配置になりました。
③ 画像を貼ると一発で伝わる
「サの位置が変」と文字で説明するより、スクリーンショットを貼った方が早い。色の指定もロゴ画像を渡すだけ。
④ 「とりあえず作って」が成立する
ガチャ演出みたいな抽象的な要望でも、いい感じに具体化してくれます。出てきたものが気に入らなければまた指示すればいい。
⑤ 環境構築も任せられる
npm install も npm run build も自分で打たない。エラーが出たら勝手に直してくれる。
⑥ AIの「得意分野」を分業する
Gemini は画像理解・データ抽出が得意。
Claude Code はコード生成・実装が得意。
1つのAIに全部やらせないで、得意なことを得意なAIに任せると精度もスピードも上がります。
全部で何回プロンプトを送ったか
- Gemini への指示: 2回（メニュー画像 → JSON化、デザートID分割）
- Claude Code への指示: 6回（実装〜微調整）
合計 8回のプロンプト で、
✅ メニューデータの構造化（公式画像から）
✅ 静的サイトのプロトタイプ
✅ ブランドカラー対応
✅ ガチャ演出
✅ UX改善
✅ React + PWA への移行
✅ アイコン中央揃え修正
がすべて完成しました。所要時間は だいたい1時間。
知識不要で作れる？
正直に言うと、プログラミングの知識ゼロで開発するのは難しいと思います。もちろん時間をかければ非エンジニアの方でも作り上げることは可能だと思いますが、”何が必要か”を知らないと、何を指示すればよいかが分からないと思います。
例えば、私はプログラマなので、開発しようと思ったときには、すでに以下が頭に浮かんでいます。
- メニューのデータが必要で、json形式が適している
- Geminiは画像解析が得意で、json形式にしてくれる
- サイゼリヤ風にするには、カラーコードが必要
- Claude CodeはReactが得意なので、間違いにくいだろう
- 手軽にスマホ対応するには”PWA化”と指示すればよい
まとめ
Claude Code とGeminiを使うと、作りたいもののイメージさえあれば Webアプリが作れる時代が来ています。
ポイントは:
- 最初は雑でいい
- 出てきたものを見て追加指示
- 背景や理由を添える
- 画像で伝える
- 仕様じゃなく「こうしたい」を伝える
「コードを書く」のではなく「作りたいものを言葉にする」スキルがこれからは大事になりそうです。
とはいえ、AIに指示を出すためにプログラミングの知識は必要です！
完成したアプリはこちら
👉 https://saizeriyagacha.goris.site/