Claude Code Webアプリの作り方｜非エンジニア向けに準備から作成まで解説
「Claude Codeを使えばWebアプリが作れる」という話を聞いて、最初は半信半疑でした。
プログラミングの経験がほぼゼロの私が、本当にアプリを作れるのか。コードって書けなくていいの？環境構築って何から始めるの？
この記事では、Claude Code Webアプリの作り方を非エンジニア向けに体験ベースで解説します。インストール・最初のプロンプト・ブラウザでの確認・修正依頼まで、コードを書かずに小さなアプリを作る全流れがわかります。詰まった部分も、「これは思ったより簡単だった」と感じた部分も、包み隠さず書きます。
結論：Claude CodeでWebアプリは作れます。ただし「準備」が8割
先に結論を言います。
Claude CodeでWebアプリを作ることは、非エンジニアにも可能です。
ただし、「AIに任せれば何もしなくていい」というわけではありません。どんなアプリを作るかを明確にして、うまく伝えるための準備が必要です。逆に言えば、準備さえ整えれば、コードを1行も書かずに実用的なアプリが完成します。
私が実際に作ったのは「読書記録アプリ」です。本のタイトル・著者・一言メモを登録して、一覧で見られるシンプルなもの。半日かからずに動くものができました。
Webアプリを作る前に必要な2つの準備
準備1：Claude Pro/Max/Team/Enterpriseプランまたは従量課金
Claude Codeを使うには、Claude Pro/Max/Team/Enterpriseのサブスクリプション、またはClaude Consoleの従量課金アカウントなどが必要です。初心者が始めやすいのはProプラン（月額20ドル目安）です。
料金を惜しんで無料プランのままだとClaude Codeが使えないので、ここは割り切って課金する必要があります。私はすでに加入していたので問題なかったですが、これから始める方はまずプランを確認してください。
準備2：「何を作るか」の言語化
これが一番重要でした。「なんとなく便利なアプリを作りたい」という曖昧な状態でClaude Codeに指示を出しても、なかなかうまくいきません。
「こんな機能がほしい」「こういう場面で使いたい」を事前にメモしておくだけで、Claude Codeへの指示がぐっとスムーズになります。私が最初に書いたメモはこんな感じです。
・本のタイトル・著者名・一言感想を登録できる
・登録した本を一覧で見られる
・シンプルなデザイン、スマホでも見やすい
・インターネットなしでも使えるとうれしい
この4行があるとないとでは、出来上がりのクオリティが全然違います。
実際にやったこと（4ステップ）
STEP 0：Claude Codeをインストールする（初回のみ）
Claude Codeのインストール方法はいくつかあります。ここではnpmを使う方法を紹介します。この場合はNode.js（バージョン18以上）が必要です。
※公式ではNative Install（macOS/Linux/WSL向けのインストールスクリプト、Windows PowerShell、Homebrewなど）も案内されています。npmで入れる場合は以下です。
npm install -g @anthropic-ai/claude-code
（注：`sudo npm install …` は権限トラブルの原因になるため、公式では使わないよう案内されています）
「npmって何？」という方は、Node.jsの公式サイト（nodejs.org）からNode.jsをインストールすると一緒についてきます。
インストール後、`claude`コマンドを初めて実行すると認証画面が表示されます。Pro/Maxプランで使う場合はClaude.aiのアカウントでログインします。APIキーを設定している場合は従量課金側が使われることがあるため、課金方法は初回ログイン時に確認してください。この初期設定は1回だけです。
STEP 1：フォルダを作って起動する
インストールと認証が済んでいれば、ターミナルで作業フォルダを作り、Claude Codeを起動できます。
mkdir reading-app
cd reading-app
claude
「ターミナル操作は難しそう」とずっと思っていたのですが、やってみると3行で終わりました。これだけでClaude Codeのチャット画面が立ち上がります。
STEP 2：最初の指示を出す
Claude Codeのチャット欄に、事前に用意したメモをもとにした指示を貼り付けます。
読書記録Webアプリを作ってください。
【機能】
- 本のタイトル・著者名・ひとこと感想を登録できる
- 登録した本を一覧で見られる
- シンプルなデザインで、スマホでも見やすくする
- データはブラウザのlocalStorageに保存（サーバー不要）
HTML・CSS・JavaScriptのみで作成してください。
まず「動くもの」を優先してください。
これを送ると、Claude Codeが内容を確認しながら進めます。設定によっては「このファイルを作成していいですか？」のような確認を求めてきます。許可を出すと、ファイルの生成が進んでいきます。数分後には`index.html`が完成しました。生成されたコードは700行近くありましたが、私は1行も書いていません。
STEP 3：ブラウザで確認して修正を依頼する
生成されたHTMLファイルをブラウザで開くだけで動作確認できます。サーバーも難しい設定も一切不要です。
実際に開いてみたら、機能は動くけどデザインが少し寂しい。そこで追加で依頼しました。
「登録ボタンをもう少し目立たせてください。背景も白ではなく薄いグレーにしてみてください」
こんな日本語の一言で、すぐに修正されます。コードの細部まで読む必要はありませんが、入力・保存・削除など主要な動作は必ずブラウザで確認します。動作確認をしながら「いい感じ」「もう少し変えて」を繰り返すだけです。
詰まったところを正直に書きます
エラーが出たけど自分で直さなくていい
追加の修正を依頼したとき、指示がうまく反映されないことが1度ありました。画面がおかしくなって焦ったのですが、Claude Codeに「さっきの変更のあと、一覧が表示されなくなった」とそのまま伝えたら、自分で原因を調べて直してくれました。
エラーに直面しても、自分でコードを読み解く必要はほぼありません。「こういう状態になっている」と状況を文章で伝えると、多くの場合は修正案を出してくれます。ただし、修正後の動作確認は自分でブラウザを使って確かめることが大切です。
インターネット公開（デプロイ）はまだ試行中
ローカル環境（自分のパソコン上）でアプリを動かすことはできましたが、それをインターネット上に公開する方法はまだ完全には理解できていません。HTMLだけの小さな静的アプリなら「GitHub Pages」「Vercel」「Netlify」などで公開できます。ただし各サービスの無料枠や公開手順は変わることがあるため、使う前に最新条件を確認してください。Claude Codeに「Vercelでデプロイする方法を教えて」と聞くと手順を教えてくれますが、まだ完全に理解できていない部分もあり、引き続き試行中です。
「自分だけ使えればいい」という用途なら、公開しなくても十分使えます。焦る必要はないと思っています。
Claude Codeに貼れるプロンプト
最初にWebアプリを作るとき、このプロンプトをそのまま使ってみてください。
以下の仕様でシンプルなWebアプリを作ってください。
【アプリの目的】
（例：料理レシピを記録・一覧表示できるアプリ）
【必要な機能】
1. （例：料理名・材料・手順を入力できる）
2. （例：登録したレシピを一覧で見られる）
3. （例：キーワードで検索できる）
【条件】
- index.html 1ファイルで作成してください（サーバー不要、ブラウザで開いて動く形で）
- データはlocalStorageに保存
- スマホでも見やすいデザイン
- まず「動くもの」を優先してください
- 完成後、「どのファイルをブラウザで開けばいいか」を教えてください
「まず動くものを」と最後に添えるのがコツです。最初から完璧を求めると指示が複雑になりがちで、Claude Codeも迷います。まずシンプルに動くものを作ってもらい、あとから「ここを変えて」と改良していく方が、結果的に早くいいものができます。
まとめ
Claude CodeでWebアプリを作るのに必要なことを整理します。
- **Claude Pro/Max/Team/Enterpriseプランまたは従量課金**が必要（初心者はProプランから）
- **Node.jsインストール + npmでのClaude Codeインストール**が最初の関門
- **「何を作るか」の言語化**が最重要。曖昧なままスタートしない
- **ターミナル操作**はインストール後は最低限（3行程度）で済む
- **エラーが出ても状況を文章で伝えれば**多くの場合は修正案が返ってくる（動作確認は自分で）
- **ローカル環境で動かすだけなら**設定は驚くほど少ない
- **インターネット公開（デプロイ）**はGitHub Pages/Vercel/Netlifyで可能だが別途学ぶ必要がある（まだ試行中）
「プログラミングができないと無理」だと思っていましたが、それは違いました。必要なのは「何が欲しいか」を言葉にする力だけです。
最初のアプリは小さくていい。「自分が毎日使いたいもの」から始めると、途中で諦めにくくなります。私は読書記録アプリを今でも毎日使っています。
