コードが書けないフリーランスが、Claude Codeで1日でWebアプリを本番公開した話

「Webアプリ、作れました。約半日で。」

自分でもちょっと信じられない話をする。ただし先に種明かしをすると、自分がやったのは「こういうの作りたい」と伝えて「いいね」「お願い」と返事しただけだ。コードは1行も書いていない。

WordPressを中心にWeb制作を10年近くやってきた。PHPをある程度読んで、CSSを書いて、ACFでカスタムフィールドを組むのは得意。でも「ゼロからロジックを書く」プログラミングはできない。変数宣言の構文を調べながら書くレベルで、とても「開発者」とは名乗れない。

そんな自分が、友人に頼まれたWebサービスの相談をきっかけに、Next.js + Supabase + VercelのWebアプリを本番公開するところまでたどり着いた。全部Claude Codeにやってもらった。

※ Next.jsとは、Reactベースのフレームワーク（開発の土台）。Webアプリの画面表示やルーティング（ページ遷移）を効率的に構築できる。

※ Supabaseとは、データベースや認証機能をクラウド上で手軽に使えるサービス。PostgreSQLをGUI（画面操作）で管理でき、バックエンド構築の手間を大幅に減らせる。

※ Vercelとは、Webアプリのホスティング（公開）サービス。GitHubと連携すると、コードをpushするだけで自動的に本番環境にデプロイ（公開）してくれる。

まず、ノーコードで詰まった

最初はノーコードツールで作ろうとしていた。「コード書かなくてもアプリが作れる」という触れ込みのツールで、UIをドラッグ&ドロップで組める。

※「ノーコードツール」とは、プログラミングコードを書かずに画面操作だけでアプリやWebサービスを作れるツールのこと。代表的なものにBubble、FlutterFlowなどがある。

ところが、これが思ったより難しかった。ツールの操作方法そのものを覚えるための学習コストが高くて、「何を作りたいか」じゃなく「このUIどうやって出すんだっけ」という作業に時間を取られる。1画面も完成しないまま、時間だけが過ぎた。

ノーコードツールは「コードを書かなくていい」のは本当だが、「ツール専用の操作作法」という別の言語を覚える必要がある。いわば、車の運転を習うのに教習所のシミュレーターの操作方法から覚えなければいけないような感覚だった。Claude Codeの場合は「日本語で伝える」だけなので、この学習コストがほぼゼロになる。

Claude Codeに「こういうの作りたい」と伝えたら、全部やってくれた

ノーコードで詰まった時点で、Claude Codeに方針転換を相談した。すると「それなら技術スタックはこれがいいと思います」「まず機能設計から整理しましょう」と、向こうからどんどん進めてくれた。

実際の開発フロー——ほぼ全部Claude Code

1. 設計はClaude Codeが整理してくれた

「こういうサービスを作りたい」とざっくり伝えただけで、Claude Codeが機能設計・DB設計・画面一覧を出してくれた。「この機能は要りますか？」「ユーザー認証はどうしますか？」と向こうから質問してくるので、自分は「うん、それでいい」「いや、そこはシンプルでいい」と答えるだけ。

WordPressでやってきた「要件整理」の感覚と同じで、ただし整理してくれるのがAIだった。

2. 画面のコードは全部生成してくれた

「まず投稿フォームの3画面から作って」と言ったら、Next.js + TypeScript + Tailwind CSSのコードが生成された。ファイル構成も「ここにこのファイルを置きます」と教えてくれるので、自分はそれを見てるだけ。

※ TypeScriptとは、JavaScriptに「型」（データの種類を明示する仕組み）を追加した言語。コードの間違いを事前に検出しやすくなり、大規模な開発でも安全にコードを書ける。

※ Tailwind CSSとは、あらかじめ用意された小さなクラス名を組み合わせてデザインするCSSフレームワーク。text-centerやbg-blue-500のように、HTML上でそのまま見た目を指定できる。

3. データベースもClaude Codeが設計・設定した

データベースはSupabaseを使った。テーブル設計もSQLもセキュリティ設定も、全部Claude Codeが書いてくれた。自分はSupabaseのSQL Editorに貼り付けて「実行」を押しただけ。

「RLSも設定しておきましょう。他のユーザーのデータが見えないようにした方が安全です」と先回りして提案してくれたのはありがたかった。「RLSって何？」と聞くとちゃんと説明してくれて、「じゃあお願い」で設定完了。

※ RLS（Row Level Security）とは、データベースの行（レコード）単位でアクセス権限を制御する仕組み。「自分のデータだけ見える」といった制限をデータベースレベルで設定できる。

4. 動作確認は自分がやった（唯一の実作業）

npm run dev でローカルサーバーを立ち上げて、ブラウザで確認。フォームに入力してSubmitすると、Supabaseのダッシュボードにデータが保存されるのを確認できた。

※「npm run dev」とは、Node.js のパッケージ管理ツール npm を使って開発用サーバーを起動するコマンド。ターミナルで実行すると、自分のパソコン上でWebアプリをローカルサーバーとして動かせる状態になる。

※「ローカルサーバー」とは、インターネットに公開せず自分のパソコン上だけで動かすサーバーのこと。「http://localhost:3000」のようなURLでブラウザからアクセスして動作確認できる。

「動いてる」と思った瞬間は、正直かなり嬉しかった。コード1行も書いてないのに動いてる、という不思議な感覚。

5. デプロイもClaude Codeが手順を全部教えてくれた

「GitHubにpushして、Vercelと連携してください。環境変数はこれを設定してください」と、手順を1ステップずつ教えてくれた。自分は指示通りに画面をポチポチしただけ。

※「GitHubにpush」とは、自分のパソコン上で編集したコードをGitHub（クラウド上のコード管理サービス）に送信・同期すること。Dropboxでファイルを保存するのに近いイメージで、コードの変更履歴も管理できる。

※ デプロイとは、開発したアプリやサイトを本番環境（インターネット上）に公開すること。Vercelでは、GitHubにコードをpushするだけで自動的にデプロイされる。

本番URLが発行されて、ブラウザで確認できた。設計を始めてから、ここまで約半日。

自分がやったこと vs Claude Codeがやったこと

こう並べると、自分がやったのは「作りたいものを伝える」「OKを出す」「ブラウザで確認する」の3つだけだった。

WordPress制作者のスキルが活きたのは「判断」の部分

コードは1行も書いていないけど、WordPressで10年やってきた経験は確実に活きた。

「ユーザーはこの画面で何をしたいか」「この情報はどこに保存するか」「エラーが出たらどう見せるか」——Claude Codeが提案してきたものに対して「それでいい」「いや、こっちの方がユーザーに親切」と判断できたのは、Web制作の経験があったからだと思う。

「プログラミングができないと開発できない」と思い込んでいたが、AIがコードを書いてくれる今、人間に求められるのは「何を作りたいか」の整理と「これでいいか」の判断だった。

まとめ——「お願い」だけでWebアプリは作れる時代

正直に書くと、自分がやったことは「お願い」と「OK」がほとんどだ。設計も、コードも、セキュリティも、デプロイ手順も、全部Claude Codeが提案・実行してくれた。

それでも「丸投げ」とは違うと思っている。Claude Codeの提案に対して「本当にそれでいいのか？」と考える力は必要で、それは長年のWeb制作経験から来ている。技術スタックの良し悪しは判断できないけど、「ユーザーにとってどうか」は判断できる。そこだけは人間の仕事だ。

ノーコードが「ツールの操作を覚える学習コスト」を要求するのに対して、Claude Codeは「言葉で伝える」だけでいい。自分のようにWordPressで要件定義をやってきた人間には、後者の方が圧倒的に相性が良かった。

「コードが書けないから無理」と思っている人がいれば、一度試してみてほしい。自分みたいに「お願い」しかしてなくても、ちゃんと動くものができる。

使用技術: Next.js / TypeScript / Tailwind CSS / Supabase / Vercel / Claude Code

※この記事はNPCの中の人 azusaの実務経験をもとに書いています。