- 投稿日:2026/04/03
まず最初に、今回の完成イメージです
この連載で最終的に作るのは、自分専用の個人資産管理ダッシュボードです。
実際の公開例はこちらです。
成果物URL: https://asset-dashboard-two.vercel.app/
(現在はデモです)
日本株・米国株・現金・不動産・暗号資産などをまとめて入力し、
資産全体の構成や推移をひと目で確認できるWebアプリです。
スマホからでも確認できて、URLをブックマークしておけば、
自分専用の「資産の見える化ページ」として使えます。
最初に正直に言います
「AIを使えばプログラミング未経験でもアプリが作れる」
こういう記事、よく見かけますよね。半分本当で、半分語弊があります。
✅ 本当のこと:コードを自分で書かなくてもWebアプリは作れます。AIがほぼ全部書いてくれます。
⚠️ 語弊があること:「誰でも簡単に」ではないです。黒い画面(ターミナル)を開くこともあるし、英語のエラーと向き合うこともあります。
この連載はそこを誤魔化しません。
私自身、プログラミングの基礎はオンライン教材で一通り学びました。変数とか関数とか、概念はわかる。でもゼロからコードを書いてアプリを作るのは無理でした。そこにAIが来た。
「書く」のはAIの仕事。「何を作るか指示する」のが私の仕事。
この分担で、自分の資産状況を可視化するダッシュボードをネット上に公開することができました。この連載では、その手順をそのまま公開します。
Claudeって何? ChatGPTと何が違うの?
「AIといえばChatGPT」という方も多いと思います。Claudeも同じように日本語で会話できるAIです。この連載でClaudeを選ぶ理由は一つ。「長くて複雑なコードの生成と修正」がとても得意だからです。
特に「何がわからないのかもわからない」状態になったとき、画面に表示されているものを丸ごとコピーして投げるだけで、状況を読み取って次の手を教えてくれます。
たとえるなら、何でも知っているエンジニアの部下が24時間つきあってくれる。そんなイメージです。質問の仕方がわからなくても、状況をそのまま伝えれば動いてくれます。
AIはどうやってコードを書くのか
「日本語で頼んだらコードが出てくる」と聞いても、最初は半信半疑でした。仕組みを農業にたとえるとこうなります。
「長崎県雲仙市の畑でメークインを作りたい。12月植えを考えている」と伝えるだけで、催芽のタイミングから霜対策・収穫時期まで、具体的な栽培スケジュールが返ってきます。
コードへの指示も全く同じです。「株価を自動で取得してグラフで表示するページを作りたい」と伝えると、Claudeがコードを書いてくれます。あなたはそのコードを確認するだけ。
「何を作りたいか」を日本語で伝えること。これだけがあなたの仕事です。
この連載でつくるもの
今回の連載でつくるのは「個人資産管理ダッシュボード」です。日本株・米国株・現金・不動産・暗号資産の残高を入力すると、グラフで資産全体を可視化できるWebアプリです。自分専用のURLが発行されるので、スマホのブックマークに入れていつでも確認できます。
全体の流れはこうなります。
① Cursor + Claude Code
AIと会話しながらコードを作る
→ 「こういうアプリを作って」と日本語で指示するだけ
② Claude Cowork
エラー調査・手順確認をAIに任せる
→ 困ったことをそのままコピペして「これ何ですか?」と聞く
③ GitHub
コードを保存・管理する
→ Googleドライブのコード版。Claude Codeが自動で保存してくれる
④ Vercel
GitHubと連携してネットに公開する
→ ボタンを押すだけで自分専用URLが発行される
⑤ 完成:自分専用URLで資産管理ダッシュボードが動く
必要なものリスト
Claude CodeはAnthropicのProプラン(月額$20、約3,000円)に含まれています。使った分だけ課金される従量課金ではないので、使いすぎて高額になる心配はありません。Proプランの契約方法は第2回で説明します。
よくある不安に先に答えます
Q. 基礎知識ゼロでもついていけますか?
ついていけます。ただし「意味を理解しながら進む」より「手順通りにやってみて、後から理解する」というスタンスのほうが挫折しません。わからない言葉が出てきたらClaudeに聞けば日本語で教えてくれます。
Q. 何がわからないのかもわからなくなりそうで不安です。
これがAI開発の一番リアルなつまずきです。そういうときの対処法はシンプルで、画面に表示されているものを全部コピーして、Claudeに投げる。それだけです。「何を聞けばいいかわからない」ときこそ、全部丸投げするのが正解です。第5回ではこの「丸投げの作法」をパターン別にまとめます。
Q. Proプラン $20/月は高くないですか?
Claude CodeはProプランに含まれており、従量課金ではありません。月$20の固定費で、この連載の全工程を進められます。不要になれば解約もシンプルです。
Q. 英語が読めなくても使えますか?
使えます。操作自体は画面のボタンを押すだけです。英語のエラーが出たときはそのままClaudeに貼れば日本語で説明してくれます。
まとめ
・この連載は「完全未経験」の人に向けて書いています
・語り手の私は「基礎は学んだがコードは書けない」ポジションから、AIで壁を突破しました
・使うツールはCursor・Claude Code・Claude Cowork・GitHub・Vercelの5つ
・Claude Codeだけ月額$20のProプランが必要です(従量課金ではありません)
・「簡単」とは言いません。でも手順通りにやれば必ずURLが発行できます
次回は環境構築です。Cursorのインストール、AnthropicアカウントとProプランの設定、Claude Codeの起動をやります。黒い画面を初めて開くところから一緒にやります。
連載一覧
【第1回】そもそもClaudeって何?← 今回
【第2回】環境構築:Cursor・Claude Code・GitHubをセットアップする
【第3回】Claude Codeに指示してコードを生成する
【第4回】GitHubにコードを保存してVercelでデプロイする
【第5回】エラーが出た!そのときClaudeに何を聞けばいい?
【第6回】カスタマイズ編 — 自分のデータで育てよう