プログラミング未経験でも、Claude Codeでアプリを作れますか？

作れます。コードを書く作業はClaude Codeが担当します。自分でやるのは、作りたいものを日本語で伝えることと、できあがった結果を確認して直したい所を伝えることです。

Claude Codeでアプリ開発をするには、いくらかかりますか？

Claude Codeは無料プランでは使えません。Proプランで月20ドル（年払いなら月あたり17ドル）です。ToDoアプリのような小さなアプリは、Proの範囲で作れます。

Claude Codeで最初に作るアプリは、何がいいですか？

1つの機能で完結するアプリがおすすめです。ToDoアプリ、文字数カウンター、習慣チェックカレンダーなどです。この記事では、ToDoアプリを作る手順を説明しています。

Claude Codeでスマホアプリも作れますか？

作れます。ただし、Webアプリと手順が変わるため、最初の1つはWebアプリで流れをつかむのがおすすめです。スマホアプリの作り方は、別の記事で説明する予定です。

Claude CodeとCodexは、どちらでアプリ開発をするのがいいですか？

どちらもアプリ開発に使えます。違いや使い分けは、別の記事で説明しています。

Claude CodeとCursorは、何が違いますか？

Cursorはコードを編集するアプリにAIが組み込まれたもので、Claude Codeはターミナルで動くAIです。比較は、別の記事にまとめています。

Claude Codeでアプリ開発する方法｜初心者が最初の1つを作って公開するまでの全手順

2026年10月8日

当ページのリンクには広告が含まれている場合があります。

Claude Codeでアプリ開発する方法｜初心者が最初の1つを作って公開するまでの手順【2026年版】

こんにちは、ハックです。AIを相棒に、プログラミング未経験から今では様々なツールやアプリを開発している一人社長です。

「Claude Codeでアプリを作ってみたいけど、何から始めればいいのか分からない」

「コードが読めなくても、本当に最初の1つが完成するの？」

そう思って検索して、ここに来た人が多いと思います。

結論から言うと、コードが読めなくても作れます。

必要なのは、作りたいものを日本語で伝えることと、Claude Codeに渡す指示書（CLAUDE.md）を用意すること、この2つだけです。

この記事では、ToDoアプリを題材に、Claude Codeへ送る指示文をそのままコピーできる形で5ステップにまとめました。

Tailwind CSSを使ったデザインの指定まで入れているので、見た目も整ったアプリになります。

ハック（Hack）

最初の1つは、機能を1個に絞るのがいちばん続くんだよね。ToDoアプリは、その大きさにちょうどいいかなぁ〜。

駆動愛

1個に絞れば、指示文も短く済みますね。各STEPの指示文はコピーして貼れる形で載せています。CLAUDE.mdのひな形も、準備の章に置いています。

🧭 読み終えたとき、あなたはこうなっています

Claude Codeで作れるアプリの種類と、最初に作るのに向いているアプリが分かる
CLAUDE.mdのひな形をコピーして、自分のアプリ用に書き換えられる
5ステップの指示文を順に送って、ToDoアプリを完成させられる
Tailwind CSSで、配色・余白・角丸・影・ダークモードまで指定したデザインにできる
エラーが出たときの直し方と、つまずきやすい所の対処が分かる

⚠️ この記事の信頼性について

筆者（ハック）は、プログラミング未経験からAI駆動開発を始め、今では日常的にClaude CodeとCodexを使い、様々なツールやアプリを開発しています。この記事の指示文は、ToDoアプリを題材にした手順として書いたものです。料金は、Claude Codeの料金を解説した当サイトの記事に載せている金額の範囲で書いています。確認日は2026年10月時点のものです。

Claude Codeでアプリ開発はできる？初心者が作れるアプリの例

できます。Claude Codeは、パソコンの中のフォルダを直接読み書きして、アプリのファイルを作ってくれるAIです。

初心者が最初に迷うのは、「どこまで自分でやるのか」だと思います。

自分でやるのは、何を作りたいか？を決めることと、出てきた結果を見て「ここを直して」と伝えることです。
コードを書く作業は、Claude Codeが担当します。

Claude Codeとは？初心者でもアプリ開発ができる理由

Claude Codeは、Anthropic社が提供している、ターミナル（文字で操作する画面）で動くAIコーディングツールです。

チャットのAIとの違いは、コードをコピーして貼り付ける作業が要らないことです。

フォルダの中にファイルを作り、動かし、エラーが出たら自分で読んで直します。だから、コードの書き方を知らなくても、完成まで進められます。

Claude Codeそのものに関する説明は、以下の記事で詳しくまとめています。

Claude Codeで作れるアプリの種類（Webアプリ・ツール・スマホアプリ）

作れるアプリは、大きく3種類です。

種類	中身	初心者の最初の1つに
Webアプリ	ブラウザで開いて使うアプリ（ToDo・家計簿・診断ツールなど）	向いている
ツール	入力した内容を変換・集計する1画面のもの（文字数カウンター・ジェネレーターなど）	向いている
スマホアプリ	iPhone・Androidで動くアプリ	2つ目以降がおすすめ

ちなみに、僕が最初に作った本格的なWebアプリは、「SEO分析ツール」です。構成は、Next.js 16（App Router）・Supabase・Vercel・Stripeで、最もおすすめの基本構成として紹介しています。

Next.jsはWebアプリを作るための枠組み、Supabaseはデータを保存するサービス、Vercelはアプリを公開するサービス、Stripeは課金を受け付けるサービスです。

この記事では、まず保存も課金も要らないToDoアプリから始めます。

スマホアプリは、Webアプリと手順が変わるため、別の記事でまとめる予定です。

🔗【リンク予定：Claude Codeでスマホアプリを開発する方法（現在作成途中・公開後リンク予定）】

初心者が最初に作れるアプリの例

最初の1つは、1つの機能で完結するアプリが向いています。

ToDoアプリ（やることを追加・完了・削除する）
文字数カウンター（入力した文章の文字数を表示する）
習慣チェックカレンダー（その日にできたかを記録する）

この記事では1つ目のToDoアプリを作ります。

アイデアの選び方や、ほかの例は、個人開発のアイデアの記事にまとめています。

Claude Codeの料金｜無料でできる？Proで足りる？

Claude Codeは、無料プランでは使えません。ブラウザのチャット版Claudeは無料でも触れますが、Claude Codeは別扱いです。

最初に選ぶのは、Pro（月20ドル、年払いなら月あたり17ドル）で足ります。

日本円では、月3,000円前後です。

Maxは、Proの5倍・20倍の使用量があるプランで、100ドルからです。ToDoアプリのような小さなアプリは、Proの範囲で余裕で作れます。

Proで実際にどこまでできるかは、以下の記事で作業ごとに詳しく書いています。

アプリ開発を始める準備（Windows・Mac）

準備は3つです。

Claude Codeのインストールとログイン
アプリ用の作業フォルダを作る
CLAUDE.mdを置く

WindowsでもMacでも、やることは同じです。

Claude Codeのインストールとログイン

インストールの手順は、OSごとに画面が違うため、以下の記事にまとめています。

VS Code（コードを編集するアプリ）の中で使いたい人は、以下の記事が分かりやすいです。

ログインには、前の章で説明したProプランのアカウントを使います。

CLAUDE.mdに作りたいアプリの指示を書いておく

CLAUDE.mdは、Claude Codeが毎回最初に読む、指示書のファイルです。フォルダの一番上に置くと、Claude Codeが起動したときに自動で読み込みます。

ここに「何を作るか」「使う技術」「守ってほしいルール」を書いておくと、毎回同じ説明を繰り返さずに済みます。指示のブレも減るので、初心者ほど最初に用意するのがおすすめです。

まず、フォルダを作ってClaude Codeを起動します。ターミナルで、次の3行を順に実行します。

mkdir todo-app cd todo-app claude

起動したら、次のひな形をコピーして、Claude Codeに「この内容でCLAUDE.mdというファイルを作って」と頼みます。

# プロジェクト概要
ToDoアプリ。やることを追加・完了・削除できる1画面のWebアプリ。

# 使う技術
- Next.js（App Router）と TypeScript
- Tailwind CSS でデザインする
- データはブラウザの localStorage に保存する（外部サービスは使わない）

# 作業のルール
- 私はプログラミング未経験です。専門用語は、使うたびに1行で説明してください。
- 大きな変更の前に、何をするか日本語で説明して、私の確認を待ってください。
- ファイルを削除するときは、先に私に確認してください。
- 作業が終わったら、動かし方を日本語で書いてください。

# デザインの方針
- 余白は広めにとり、角丸と軽い影で、やわらかい印象にする
- 色は落ち着いた2色までに絞る

「プロジェクト概要」と「使う技術」を、自分が作りたいアプリに書き換えれば、ほかのアプリにも使えます。

CLAUDE.mdの書き方を詳しく知りたい人は、以下の記事をどうぞ。

起動時の動作や許可の設定は、以下の記事で説明しています。

Claude Codeでアプリ開発する手順｜初心者向け5ステップ

ここからが本題です。各STEPの指示文を、Claude Codeの入力欄にそのまま貼って送ります。

流れは、次の以下の5つです。

作りたいアプリの機能を日本語で伝える
開発の計画を出させて確認する
Tailwind CSSでデザインまで指示して作らせる
エラーをClaude Codeに直してもらう
作ったアプリを公開する

STEP1 作りたいアプリの機能を日本語で伝える

最初に、アプリに何をさせたいか？を伝えます。

この時点では、デザインや技術の話は要りません。機能だけを書きます。

次の指示文を、そのまま送ります。

ToDoアプリを作りたいです。次の機能がほしいです。

1. やることを入力して「追加」できる
2. やることにチェックを付けると、完了になる（文字に取り消し線）
3. やることを削除できる
4. 「すべて」「未完了」「完了」で表示を切り替えられる
5. ブラウザを閉じても、内容が消えない

CLAUDE.mdの内容に従ってください。まだコードは書かず、理解した内容を日本語でまとめてください。

「まだコードは書かず」と添えるのがポイントです。

先にClaude Codeの理解を確認できるので、勘違いを早い段階で直せます。返ってきたまとめを読んで、違っていたら「2番は〇〇にして」と伝えます。

STEP2 開発の計画を出させて確認する

理解が合っていたら、次は作り方の計画を出させます。

この内容で作る計画を、手順の番号付きで出してください。
作るファイルの名前と、それぞれの役割も書いてください。
私が確認するまで、コードは書かないでください。

計画で見るのは、次の2点です。

最初に伝えた5つの機能が、すべて入っているか
CLAUDE.mdに書いた技術（Next.js・Tailwind CSS・localStorage）で作る計画になっているか

ファイル名の意味が分からなくても大丈夫です。

「このファイルは何をするの？」と聞けば、日本語で答えてくれます。

計画に問題がなければ、「この計画で進めて」と送ります。

STEP3 Tailwind CSSでおしゃれなデザインまで指示して作らせる

ここで、機能とデザインを一緒に作らせます。

Tailwind CSSは、class名を書くだけで見た目を指定できるデザインの仕組みです。

Claude Codeは、このTailwind CSSでの書き方をよく知っています。

初心者がやりがちな失敗は、ただ、「おしゃれにして！」とだけ伝えることです。これだと、Claude Codeも曖昧な判断しかできず、ありきたりな見た目になります。

なので、あらかじめ、配色・余白・角丸・影・文字・動きを具体的に指定することで、仕上がりも変わってきます。

次の指示文を送ります。

計画に沿って、ToDoアプリを作ってください。デザインは Tailwind CSS で、次の指定どおりにします。

【全体】
- 背景は薄いグレー（slate-50）、中央に幅の狭いカード（max-w-md）を置く
- カードは白、角丸は大きめ（rounded-2xl）、影はやわらかく（shadow-lg）
- カード内の余白は広め（p-6）、項目どうしの間隔も広め（space-y-3）

【配色】
- メインカラーは1色だけ、インディゴ（indigo-600）にする
- 文字は濃いグレー（slate-800）、補足の文字は薄いグレー（slate-400）

【部品】
- 入力欄は角丸（rounded-xl）、枠は薄いグレー。フォーカス時はインディゴの枠線にする
- 「追加」ボタンは、インディゴの背景に白文字。マウスを乗せると少し濃くなる
- 完了にしたやることは、取り消し線と薄い文字色にする
- 切り替えの「すべて／未完了／完了」は、選んでいるものだけインディゴの背景にする

【動き】
- 色や表示の変化には、短いアニメーション（transition）を付ける

【ダークモード】
- パソコンの設定が暗い表示のときは、背景を濃い紺（slate-900）、カードを slate-800 にして、文字色も読みやすく調整する（dark: を使う）

【スマホ】
- スマホの幅でも崩れないようにする

完成したら、動かし方を日本語で教えてください。

この指示文のポイントは、次の3つです。

色は「メインカラー1色＋グレー」に絞る
余白は広め、角丸は大きめにする（やわらかい印象になる）
ダークモードとスマホ幅も最初から指定する

動かし方が返ってきたら、その通りに実行して、ブラウザで確認します。たいていは、ターミナルで npm run dev を実行して、http://localhost:3000 を開く手順です。

見た目を直したいときは、感想をそのまま伝えます。

カードの上に、「今日のやること」という見出しを足してください。
見出しは太字で、文字サイズは大きめ（text-2xl）にしてください。

「もう少し余白を広く」「影を弱く」のように、言葉で伝えるだけで直ります。

STEP4 エラーをClaude Codeに直してもらう

アプリ開発では、エラーが出ます。初心者でも、エラーが出ること自体は失敗ではありません。

直し方は、とても簡単です。エラーの文章をそのままコピーして、Claude Codeに貼るだけです。

次のエラーが出ました。原因を日本語で説明して、直してください。

（ここにエラーの文章を貼る）

画面が真っ白になったり、ボタンが動かなかったりして、エラーの文章が出ていないときは、状況を言葉で伝えます。

「追加」ボタンを押しても、やることが増えません。
原因を調べて、直してください。

エラーの種類ごとの直し方は、以下の記事にまとめています。

STEP5 作ったアプリを公開する

アプリが動いたら、公開して、URLで誰でも開けるようにします。

ToDoアプリのように、データをブラウザの中に保存するアプリは、Vercelなどの公開サービスで無料の範囲から始められます。

公開の手順は、以下の記事にまとめています。

公開前に、Claude Codeへ次のようなプロンプトで頼むと、確認も任せられます。

このアプリを公開する前に、確認することを一覧にしてください。
パスワードやAPIキーのような、公開してはいけない情報が
ファイルに入っていないかも調べてください。

失敗しないプロンプトのコツ

5ステップを通して使った、指示文のコツをまとめます。

1回の指示は、1つの機能に絞る。一度に5つ頼むと、どれかが抜けます
欲しい結果を具体的に書く。デザインなら、色・余白・角丸・影まで書く
確認したいときは「まだコードは書かず」と添える。勘違いを早く見つけられる
直したい所は、感想のまま伝える。「もっとやわらかく」「余白が窮屈」で通じる
毎回伝えることは、CLAUDE.mdに移す。同じ説明を繰り返さなくて済む

5番目の「毎回伝えること」が増えてきたら、それをまとめて呼び出せるようにするのが、スキルとスラッシュコマンドです。

スキルは、決まった作業の手順をまとめて、Claude Codeに覚えさせる仕組みです。以下の記事で作り方を説明しています。

スラッシュコマンドは、/ から始まる短い命令で、決まった指示をすぐ呼び出す仕組みです。以下の記事にまとめています。

つまずきやすい所とセキュリティの注意点

つまずきやすい所は、次の4つです。どれも、直し方が決まっています。

つまずく所	直し方
使用量の上限に達して、作業が止まる	時間を置くか、作業を小さく区切る。対策は下の記事を参照
長く作業すると、最初の指示を忘れたような動きをする	`/compact` で会話を要約してから続ける。CLAUDE.mdに大事な指示を書いておく
出来上がった見た目が、思っていたものと違う	「色は〇〇、余白は広く」のように、STEP3の形で具体的に伝え直す
変更を重ねて、動いていた所が壊れた	「さっきの変更を元に戻して」と頼む。変更の前に、Git（変更履歴を記録して元に戻せる仕組み）で保存しておくと安心

使用量の上限で止まる問題は、以下の記事で対処法をまとめています。

会話が長くなったときの /compact コマンドは、以下の記事で説明しています。

セキュリティで守る3つのこと

アプリを公開するときは、次の3つを守ります。

パスワードやAPIキー（外部サービスを使うための合言葉）を、指示文やファイルに直接書かない。.env というファイルにまとめて、公開しない設定にする
Claude Codeの許可の確認は、内容を読んでから「はい」を押す。ファイルの削除やコマンドの実行は、何をするのかを見る
公開前に、Claude Codeへ「公開してはいけない情報が入っていないか」を調べさせる（STEP5の指示文）

ToDoアプリは、保存先がブラウザの中なので、守る情報は多くありません。

ただし、SupabaseやStripeのような外部サービスをつなぐ段階になると、1番目の .env の管理が大事になります。

作ったアプリで稼ぐには？販売・収益化の始め方

アプリで稼ぐには、最初の1つを公開してから、課金の仕組みを足す順番が確実です。

ToDoアプリのような練習用は、そのままでは稼げません。次に、「誰かの困りごとを解決する1機能のアプリ」を作って、公開します。

課金は、Stripeで受け付けます。僕が開発した「SEO分析ツール」も、Stripeで課金できる構成にしました。

1つ目を作って公開できたら、2つ目以降で「データを保存する（Supabase）」「課金を足す（Stripe）」と少しずつ広げます。最初から全部を作ろうとしないのが、続けるコツです。

AIで個人開発を始めてから、公開・収益化まで進める全体の流れは、ロードマップの記事にまとめる予定です。

🔗【リンク予定：AI個人開発ロードマップ（現在作成途中・公開後リンク予定）】

Claude Codeでのアプリ開発によくある質問

プログラミング未経験でも、Claude Codeでアプリを作れますか？: 作れます。コードを書く作業はClaude Codeが担当します。自分でやるのは、作りたいものを日本語で伝えることと、できあがった結果を確認して直したい所を伝えることです。
Claude Codeでアプリ開発をするには、いくらかかりますか？: Claude Codeは無料プランでは使えません。Proプランで月20ドル（年払いなら月あたり17ドル）です。ToDoアプリのような小さなアプリは、Proの範囲で作れます。
Claude Codeで最初に作るアプリは、何がいいですか？: 1つの機能で完結するアプリがおすすめです。ToDoアプリ、文字数カウンター、習慣チェックカレンダーなどです。この記事では、ToDoアプリを作る手順を説明しています。
Claude Codeでスマホアプリも作れますか？: 作れます。ただし、Webアプリと手順が変わるため、最初の1つはWebアプリで流れをつかむのがおすすめです。スマホアプリの作り方は、別の記事で説明する予定です。
Claude CodeとCodexは、どちらでアプリ開発をするのがいいですか？: どちらもアプリ開発に使えます。違いや使い分けは、以下の記事で説明しています。
https://ai-hacks.jp/claude-code-vs-codex/
Claude CodeとCursorは、何が違いますか？: Cursorはコードを編集するアプリにAIが組み込まれたもので、Claude Codeはターミナルで動くAIです。比較は、以下の記事にまとめています。
https://ai-hacks.jp/claude-code-vs-cursor/