はじめに

みなさん、バイブコーディングはしていますか?
Cloude Code, CodeXなど様々なコーディングアシスタントAIがありますが、やはりGemini CLIは基本無料という点でかなり魅力的ですよね。
今回は、Gemini CLIを活用したコーディング例として、AIレシピ作成Webサービス「Oishii AI」の開発手法をご紹介したいと思います。
プログラミングに詳しくない人も、この記事を見ればある程度のWebサービスは作ることができるようになります。
もしよければサービスをまず触ってみてください。

仕様書の作成

何はともあれ、開発をする前には簡易的なもので良いので仕様書を作成する必要がありますよね。
この仕様書の作成は、上流工程に携わる人でなければなかなかノウハウが無かったり、使用する要素技術を知っていなければならないものだったのですが、昨今ではAIがそこそこの出来の仕様書を作ってくれたりするので、存分に頼ってしまおうという魂胆です。
具体的なプロンプトは以下のとおりです。

**AIによる自動レシピ作成Webサービス**の仕様書を、質問形式で作成してください。

これをGeminiに聞き、質問に答えていくと最終的に仕様書を作成することができます。完成した仕様書が以下のとおりです。


### サービスの概要

| 項目 | 詳細 |
|:---|:---|
| サービス名 | **Oishii AI** |
| 目的 | 料理初心者から慣れている人まで、誰でも手軽に「おいしい」献立を作成できるWebサービス。 |
| ターゲットユーザー | 献立を考えるのが面倒な人、冷蔵庫の食材を有効活用したい人、料理のレパートリーを増やしたい人。 |
| 提供価値 | 最小限の手間で、健康的で美味しいレシピを提案し、日々の食生活を豊かにする。 |
| 収益化 | 広告収入 (サービス運営が軌道に乗った段階で導入予定)。 |

---

### 機能要件

#### 1. レシピ生成機能
* **入力方法**: ユーザーはテキストボックスに材料を入力します。「追加」ボタンで材料リストに追加でき、不要な材料は「×」ボタンで削除できます。
* **難易度選択**: レシピの生成前に、「初心者向け」と「慣れている人向け」の2つの難易度から選択できます。
* **出力形式**: 生成されたレシピは、ポップでわかりやすい調理手順と材料リストで表示されます。

#### 2. 多言語対応
* **対応言語**: **日本語、英語、中国語**に対応します。
* **言語切り替え**: ページの**右上に言語切り替えボタン**を配置し、ユーザーが自由に表示言語を変更できるようにします。

#### 3. 保存・共有機能
* **機能**: 現在のところ、レシピの保存や共有機能は実装しません。

---

### デザイン・UI/UX要件

* **デザインコンセプト**: 暖かみがあり、親しみやすい「かわいい」デザインを採用します。サービス名に合わせた、食欲をそそるようなカラースキームやアイコンを選定します。
* **レイアウト**:
    * ユーザーインターフェースはシンプルを追求し、必要最低限の要素のみを配置します。
* **レスポンシブデザイン**: スマートフォンでも快適に利用できるよう、**完全なレスポンシブデザイン**を必須とします。

---

### 技術要件

* **AIモデル**: レシピ生成には**Gemini API**を使用します。
* **フロントエンド**: **HTML、CSS、JavaScript**のみで開発し、ReactやNext.jsなどのフレームワークは使用しません。
* **バックエンド**: **PHPとPython**を使用して、リクエスト処理とGemini APIとの連携を行います。
* **画像認識**: 食材の画像認識機能は実装しません。
* **サーバー**: サーバー環境は既に用意済みです。

この仕様書をファイル"specification.md"に保存しておきます。

Gemini CLIでの実行

Gemini CLIが既にインストールされている前提で話を続けていきます。
geminiコマンドにより立ち上げ、以下のプロンプトを入力します。

"specification.md"の内容に沿ってWebサービスを完成させてください。

これだけで、そこそこのWebサービスを作成してくれます。
ただし、あくまでも作成してくれるのは「雛形」ですので、最終的に人の手でコードを書き換えることが質の高いサービスにするためには必須だと考えています。
また、Gemini CLIは無料枠でのgemini-2.5-proの使用回数 (トークン数?) が限られているので、そのような意味でも細かいところは人の手で直したほうが良いでしょう。

おわりに

私は当初、バイブコーディングには少し懐疑的ではありました。ただ実際に使ってみるとかなり実用的ですし、バイブコーディング特有の楽しさもあります。
今回のWebサービスの開発は、SEO対策などの細かい部分も含めて1日とかかりませんでした。
皆さんもアイデアがある人は是非いろいろなWebサービスやアプリケーションを、AIで簡単に作ってみてほしいと思います。