前回、エージェント型AIが開発を変えつつあるという話を書きました。ただ、「すごい」と言われても、実際にどんな体験なのかは触ってみないと分からないと思います。

今回は、claude-code-guideに含まれている実践例「おでかけプランナー」を題材に、Claude Codeでゼロからアプリを作る流れを紹介してみます。技術的な詳細よりも「こういう体験になる」という感覚を伝えることを意識して書きます。

何を作るか

おでかけプランナーは、お気に入りのスポットを登録しておいて、天気予報と組み合わせて「今日どこに行こうかな？」をサポートするWebアプリです。

地図上にスポットが表示されて、天気予報カードや週間グラフが見られて、天気に合わせたおすすめスポットが提案される。見た目も含めて、これがClaude Codeとの会話だけで出来上がります。

Phase A：土台を作る

claude-code-guideでは、開発を「Phase A（土台作り）」と「Phase B（機能の実装）」の2段階に分けています。

Phase Aでは `/kickstart` というスキルを使います。Claude Codeのプロンプトで `/kickstart` と打つだけで、プロジェクトの立ち上げが始まります。

最初に聞かれるのは「何を作りたいですか？」です。ここで「お気に入りのスポットを登録して、天気と組み合わせておすすめを出すアプリ」と伝えると、Claude Codeが深掘りの質問をしてきます。ターゲットは誰か、大切にしたいことは何か、MVPの機能は何か。壁打ちの相手になってくれるので、頭の中のぼんやりしたアイデアが少しずつ形になっていきます。

要件が固まると、次はアーキテクチャの決定です。Claude Codeがフロントエンドやバックエンドの技術選択肢を比較表で出してくれるので、それを見ながら一緒に決めていく。自分で全部調べて判断するのではなく、AIが選択肢を整理してくれた上で、最終判断は人間がする。この感覚が、従来の開発とは全然違います。

Phase Aの最後では、プロジェクトの設定ファイルや、専門のAIエージェント（設計担当、実装担当、品質管理担当）が自動的に作られます。ここまでで、だいたい1〜2セッション。このあたりの話は次回以降で詳しく書きます。

Phase B：機能を1つずつ作る

土台ができたら、いよいよ機能の実装です。Phase Bでは1つの機能を1サイクルで作っていきます。

おでかけプランナーの場合、4つの機能を順番に作りました。

1つ目はスポットのCRUD（登録・編集・削除）と地図表示です。名前やカテゴリを入力してスポットを登録すると、一覧にカードとして表示され、地図上にもピンが立つ。

2つ目は天気予報の表示。登録したスポットの天気をOpen-Meteo APIから取得して、天気アイコンや気温、降水確率をカードで表示します。

3つ目は週間天気のグラフ。気温の推移を折れ線グラフ、降水確率を棒グラフで表示。

4つ目がおすすめスポットの提案。晴れなら公園、雨なら美術館やカフェ、のように天気とカテゴリを組み合わせて「今日のおすすめ」を出してくれます。

各サイクルの流れは同じです。まず壁打ちで要件を固めて、仕様書に残す。次にClaude Codeの実装担当エージェントに「この仕様書に従って実装して」と指示を出す。エージェントがバックエンドとフロントエンドを一気に実装してくれるので、出来上がったものを確認して、テストを走らせて、コミット。

特に印象的だったのは、天気予報カードの実装です。「天気アイコン、気温、降水確率を見やすいカードで表示して」と伝えただけで、天気に合わせてグラデーションが変わるカードが出てきました。自分でCSSを書いたわけでもないのに、見た目の完成度が高いものが出来上がります。こういう「期待以上のものが返ってくる」体験は、AI駆動開発ならではだと思います。

「全部指示しなくていい」という感覚

従来の開発、あるいは従来のAIコーディングツールとの一番の違いは、「全部を自分で考えて指示しなくてもいい」ということです。

たとえば「カテゴリ別のアイコンを使って見た目を楽しくして」と伝えれば、公園には緑のアイコン、カフェにはコーヒーカップのアイコン、美術館には絵画のアイコンと、具体的な選定まで勝手にやってくれる。方向性だけ伝えれば、細部はAIが埋めてくれます。

もちろん、出てきたものが気に入らなければ「もうちょっとこうして」と修正を頼めばいいし、根本的に方向が違えばやり直しもできます。主導権は常にこちらにあるけど、ゼロから全部考える必要がありません。

ウォークスルーの意味

実はこの「おでかけプランナー」は、claude-code-guideの中に実践例として手順が公開されています。Claude Codeさえインストールすれば、誰でも同じ手順でゼロから作れるようになっています。

もちろん、プロンプトの書き方や判断によって出来上がりは人それぞれ違います。でも、手を動かしてみると「AIと一緒に開発するとはどういうことか」が体感として分かります。文章を読むだけでは伝わらない部分が、実際に作ってみると腑に落ちると思います。

次回は、このワークフローをなぜこういう形にしたのか、「標準化」の観点から書いてみます。スキルやエージェントの設計思想の話です。