AIエージェント「Claude Code」にアプリ開発を任せてみた!知識ゼロで占いアプリ公開までできた話

IT&ブログ
この記事は約12分で読めます。
スポンサーリンク

※当ブログでは、記事内に広告を含む場合があります。

こんにちは、りんねです!

「AIに文章を書いてもらう」のはずいぶん普通になりましたが、最近はその一歩先、作業そのものを任せられるAIが登場しているのをご存じですか?

私は最近、Anthropic社のAIエージェント「Claude Code」にこのブログの運営を手伝ってもらっているのですが、先日ついに「占いアプリを作って公開する」ところまで任せてみました。結論から言うと……プログラミング知識ゼロの私が日本語でお願いしただけで、その日のうちにアプリが公開されました

この記事では、体験談だけで終わらせずに、読んだあなたが同じことを再現できるように、始め方から公開までの手順やコピペで使えるお願い文(プロンプト)、つまずきポイントまで、ぜんぶまとめました。

この記事でわかること

  • Claude Codeとは何か(チャットAIとの違い)
  • 料金はいくらかかるのか
  • 始め方3ステップ(VSCodeで15分・コマンド不要)
  • 実例:占いアプリが公開されるまでの流れ
  • そのまま使える「お願い文」と上達のコツ

Claude Codeとは?「話すAI」ではなく「働くAI」

Claude Codeは、チャット画面で会話するタイプのAIとは少し違って、パソコンの中で実際に手を動かしてくれるAIです。

  • ファイルの作成・編集、画像の加工
  • プログラムを書いて、その場で動かして確認
  • ネットで最新情報を調べて反映
  • WordPressへの下書き投稿のような、サービスとの連携作業

ふだん使いのチャットAIと比べると、違いはこんなイメージです。

比較対象チャットAIClaude Code
できること質問に答える・文章を作る実際にファイルを作り、動かし、直す
成果物画面の中のテキスト動くアプリ・加工済み画像・整理されたフォルダ
失敗したら正しい答えを聞き直すAIが自分でエラーを調べて直す
使う場所ブラウザ自分のパソコン(ブラウザ版・アプリ版もあり)

もともとは開発者向けのツールですが、指示はぜんぶ日本語でOK。「〇〇を作って」「ここを直して」と話しかける感覚で、あとはAIがコードを書き、失敗したら自分で原因を調べて直してくれます。私はコードを1行も読んでいません。

料金はいくら?Proプラン(月20ドル)から使えます

Claude Codeは無料プランでは使えず、有料のProプラン以上が必要です(2026年7月時点)。

プラン料金(月額)Claude Code
Free0円使えない
Pro20ドル(年払いなら実質17ドル/月)使える
Max100ドル〜使える(利用上限が大きい)

私のおすすめは、まずProプランで始めること。月20ドル(約3,000円)で、チャットのClaudeも、この記事で紹介するClaude Codeも両方使えます。ヘビーに使うようになって上限が気になってきたら、Maxを検討すれば十分です。最新の料金は公式の料金ページで確認してくださいね。

「月3,000円かぁ」と思うかもしれませんが、この後紹介するとおり、記事の下書き・画像の加工・アプリ開発までこなしてくれるので、私は「月3,000円で働き者のアシスタントを雇っている」感覚でいます。

りんね☆
りんね☆

無料プランだと、チャットAIのClaudeしか使えません。
無料でも文章力の高い回答を貰えますが、本領発揮するのは有料プランからなので、思い切って有料プランで行ってみることをお勧めします。

Claude Codeの始め方(3ステップ・所要15分)

ここからが本題です。実際に私と同じ環境を作る手順を、順番に説明します。

claudecode-3steps

ステップ1:Claudeのアカウントを作ってProプランに登録する

  1. claude.ai にアクセスして、メールアドレスまたはGoogleアカウントで登録
  2. 設定画面からProプランにアップグレード(クレジットカード等で支払い)

ここは普通のWebサービスの登録と同じなので、迷うところはないと思います。

りんね☆
りんね☆

無料プランで進めると、ステップ3から進めなくなります。

ステップ2:VSCodeを用意して日本語にする

私はClaudeCodeが動いている裏では、後ろで何が起こっているのかを見えるようにしたい&PCの操作をさせたいという希望があったため、VSCodeという無料のソフトを土台にして、ClaudeCodeを導入しました。Microsoftが配っている、世界中で使われている定番のエディタ(文章やプログラムを書くためのアプリ)です。

  1. VSCodeの公式サイトからダウンロードして、ふつうのアプリと同じようにインストールします。
  2. 最初は表示が英語なので、拡張機能「Japanese Language Pack」を入れて日本語にします(起動後、画面の右下に「日本語で表示しますか?」と案内が出ることもあります)。

拡張機能は、VSCodeの左側にある「四角が4つ集まったアイコン」から、名前で検索してボタンひとつで追加できます。黒い画面にコマンドを打ち込む必要はありません。

ステップ3:Claude Codeの拡張機能を入れて話しかける

日本語になったVSCodeで、次は「Claude Code」の拡張機能を追加します。ステップ2と同じ拡張機能の画面で「Claude Code」を検索して、追加ボタンを押すだけです。

  1. 拡張機能の画面で「Claude Code」を検索して追加する
  2. 画面にClaude Codeのパネルが出るので、ステップ1で作ったアカウントでサインインする
  3. 左上にあるメニューバーの「ファイル」から、「フォルダを開く」で、AIに作業してもらいたいフォルダ(例:「AI_work」など)を作って開けば準備完了

あとはふだんの日本語で話しかけるだけです。最初のひとことは、こんな感じでどうぞ。

はじめまして。あなたにいろいろな作業をお願いしたいです。まず、あなたに何ができるか、初心者向けに教えてください。

ちなみに私はここからもう一歩進めて、「cc-company(シーシー・カンパニー)」というプラグインもマーケットから入れています。これはClaude Codeに“AIの会社のしくみ”を足してくれるもので、ブラウザ版のカスタマイズからプラグインを選択して追加しました。入れると、この記事の後半で紹介する「AIのCEO・各部署」という形で運営できるようになります。まずは基本のClaude Codeだけでも十分なので、慣れてきたら試してみるくらいでOKです。

つまずいたときの対処法

初心者がつまずきやすいポイントを、先回りでまとめておきます。

  • 拡張機能が見つからない:VSCodeの左側の「四角が4つのアイコン」を押して、名前(例:「Claude Code」や「Japanese Language Pack」)で検索してみてください。名前が少し違うと出てこないことがあります。
  • 途中で閉じてしまった/翌日続きからやりたい:VSCodeで同じフォルダをもう一度開けば、Claude Codeが前回の記録を引き継いで、続きから進められます。
  • 何を頼めばいいか分からなくなった:Claude本人に「今の状況を整理して、次にできることを提案して」と聞くのがいちばん早いです。AIに使い方を聞けるのが、AIツールのいいところ。
  • 謎の英語エラーが出た:エラー文をそのままコピーして「このエラーはどういう意味?直せる?」と貼り付ければOK。だいたい自分で直してくれます。

最初にやっておくと快適になる「お約束」

Claude Codeは、ファイルを変更したり操作を実行したりする前に「実行していい?」と確認してくれるのですが、この確認が英語で表示されることがあります。私は最初にこうお願いして解決しました。

私は英語とプログラミングが分かりません。何かを実行する前に、「何を・何のためにやるのか」を必ず日本語で説明してください。

これを伝えておくと、毎回「これから〇〇のためにこのファイルを作ります」と日本語で教えてくれるようになるので、安心して「はい」を押せるようになります。おすすめです♪

わが家では「AI会社」として運営中

私の使い方はちょっと変わっていて、Claude Codeに「会社」を作ってもらいました。AIのCEO「スズカ」を設定して、ブログ担当・アプリ担当みたいな部署があって、私は社長として指示を出すだけ。この会社のしくみは、ステップ3で入れた「cc-company」というプラグインがベースになっています。

わが家のAI会社のしくみ

たとえばこのブログでは、こんな作業をAIが担当しています。

  • 記事の下書き作成(私は確認して公開ボタンを押すだけ)
  • 写真の明るさ補正・写り込んだ人のモザイク・透かし入れ
  • アイキャッチ画像の作成(この記事のアイキャッチもAI製です)

面白いのは、決めたことややったことを毎回ファイルに記録してくれるところ。「先週なんて指示したっけ?」となっても、AI側がちゃんと覚えているので、続きからサクッと再開できます。

りんね☆
りんね☆

困ったら、「どんなタスクがある?」とか、「今日なにやったら良い?」とか割と何でも気軽に聞けるのがよいですね。

実例:「占いアプリ作って」から公開までは1日でした

そして先日の本題。朝に伝えたのは、ほぼこれだけです。

占い事業をやりたい。アプリ開発とSNS運用を前提に、計画を立てて進めて。内容は任せます。

すると昼過ぎには、市場調査レポートと事業計画、そしておみくじ・12星座の運勢・タロットの3つが遊べる占いアプリが出来上がっていました。

占いアプリ「月みくじ」の画面

アプリでは、占い師キャラの女の子「宵乃(よいの)こよみ」ちゃんがお出迎えしてくれます。キャラ設定や占いの文章もぜんぶAIと相談しながら作りました。

試してみたい方はこちらからどうぞ。
月みくじ|今日の運勢・おみくじ・タロット【無料占い】

りんね☆
りんね☆

実際に使ってみて、気に入らない箇所があれば、それを伝えて修正してもらうだけです。プログラムを読まなくても会話だけでアプリが完成していくのでとっても楽!

トラブルもAIが自力で回避してくれる

途中、「ブログのサーバーのセキュリティ機能に引っかかって、アプリをブログ内に直接置けない」というトラブルがありました。ここでClaude Codeは原因を切り分けて、こんな回避策を提案・実行してくれたんです。

claudecode-publish-flow

アプリ本体はGitHubという無料の公開サービスに置き、ブログには「埋め込み用の枠」だけを置く方式です。GitHubのアカウント作成以外はぜんぶAIがやってくれて、費用は0円。正直、私ひとりだったら確実に詰んでいたところです……。

結局、私がやったのは方針への返事と、最後の公開ボタンくらい。完成したアプリはこちらで遊べます♪

月みくじ|今日の運勢・おみくじ・タロット【無料占い】

その後1週間で、アプリは3つに増えました

占いアプリで流れができてしまえば、あとは早いです。「積立投資のシミュレーターを作って」「集中できる作業タイマーを作って」とお願いしただけで、1週間でアプリは3つになりました。

rinne-apps-list

どれも「作って」から公開まで半日〜1日ペース。2つ目からは、1つ目で作った手順をAI自身が覚えているので、どんどん速くなっていくのが面白いところです。

りんね☆
りんね☆

可能なら、今後どんどん増やしていきたいです

あなたも同じことができる:再現手順とコピペ用プロンプト

「実例はわかったけど、自分でできる気がしない……」という方のために、最初の1個を作るための具体的な手順を用意しました。上の3ステップでClaude Codeに話しかけられる状態になったら、そのまま試してみてください。

①まずは5分で「おみくじアプリ」を作ってもらう

次の文をそのままコピペして送ってみてください。

おみくじが引けるWebアプリを作ってください。条件は次のとおりです。
・HTMLファイル1枚で完結させて、この作業用のフォルダに保存する
・ボタンを押すと大吉〜凶がランダムに出る
・デザインは夜空みたいな雰囲気で、スマホでも見やすく
完成したら、開き方も教えてください。

数分待つと「index.html」のようなファイルが出来上がります。ダブルクリックしてブラウザで開けば、もう動きます。初めて自分の「アプリ」が動いた瞬間は、ちょっと感動しますよ♪

②気に入らないところを直してもらう

できあがったものを見て、思ったことをそのまま伝えます。専門用語はいりません。

いい感じです!追加で、おみくじの結果に「今日のラッキーカラー」も表示してください。あと文字をもう少し大きくしたいです。

この「作ってもらう→見る→直してもらう」の往復が、Claude Codeの基本の使い方です。感想を言うだけで直っていくので、だんだん打ち合わせをしている気分になってきます。

③世界に公開してみる(無料)

ローカルで満足したら、公開にチャレンジ。無料のGitHubアカウントを作ってから、こう伝えます。

このアプリをGitHub Pagesで無料公開したいです。GitHubのアカウントは作りました。必要な作業はできるだけあなたがやって、私にしかできない操作だけ、画面の見方から日本語で案内してください。

数分後には「https://あなたの名前.github.io/〜」というURLが発行されて、スマホからも世界中からも見られるようになります。ここまでやっても費用は0円です。

上達のコツは3つだけ

  • やりたいことを具体的に:「いい感じにして」より「タイトルを大きくして、背景を紺色にして」。箇条書きで伝えると確実です
  • エラーはそのまま貼り付ける:赤い英語のエラーが出ても慌てずコピペして「これ直して」でOK。エラー解読はAIの得意分野です
  • 「下書きまで」「公開は私がやる」と決めておく:最後の一歩を自分に残しておくと、最終確認ができるので、安心して任せられます

使ってみて感じたメリットと注意点

よかったところ

  • とにかく速い:記事下書きなら数十分、アプリでも半日〜1日
  • 日本語だけで完結:専門用語もコードも知らなくてOK
  • 守備範囲が広い:文章・画像・アプリ・ゲームまで1つのAIで
  • 勝手に公開しない:「下書きまで」と決めておけば、最終判断は必ず人間に残せる
  • 記録を残してくれる:決めたこと・やったことをファイルに記録してくれるので、日をまたいでも続きから再開できる

気をつけたいところ

  • 内容の確認は人間の仕事:事実関係や写真の写り込みなど、公開前チェックは必須です
  • 利用は有料:Proプラン(月20ドル)以上が必要。目的と予算は先に決めておくのがおすすめ
  • 使いすぎると一時的に上限に当たることも:Proプランには利用量の上限があり、集中的に使うと少し休憩が必要になります。私は「休憩=自分の確認タイム」にしています
  • お金や公開に関わる判断は自分で:便利でも「最後のボタン」は自分で押すルールにしています

よくある質問

Q. プログラミング知識ゼロでも本当に大丈夫?

大丈夫です。私はこの記事の時点でもコードを読めませんが、占いアプリ・シミュレーター・タイマーの3つが公開できています。大事なのはコードの知識より、「何を作りたいか」を日本語で伝えることでした。

Q. 英語ができなくても使えますか?

使えます。会話は最初から日本語でOK。確認画面などが英語で出ることがありますが、「実行前に日本語で説明して」とお願いしておけば解決します(本文の「お約束」参照)。

Q. アプリ以外には何ができますか?

文章の下書き、画像の一括リサイズやモザイク加工、Excel的なデータ整理、フォルダのお片付け、ブログの定型作業の自動化……「パソコンでやる作業」なら、まず相談してみる価値があります。

Q. 勝手に変なことをされたりしませんか?

ファイルの変更やコマンドの実行前には、原則として確認を求めてきます。さらに「公開や課金につながる操作は必ず私に確認して」と最初に伝えておくと、より安心です。

Q. スマホだけでもできますか?

ブラウザ版(claude.ai/code)はスマホからも使えますが、ファイルの確認やアプリの動作チェックがしやすいので、最初はパソコンでの利用がおすすめです。

まとめ:「AIに任せる副業」、思ったより現実的でした

  • Claude Codeは会話だけでなく作業まで実行してくれるAIエージェント
  • 料金はProプラン(月20ドル)から。まずはProで十分
  • 始め方は登録→VSCodeにClaude Codeの拡張機能を入れる→日本語で話しかけるの3ステップ(約15分)
  • プログラミング知識ゼロでも、日本語の指示だけで占いアプリが1日で公開できた
  • コピペ用プロンプトから始めれば、今日中に自分のアプリを動かすところまで再現可能
  • ただし最終確認と公開の判断は人間が握るのが安心

「副業に時間が割けない」「アイデアはあるのに形にできない」という方にこそ、一度試してみてほしいツールです。まずは①のおみくじアプリから、ぜひ。

りんねのひとこと

りんね☆
りんね☆

いちばん驚いたのは、トラブルが起きたときに「ダメでした」で終わらず、原因を調べて別ルートを提案してくれたこと。人に仕事をお願いしている感覚にかなり近いです。実はこの記事の増強も、Claude Codeと二人三脚で仕上げました。今は音楽づくりや新しいアプリも進めてもらっているので、ぜひまたこちらのサイトを見てみてくださいね。

この記事を書いた人↓

人生を楽しむ為に色々と挑戦中!
ブログに日々の成長記録を残していくことで自身の成長を確かめつつ,買ったものを記事にまとめることで、皆さんのお役に立てるような記事を書いていきます!

りんね☆をフォローする
IT&ブログ
スポンサーリンク
シェアする
りんね☆をフォローする

コメント

タイトルとURLをコピーしました