Claude WebとClaude Codeを使い分けたら、アプリ開発が爆速になった話

プログラミングができなくても、AIを使えばアプリが作れる時代になりました。

でも実際にやってみると、こんな壁にぶつかります。

「Claude Codeに仕様書を渡したら、全部一気に作ろうとして崩壊した」

これ、あるあるです。私も何度も経験しました。

失敗の原因はシンプルだった

Claude Codeは「実装の天才」です。でも設計や段取りを考えるのは苦手です。

いきなり「こんなアプリ作って」と渡すと、暴走します。

解決策は、役割を分けることでした。

Claude WebとClaude Codeの役割分担

| | 得意なこと | | --------------- | ----------- | | Claude Web | 設計・相談・指示書作り | | Claude Code | 実装・コード実行 |

考える仕事はClaude Web、手を動かす仕事はClaude Code。

この分業を知るだけで、開発の進め方が全然変わります。

実際の流れ

今日私がやったのはこういう流れです。

① Claude Webと相談する

「新星会の会員サイトから2年分の出欠データを一括取得したい」

この相談をClaude Webにしました。画面のスクショを見せながら、URL構造を一緒に確認して、やりたいことを整理しました。

② Claude Webが指示書を作る

相談の結果、Claude CodeへのSTEP別指示書が完成しました。

STEP 0：環境構築 STEP 1：ログイン処理 STEP 2：データ取得 STEP 3：CSV出力

③ Claude Codeにコピペするだけ

あとはSTEP 0からコピペして、「完了」の報告が来たら次のSTEPを貼る。これを繰り返すだけです。

プログラミング未経験でもできた理由

重要なのは1STEPずつ渡すことです。

全部まとめて渡すとClaude Codeが暴走します。1STEPずつ渡して、完了報告を待ってから次に進む。これだけで安定します。

今日1日でやったこと：

• 会員サイトのデータ自動取得スクリプト作成
• アプリをVercelにデプロイ
• ホームページにアプリ事例ページを追加
• お問い合わせフォームをNotion連携で実装

全部、プログラミングなしで。

中小企業・1人社長の方へ

「AIって難しそう」と感じている方へ。

ツールの使い方より先に、段取りの作り方を覚えてください。

Claude Webで相談して、Claude Codeで実装する。この流れさえ覚えれば、あなたのビジネスに必要なアプリが作れます。

まずは「こんなものが欲しい」をClaude Webに話しかけることから始めてみてください。