Claude Codeは、Anthropicが開発した、日本語で頼むとコードを書いて動作まで確かめるAIツールです。
ただ、プログラミング未経験の自分にもアプリが作れるのか、迷う方も多いのではないでしょうか。
実はコードを一行も書かずに、入力内容が保存されるアプリを作って動かせます。
この記事では、Claude Codeで作れるアプリの種類から作り方の5ステップ、公開のやり方と料金まで解説します。
ホームページやLPのように見た目を整えるサイトの作り方は以下記事で解説しているので、機能ではなくページを作りたい方はご覧ください。
- Claude Codeで作れるアプリの種類
- アプリ開発を始める前に用意するもの
- 指示を出してアプリが動くまでの5ステップ
- 作ったアプリを他の人に使ってもらう公開のやり方
- 指示の出し方のコツと知っておくべき注意点
- Claude Codeでアプリ開発するときにかかる料金
生成AIパスポート取得者が内容をチェック
当サイトの記事は、生成AIに関する基礎知識やリスク、適切な活用方法などを学ぶ「生成AIパスポート」の取得者が内容を確認しています。情報の正確性や分かりやすさを意識した記事づくりに努めています。
Claude Codeの開発で作れるアプリの種類
Claude Codeで作れるアプリは、ブラウザで動くものだけではありません。
この記事で扱うアプリは、入力した内容が保存されたり、ログインして使えたりする、動きのあるものを指します。
ここでは、Claude Codeで作れる代表的な5種類を、作例とあわせて取り上げます。
ブラウザで動くWebアプリ
ブラウザで動くWebアプリは、Claude Codeでいちばん作りやすい種類です。
使う人はURLを開くだけで、パソコンにもスマートフォンにも何も入れなくて済みます。
例えば、日付と金額と使い道を入力すると月ごとの合計が出る家計簿がその一例です。
Claude Codeに「支出を記録して月ごとに集計する家計簿を、1画面で動くように作って」と伝えれば、画面と計算の処理をまとめて用意してくれます。
保存する仕組みやログインを足していけば、そのまま人に使ってもらえるところまで育てられるでしょう。
ファイルをインターネット上のサービスに置けばURLで開けるようになるため、人に使ってもらうまでの手順がほかの種類よりも少なくて済みます。
スマートフォンに入れて使うアプリ
スマートフォンに入れて使うアプリには、ホーム画面に追加してもらう形と、App StoreやGoogle Playから入れてもらう形の2通りがあります。
外出先で開いてその場で書き込む買い物メモのような使い方が、この種類の代表例です。
Claude Codeに「スマートフォンの画面幅に合わせた買い物メモを作って」と伝えると、指で押しやすいボタンの大きさまで含めて組み立ててくれます。
文字の大きさや、片手で届く位置にボタンを置くところまで指定できます。
パソコンの中だけで動かす業務用ツール
パソコンの中だけで動かす業務用ツールは、画面を作らなくても成り立ちます。
フォルダに溜まった請求書のPDFから日付と取引先と金額を抜き出して、1つの表にまとめる道具がその一例です。
Claude Codeに「このフォルダのPDFを全部読んで、日付と取引先と金額を表にして」と伝えると、読み取りから表の書き出しまで一続きで組み立ててくれます。
ファイルを置いて実行するだけの形にできるので、操作を覚える手間もかかりません。
できあがったツールは、外部のサービスにつながない作りにしておけばパソコンの中だけで動きます。
ただし、作る過程でClaude Codeに読み込ませたファイルの中身は外部へ送られるため、社外に出せない資料はダミーのデータに置き換えてから渡しましょう。
社内のデータをまとめて見る管理システム
表計算ファイルで散らばっていた顧客の情報を、Claude Codeなら検索して絞り込める1つの画面にまとめられます。
登録する画面と一覧の画面を分けて作れるので、入力する担当者と見るだけの担当者で使い方を変えられるのが利点です。
Claude Codeに「顧客名と電話番号と対応履歴を登録して、担当者ごとに絞り込める画面を作って」と伝えれば、両方の画面をまとめて用意してくれます。
数人で同時に使うなら、誰が書き換えたかを残せるようにログインの仕組みも加えておきましょう。
社外に出す必要のないデータなら、社内のパソコンだけで動かす形でも足ります。
遊びながら覚えられる小さなゲーム
英単語のクイズのような小さなゲームは、Claude Codeを初めて触る日の題材に向いています。
出題と正誤の判定と得点の表示しかないので、指示とできあがったものの対応を目で追えるからです。
Claude Codeに「英単語を4択で出題して、10問終わったら正解数を出すクイズを作って」と伝えるだけで、動くところまで組み立ててくれます。
問題の一覧を書き換えられる形にしておけば、家族や生徒向けの教材にも作り替えられるでしょう。
小さく作って動かす経験を1つ持っておくと、次に業務用のアプリを頼むときの指示が具体的になります。
Claude Codeでアプリ開発を始める前に用意するもの
Claude Codeでアプリ開発を始めるのに、高価なパソコンも専門の開発環境も要りません。
手元で開発する場合は、Claude Codeが使えるアカウントと本体、作業用のフォルダを用意しましょう。
あわせて、生成されたコードを見るエディタと、誰が何に使うかを書いたメモをそろえておくと作り直しが減ります。
ここでは、最初にそろえておくもの5つを順に取り上げます。
Claude Codeを使える有料プランのアカウント
Claudeの有料プランに加入すると、プランに含まれる利用枠でClaude Codeを使えます。
公式の料金ページでは、無料プランは対象外と明記されています。
加入はClaudeの公式サイトから進められ、加入後すぐに使い始められます。
初回の起動時にはログインを求められるので、先にアカウントを用意しておいてください。
Claude Code自体は、開発者向けのAPIアカウントであるClaude Consoleでも動きます。
ただし前払いしたクレジットから使った分だけ引かれる仕組みのため、月ごとの料金は有料プランのほうが見通しを立てやすくなります。
起動時のログイン画面ではAnthropic Consoleと表示されますが、公式ドキュメントの現行表記はClaude Consoleです。
管理画面のURLはplatform.claude.comです。
パソコンにインストールしたClaude Code本体
Claude Code本体は、ターミナルでコマンドを1行実行すれば入ります。
macOSでは「ターミナル」、Windowsでは「PowerShell」がコマンドの入力先です。
macOS・Linuxでは次を実行してください。
ターミナル（macOS・Linux）
curl -fsSL https://claude.ai/install.sh | bashWindowsのPowerShellで実行するコマンドは次のとおりです。
ターミナル（Windows PowerShell）
irm https://claude.ai/install.ps1 | iexclaude --version コマンドを打って、バージョン番号と「(Claude Code)」が並んで出れば成功です。
例えば「2.1.263 (Claude Code)」と表示されます。
バージョンが表示されないときは、ターミナルを開き直してもう一度同じコマンドを打ってみましょう。
それでも入らない場合は、下のTroubleshoot installation and loginでエラー文に対応する対処を確認してください。
Windowsで使う場合、公式ドキュメントはGit for Windowsをあわせて入れることを推奨しています。
Git for Windowsがない環境ではコマンドの実行にPowerShellが使われ、公式ドキュメントの説明と動きが変わる場合があります。
このインストール方法では、Node.jsを先に入れる必要はありません。
インストール後は、作業用のフォルダで使い始めましょう。
参考：Quickstart（Claude Code公式ドキュメント）
参考：Troubleshoot installation and login（Claude Code公式ドキュメント）
アプリのファイルを入れておくフォルダ
Claude Codeは、起動したフォルダの中身を作業場所として扱います。
ここからは、家計簿アプリを作る場合を例に進めていきます。
デスクトップにkakeiboという名前のフォルダを作り、その中で起動しましょう。
ターミナルで cd コマンドを使ってフォルダに移動してから、claude コマンドを打つと対話が始まります。
ターミナル
cd ~/Desktop/kakeibo
claudeアプリごとにフォルダを分けておけば、前に作ったファイルが混ざりません。
Claude Codeは指定したフォルダの外にあるファイルを触るときに確認を求める設定にできるため、ほかの資料を意図せず書き換える心配を減らせます。
フォルダの名前は英数字にしておくと、あとで公開するときに扱いやすくなります。
生成されたコードを開いて見るエディタ
エディタはなくてもアプリは作れますが、入れておくとClaude Codeへ修正を頼むときの言葉が具体的になります。
生成されたファイルを自分の目で見られるので、どの画面のどの部分を直してほしいのかを名指しできるからです。
無料で使えるVisual Studio Codeを入れておけば、フォルダごと開いてファイルの一覧を眺められます。
Claude CodeにはVisual Studio Codeの中から使える拡張機能も用意されており、画面を行き来せずに指示を出せます。
コードの中身が読めなくても構いません。
ファイル名と、そのファイルに何が書いてあるかを大まかにつかめれば十分です。
誰が何のために使うアプリなのかを決めた1枚のメモ
Claude Codeは伝えられた条件どおりに作るため、条件があいまいなままだと、出てきたものを見てから考え直すことになります。
作りたいアプリの中身を先に決めておけば、この作り直しが減ります。
決めておくのは、誰が使うか、どんなときに開くか、何をするために使うかの3つです。
家計簿なら「自分が使う」「買い物から帰った直後に開く」「その月にいくら使ったかを知る」といった具合に書き出しましょう。
書き出したメモをそのままClaude Codeに読ませれば、画面に置く項目もボタンの並びも、条件に沿った形で出てきます。
紙1枚で足りるので、思いついた順に書いて構いません。
Claude Codeでアプリを作る手順
Claude Codeでのアプリ開発では、ChatGPTなどにコードを聞いて手作業でファイルに貼り付ける工程が要りません。
作りたいものを伝えると、Claude Codeがファイルを作って保存し、動かして確かめるところまで進めます。
一度の指示で完成品を求めるほど、意図と違う部分がどこで混ざったのかを追えなくなるため、指示は小さく分けて出しましょう。
ここでは、最初の指示から保存やログインを足すまでの5つのステップを取り上げます。
作りたいアプリを日本語で伝える
Claude Codeへの最初の指示では、作りたいアプリの中身を日本語でそのまま伝えましょう。
「家計簿を作って」だけでは、画面の項目や保存方法をAIが決めることになります。
指示文に入れておきたいのは、記録する項目と、見たい集計、使う人数、画面の数の4つです。
家計簿なら、次のように書くと必要な画面と処理が漏れなく伝わります。
「日付・金額・使い道を記録し、月の合計を見られる家計簿を作りたいです。1人で使う1画面の構成を考え、まだコードを書かずに計画だけ出してください。」
次の入力例では、HTML・CSS・JavaScriptだけで作る条件も加えています。
AIへの指示文は専門用語に置き換える必要はなく、同僚に頼むときと同じ言葉で構いません。
最初は入力と一覧表示に絞って書くと、できあがりの確認も短く済みます。
書き上げた指示文は、プランモードに切り替えてから送りましょう。
作り始める前に計画を出させて確認する
Claude Codeに指示を送る前にプランモードへ切り替えておくと、コードを書かずに計画だけが返ってきます。
デスクトップアプリはモードメニューの「プラン」を選び、ターミナル版はShift+Tabで切り替えてください。
切り替わると、画面のモード表示が「プラン」または「Plan」になります。
Planは、調査と計画をAIに任せ、ソースコードの編集を保留する権限モードです。
今回の計画には、日付・金額・使い道の入力欄と、月の合計や一覧の配置が示されました。
欲しい機能が含まれているかを確かめ、方向がずれていたら作り始める前に伝え直しましょう。
「支出の分類と、分類ごとの合計も計画に追加してください。まだ実装しないでください。」
計画を確認したらPlanを解除し、Claude Codeに「まず入力欄と一覧だけ実装し、合計と分類はまだ作らないで」と伝えましょう。
参考：Quickstart（Claude Code公式ドキュメント）
画面と機能を1つずつ作らせる
Claude Codeへの依頼は、画面と機能を1つずつに分けて出しましょう。
家計簿なら、入力欄と一覧の表示までをClaude Codeに作ってもらい、動くことを確かめてから合計の計算を頼んでください。
そこまで動いたら、次に月ごとの絞り込みを足していく流れです。
「入力した支出を一覧に表示するところまでできたので、次は月ごとの合計を出す機能だけを足してください。」
入力・合計・絞り込みの順に区切れば、動かなくなった時点で直前に足した機能だけを見直せます。
作業を1つ分だけ渡せば、変更されるファイルの数も少なくて済みます。
途中で不具合が出た場合は、直前の変更から確認しましょう。
完成した部分を確かめると、次に頼む内容も決めやすくなるでしょう。
実際に動かして自分の目で確かめる
Claude Codeに作ってもらったアプリは、画面を開いて自分でボタンを押すところまで確かめましょう。
AIに起動を頼むと、起動のコマンドと開くべきURLが返ってきます。
「作ったアプリを起動して、ブラウザで開けるURLを教えてください。」
見るのは、入力した内容が一覧に出るか、金額の合計が手で計算した値と合うか、といった実際の動きです。
できあがった家計簿で日付を選び、金額欄に500、使い道の欄に昼食と入力して、追加ボタンを押しましょう。
画面が真っ白になったり赤い文字が出たりしたときは、その表示をそのままコピーしてClaude Codeに貼りましょう。
1つの画面が動いてから次の機能に進むと、あとでまとめて確かめる手間がかかりません。
エラーの直し方は以下記事で原因別に解説しているので、つまずいたときはぜひ目を通しておいてください。
保存やログインなどの機能を足していく
入力した内容がページを閉じても残るようにするには、データを保存する仕組みをClaude Codeに足してもらいましょう。
ページを閉じて再度開き、入力内容が残るかを確かめると、保存機能が必要か判断できます。
「入力した支出をパソコンの中に保存して、次に開いたときも表示されるようにしてください。」
保存先はブラウザ内かサーバーかで変わるので、1人で使うのか複数端末で共有するのかもClaude Codeへ伝えてください。
今回の練習用家計簿ではブラウザ内への保存を実装し、再読み込み後も昼食500円と文房具300円の2件、合計800円が残ることを確認しました。
この操作例で確認したのは保存機能までで、ログイン機能は実装していません。
複数の人が使うアプリなら、誰の記録かを分けるためにログインの仕組みも必要になります。
ログインを足すとメールアドレスとパスワードの管理まで関わるので、公開する前に必ず動作を確かめましょう。
保存とログインまで足せば、他の人に使ってもらえる状態に近づきます。
Claude Codeで作ったアプリの使い方と公開方法
Claude Codeで作ったアプリは、そのままでは作った本人のパソコンでしか開けません。
他の人に使ってもらうには、置き場所を決めて開ける状態にする作業が別に必要です。
その作業の中身は、自分だけで使うのか、URLを渡すのか、スマートフォンに入れてもらうのかで変わります。
ここでは、公開のしかた3つと、それぞれを選ぶ理由を取り上げます。
自分のパソコンの中だけで使う場合
自分ひとりで使う道具や、社内の数人で回すツールなら、パソコンの中で動かすだけで十分です。
公開の手続きも、置き場所を借りる費用も要らないため、作ったその日から使い始められます。
Claude Codeに「このアプリを起動して」と伝えれば、必要なコマンドを実行して開ける状態にしてくれます。
毎回の起動を短くしたいときは、Claude Codeにダブルクリックで立ち上がるファイルを作ってもらいましょう。
この方式では、アプリを入れたパソコンでしか操作できません。
別の端末や同僚のパソコンで使うには、同じファイルを置いたうえで、自分の環境と同じ手順で起動用のプログラムを入れる必要があります。
インターネット上に置いて誰でも開けるようにする場合
離れた場所にいる人にも使ってもらいたいなら、インターネット上にアプリを置く方法がおすすめです。
公開方法の一例は、コードをGitHubに保存し、Vercelでその保存先を選んで公開する手順です。
Vercelの新規プロジェクト画面では、「Import Git Repository」内の「Continue with GitHub」から連携を始めます。
Vercelでは公開対象のプロジェクトを取り込み、起動に必要な設定を確認して公開するとURLが発行されます。
Claude CodeとGitHubのつなぎ方は以下記事で解説しているので、公開まで進めたい方は確認しておきましょう。
公開後は別のブラウザでURLを開き、未ログイン時の表示を確かめましょう。
顧客の連絡先などを扱う場合は、ログインしている人でも他人の記録を見たり変更したりできない設定が必要です。
本物のデータを入れる前に、ダミーの記録と複数のアカウントで閲覧・変更できる範囲を確かめてください。
スマートフォンのアプリとして配る場合
スマートフォンのホーム画面から開いてもらいたいなら、まずはブラウザで開ける形で公開するのがおすすめです。
発行されたURLをスマートフォンで開き、ホーム画面に追加してもらえば、アプリのアイコンと同じように並びます。
審査も登録料も要らないので、公開したその場から配れます。
一方、App StoreやGoogle Playに並べる場合は、ブラウザで公開するのとは別の手続きが必要です。
2026年9月時点で、Appleは開発者登録に年間99ドル、Googleは初回のみ25ドルがかかります。
どちらも公開前に審査を通す必要があるため、その場ですぐには配れません。
不特定多数に配りたい段階になってから、ストアへの登録を検討しましょう。
参考：Apple Developer Program（Apple公式）
参考：デベロッパー アカウントを登録する（Google Play Console ヘルプ）
Claude Codeでのアプリ開発がうまく進む指示の出し方
Claude Codeへの指示は、作りたいものを正確に伝えられるかどうかでできあがりが変わります。
同じアプリを頼んでも、条件が抜けていれば、その部分はClaude Codeが決めた形で返ってくるからです。
ここでは、指示を出すときに押さえておきたい5つのコツを取り上げます。
作りたいものより先に誰が何に使うかを伝える
Claude Codeへの指示の1文目には、そのアプリを誰がどんなときに使うかを書きましょう。
使う場面がわかると、画面に置く項目もボタンの大きさも、その場面に合わせて決まるからです。
Claude Codeに「店番をしながら片手で入力する」と伝えれば、入力欄が少なく指で押しやすい画面が返ってきます。
「毎月末にまとめて入力する」なら、一覧で何件も続けて登録できる画面に変わります。
用途を書かずに機能だけを並べると無難な形が選ばれるため、あとから画面ごと作り替える指示が必要です。
最初の1文で使う場面を決めておくほど、修正の回数が減ります。
修正する点と変えない点を分けて伝える
Claude Codeへ修正を頼むときは、変更する点と、そのまま残す点を分けて伝えましょう。
例えば、Claude Codeに「削除ボタンの色だけ赤に変え、配置と削除の処理は変えないでください」と伝えると、変更する範囲を示せます。
複数の変更を一度に頼むと、不具合の原因がどの変更かを調べる手間が増えます。
変更後の画面では、指定した色と、維持するよう頼んだ配置や動作をそれぞれ確かめてください。
変更点を絞って確認すると、どこから見直すべきかを判断しやすくなります。
すでに使っている機能を直す場合は、修正前の画面も残しておくと、意図しない違いを見つけやすくなるでしょう。
画面の配置は手書きの絵も添えて伝える
画面の配置をClaude Codeへ伝えるときは、紙に描いた絵を写真に撮って添える方法があります。
配置図を渡すと、入力欄やボタンの位置関係を視覚的に共有できます。
「入力欄を上、一覧を下、合計を右上」のような説明も添え、できた画面と図を見比べて違う位置を伝えましょう。
描くのは四角と文字だけで構いません。
きれいな線も色の指定も要らず、どの箱が何かを書き添えれば伝わります。
すでにあるアプリの画面を参考にしたいときも、その画面を撮ってClaude Codeに渡せば、近い形で作ってくれます。
直してほしいときは起きたことを事実のまま伝える
Claude Codeに修正を頼むときは、自分がした操作と、起きたことと、画面に出た文章の3つを伝えましょう。
「エラーが出た」とだけ伝えても、Claude Codeは原因の候補を絞れず、関係のないファイルまで調べ始めます。
例えば、次のように伝えると、その1か所に絞って調べてくれます。
「保存ボタンを押したら画面が真っ白になり、赤い文字で〇〇と出ました。原因を調べて直してください。」
画面に出た文章は要約せず、そのままコピーして指示欄に貼りましょう。
英語の文章でも、意味がわからないまま貼って構いません。
AIが読み取って、日本語で原因と対処のしかたを返してくれます。
同じエラーが続く場合は、発生し始めた時期もあわせて伝えてください。
毎回言っているルールはCLAUDE.mdに書いておく
毎回同じ条件を打ち込んでいるなら、CLAUDE.md というファイルに書いておきましょう。
Claude Codeはフォルダの中にある CLAUDE.md を起動のたびに読み込むため、CLAUDE.md に書いた条件は指示から省けます。
アプリ開発で書いておくと役に立つのは、使う言語、画面の文字の大きさや色、コメントは日本語で書くこと、といった毎回変わらない条件です。
CLAUDE.md
このアプリのルール
【使う技術】
- HTML・CSS・JavaScriptだけで作る
- 外部から借りてくる部品を追加する前に必ず確認を取る
【画面】
- 文字は16px以上、ボタンは指で押せる大きさにする
- スマートフォンの縦画面でも崩れないようにする
【コード】
- コメントは日本語で書く
- 秘密の認証情報はサーバー側で管理し、公開するコードに含めない書いておくほど毎回の指示は短くなり、条件の書き忘れによる作り替えも減ります。
反対に、その日だけの指示までファイルに書くと、あとで邪魔な条件として残ります。
CLAUDE.md の書き方の型や置き場所は以下記事で解説しているので、指示を短くしたい方は読んでみてください。
Claude Codeでアプリ開発するときに知っておくべき注意点
Claude Codeでのアプリ開発には、コードを自分で書かないからこそ注意しておきたいことがあります。
画面が動いているだけでは、金額の計算や日付の扱いが正しいかどうかまではわかりません。
公開したあとに起きる不具合も、自分で気づいて直す前提になります。
ここでは、作り始める前に知っておきたい5つの注意点を取り上げます。
画面が動いていても中の処理が正しいとは限らない
Claude Codeは頼まれた見た目と動きを満たすコードを書きますが、計算の条件までこちらの意図通りとは限りません。
月の合計を出す家計簿なら、月をまたぐ日付をどちらの月に入れるか、返金のマイナスをどう扱うかで数字が変わります。
指示に書かなかった条件は、Claude Codeが妥当と判断した形で埋められます。
そのため、画面が動いていても、出てくる数字が自分の想定とずれかねません。
確かめ方は単純です。
自分で電卓を使った結果と、アプリが出した合計を数件そろえて突き合わせましょう。
金額や日付を扱うアプリでは、公開する前にこの確認が欠かせません。
パスワードや認証用の文字列がコードに残ってしまう
Claude Codeは、外部のサービスとつなぐ認証用の文字列を、指定しないままだとコードの中に直接書き込むことがあります。
認証情報がブラウザへ配信するコードに含まれていないか、公開前の確認が必要です。
その状態でインターネット上に公開すると、文字列を読み取った他人に、自分のアカウントで外部サービスを使われてしまいます。
Claude Codeに「秘密の認証情報はサーバー側で管理し、ブラウザへ配るコードや公開するファイルに含めないで」と伝えてください。
利用者のパスワードを扱う場合は、認証サービスの利用も検討し、平文で保存されていないかの確認が必要です。
業務で使うときの安全対策は以下記事でまとめているので、会社のデータを扱う予定の方はぜひご覧ください。
画面が増えたら修正する場所を具体的に指定する
アプリの画面とファイルが増えるほど、修正の指示には場所の指定が必要になります。
AIは頼まれた内容に合う場所を探しますが、似た処理が複数のファイルに散らばると、狙いと違う場所を書き換えることがあります。
「ボタンの色を変えて」だけでは、どの画面のどのボタンかが決まりません。
画面の名前かファイル名を添えて、Claude Codeに「一覧画面の削除ボタンの色を赤に変えて」と伝えましょう。
ファイルの一覧はエディタで見られるので、指示を書く前にざっと目を通しておくと場所を指定しやすくなります。
どのファイルを直したかわからなくなったときは、Claude Codeに変更したファイルの一覧を出させると追いやすくなります。
公開したあとの不具合は自分で気づいて直すことになる
公開したアプリは、動かなくなってもClaude Codeが自動で直してくれるわけではありません。
アプリを置いたサービス側の仕様変更や、つないでいた外部サービスの停止で、ある日突然開けなくなることがあります。
使う人からの連絡で初めて気づくと、その間ずっと使えないままです。
定期的に自分でURLを開いて、主な操作が通るかを確かめておきましょう。
不具合を見つけたら、そのときの画面をそのままClaude Codeに伝えれば、原因の調査から修正まで頼めます。
公開したあとも手を入れ続ける前提で、アプリのフォルダとファイルは消さずに残しておいてください。
使う量が増えると時間あたりの上限に当たって待たされる
Claude Codeの利用上限は、5時間ごとに回復するセッション枠と、週ごとの上限の二段構えです。
セッション枠を使い切ると次の回復時刻まで待ち、週の上限にも当たると週の区切りまで使えません。
利用枠はブラウザやアプリでのClaudeとのチャットとも共通です。
読み込むファイルが多いほど、また修正を頼む回数が多いほど、利用枠は早く減ります。
上限に当たったときは、画面に表示される回復時刻を確かめてください。
計画を確認してから実装に入ると、動かない箇所を何度も頼み直す回数が減ります。
作業を機能ごとに別の日へ分ける方法でも、上限には当たりにくくなるでしょう。
プランを上げれば使える量は増えるので、頻度が高いならMaxプランへの変更も選択肢に入ります。
Claude Codeでアプリ開発するときにかかる料金
Claude Codeでのアプリ開発には、契約するプランや使う量に応じた費用がかかります。
定額プランを選ぶ場合はProなどへ加入し、Claude Consoleを選ぶ場合は前払いしたクレジットから使った分だけ支払います。
個人向けのプランごとの料金は、次の表にまとめました。
| プラン | 月額 | Claude Code |
|---|---|---|
| Free | 0ドル | 使えない |
| Pro | 20ドル（年払いなら月あたり約17ドル） | 使える |
| Max | 100ドルから | 使える |
Proプランの年払いでは、1年分の200ドルを先にまとめて支払い、月あたりに直すと約17ドルです。
Maxプランは、Proプランと比べて使える量が5倍のものと20倍のものから選べます。
アプリ開発はコードの書き換えが多いので、まずはProプランで始めて、上限に当たる回数を見てからMaxプランを検討するのが現実的です。
なお、作ったアプリをインターネット上に公開すると、置き場所を貸すサービスの利用料が別にかかることもあります。
Vercelの無料Hobbyプランは非商用の個人利用向けなので、仕事用のアプリは利用条件を確認してプランを選びましょう。
Claude Code自体の始め方とプランごとにできることの違いは以下記事にまとめてあるので、契約を決めかねている方は参考にしてください。
Claude Codeのアプリ開発でよくある質問
最後にClaude Codeでのアプリ開発によくある質問をまとめました。
- プログラミングがまったくわからなくてもアプリは作れますか？
-
作れます。
Claude Codeがコードを書いてファイルに保存し、動くかどうかの確認まで進めます。
こちらがコードを打ち込む必要はありません。
ただし、動かなかったときに何をして何が起きたかを言葉にする力は必要になります。
まずは入力と一覧だけの小さなアプリを1つ作って、指示とできあがりの対応をつかむところから始めましょう。
- 作ったアプリを仕事で使ったり、人に配ったりしてもよいですか？
-
使えます。
Anthropicの個人向けプランの利用規約には、生成された出力についての権利をユーザーへ譲渡すると書かれています。
ただし、Claudeと競合するサービスの開発に使うことは規約で禁止されている点に注意してください。
外部から借りてくる部品を組み込んでいる場合は、Claude Codeに部品と利用条件の一覧を出させて確かめておきましょう。
- 1つのアプリを作るのにどれくらいかかりますか？
-
必要な時間は、機能の数や複雑さ、確認・修正の回数によって変わります。
入力と一覧だけに絞り、Claude Codeが作った画面と動作を確かめるところから始めましょう。
一方で、ログインやデータの保存、スマートフォン向けの調整まで入れると、確認と修正を挟むぶん時間が延びます。
最初から完成形を目指さず、動く形を1つ作ってから機能を足すほうが、結果として早く終わるでしょう。
- スマートフォンだけでアプリ開発はできますか？
-
指示を出すところまではできます。
Claude Codeはブラウザからも使えるため、スマートフォンで開いて作業を頼めます。
ブラウザ版が使えるのはPro以上の有料プランで、無料プランは対象外です。
ただし、生成されたファイルを見比べる作業や、画面の細かい調整の確認は、パソコンのほうが進めやすいでしょう。
外出先では指示だけ出しておき、確認と修正はパソコンに戻ってから進めると無駄がありません。
- 作ったアプリが急に動かなくなったらどうすればよいですか？
-
画面に出ている文章をそのままClaude Codeに貼りましょう。
Claude Codeがコードとエラーの内容を照らし合わせて、どのファイルの何が原因かを調べてくれます。
原因の調査は任せられますが、表示される説明や修正結果は自分でも確かめてください。
直せたら、同じ操作をもう一度試して、元どおり動くところまで自分の目で確かめておきましょう。
まとめ：Claude Codeはコードを書けなくてもアプリを形にして公開できる
Claude Codeを使えば、コードを自分で書かないままでも、データが保存されるアプリを動くところまで作れます。
作れるのはWebアプリだけでなく、スマートフォンで使うアプリや社内の数字をまとめる管理システムまで幅があります。
始める前には、有料プランのアカウントとインストール済みの本体、作業フォルダ、使い道のメモを用意しましょう。
作る流れは、日本語で伝えて、計画を確かめ、機能を1つずつ足し、動かして確かめ、保存やログインを加える5つのステップです。
できあがったアプリは、自分のパソコンで動かすか、URLを発行して配るか、ホーム画面に置いてもらうかの3つから選べます。
気をつけたいのは、画面が動いていても中の計算まで正しいとは限らないことと、公開後の不具合を自分で直す必要があることです。
Claude Codeは、作りたいアプリを自分の言葉で説明でき、出てきたものを確かめながら育てたい方に向いているサービスです。
コメント