「コードが書けない」はもう言い訳にならない
2026年、プログラミング未経験者がClaude Codeを使ってWebアプリを作り、実際にリリースする事例が日本でも急増している。Flutterアプリをゼロから作ってGoogle Playに公開した人、社内ツールを自作して業務を自動化した人——いずれもプログラミング経験ゼロからのスタートだ。
この記事では、プログラミング未経験の筆者が実際にClaude Codeを使ってWebアプリを作った過程を、つまずきポイントも含めて正直にレポートする。
作ったもの：シンプルなタスク管理アプリ
今回作ったのは、日々のタスクを管理するシンプルなWebアプリだ。
| 機能 | 内容 |
|---|---|
| タスク追加 | タイトルと期限を入力して追加 |
| 完了チェック | チェックボックスで完了/未完了を切り替え |
| フィルター | 全件/未完了/完了済みを切り替え |
| 削除 | 不要なタスクを削除 |
| データ保存 | ブラウザを閉じてもデータが残る |
開発の流れ：Claude Codeへの指示ログ
指示1：「Next.jsでタスク管理アプリを作って」
最初の指示はこれだけ。Claude Codeは自動でプロジェクトを初期化し、必要なファイルを作成し始めた。10秒ほどで基本的なUIが完成。ターミナルに「開発サーバーを起動していいですか？」と聞かれたので、承認すると、ブラウザでアプリが表示された。
指示2：「タスクに期限を追加して、期限が近いものを上に表示して」
Claude Codeは既存のコードを読み込み、データ構造に期限フィールドを追加し、ソート機能を実装した。この間、コードを一行も手で書いていない。
指示3：「デザインをもっと洗練させて。Tailwind CSSで」
ここで少し問題が起きた。Claude Codeが提案したデザインが自分のイメージと違った。そこで「白ベースの背景に、青系のアクセントカラーで、カード型のレイアウトにして」と具体的に指示し直すと、期待通りのデザインになった。
指示4：「データをローカルストレージに保存して」
ブラウザを閉じるとデータが消える問題を指摘すると、Claude Codeは即座にローカルストレージへの保存機能を実装した。
つまずきポイントと解決策
| つまずき | 原因 | 解決策 |
|---|---|---|
| エラーメッセージが出た | パッケージの依存関係 | エラーをそのままClaude Codeにコピペ→自動修正 |
| デザインが違う | 指示が抽象的すぎた | 色、レイアウト、サイズを具体的に指定 |
| 機能追加で既存が壊れた | AIの意図しない副作用 | Gitコミットしてから新機能追加→壊れたらロールバック |
| 何をしているか分からない | コードの理解不足 | 「今の変更を初心者向けに説明して」と質問 |
完成までの時間
| 工程 | 所要時間 |
|---|---|
| 基本機能の実装 | 約15分 |
| 機能追加（期限、フィルター） | 約20分 |
| デザイン調整 | 約30分 |
| バグ修正・テスト | 約15分 |
| 合計 | 約1時間20分 |
プログラミング未経験者が、1時間半以内にデータ永続化付きのタスク管理アプリを完成させた。これは2〜3年前なら考えられなかったことだ。
プログラミング未経験者がClaude Codeを使う際のTips
| Tips | 内容 |
|---|---|
| 具体的に指示する | 「いい感じに」ではなく「青系のボタン、角丸8px、影付き」 |
| エラーはコピペ | エラーメッセージをそのまま伝えればAIが解決してくれる |
| こまめにコミット | 「変更をコミットして」と定期的に伝える |
| 質問を恐れない | 「これは何をしている？」と聞けば丁寧に説明してくれる |
| 小さく始める | いきなり大きなアプリを作らず、最小機能から段階的に |
まとめ：「作る力」は誰でも手に入る
プログラミング未経験者にとって、Claude Codeは「魔法の杖」ではなく「非常に優秀なパートナー」だ。何を作りたいかを明確に伝える力——つまり「ディレクション能力」——があれば、コードを書く能力がなくてもアプリは作れる。
「書く仕事」をしている人は、この「要件を言語化する力」がすでに身についている。だからこそ、ライターや編集者はClaude Codeとの相性が抜群に良い。まずは簡単なツールから作ってみてほしい。