GeminiとClaude Codeで自作した株ダッシュボードが想像以上だった話【AI開発体験記】のアイキャッチ画像

GeminiとClaude Codeで自作した株ダッシュボードが想像以上だった話【AI開発体験記】

📌 この記事の結論

GeminiとClaude Codeを「企画役」と「実装役」に分けて使ったら、数時間で自分専用の株取引ダッシュボードが完成しました。コードをほぼ書かずに、日本語で指示するだけ。「AIでアプリが作れる時代」を実感した体験を記録します。

「自分専用のツールがほしいけど、プログラミングはできない」

そう思ったことはありませんか。実は今、生成AIを使えばその壁がかなり低くなっています。

今回、株取引の振り返りに使う専用ダッシュボードをGeminiとClaude Codeの2つのAIを組み合わせて作りました。既存のアプリでは自分のスタイルに合った分析ができなかったのが動機です。数時間で実用的なツールが完成し、その完成度に正直驚きました。この記事はその体験記です。

GeminiとClaude Codeで作った株取引ダッシュボードの画面

▲ 完成した株取引ダッシュボードの画面(クリックで拡大)

📋 この記事でわかること

  • GeminiとClaude Codeの役割分担の具体的なやり方
  • AIとのやり取りで詰まった場面と解決方法
  • プログラミング不要で自分専用ツールを作るイメージ
  • AIコラボ開発の正直な感想とコツ

なぜ既存ツールではダメで、自作することにしたのか

証券会社のツールや家計簿アプリでは、自分の取引スタイルに合った分析ができなかったのが出発点です。

株の短期取引をしていると、「今日の取引は良かったのか悪かったのか」を振り返る時間が重要です。でも既存のツールはどれも汎用的すぎて、自分が知りたい情報がうまく整理されません。

特に気になっていたのは「握力」と呼んでいる指標です。高値に近いところで売れたか、それとも底値付近で投げてしまったか。この「売りのうまさ」を数値で見たかったのですが、既製品のツールにはありません。

だったら作ればいい。でもプログラミングは詳しくない。そこでAIを使うことにしました。

🎯 作りたかったものの要件

  • 楽天証券のCSVファイルをそのまま読み込める
  • 取引後の数値をキーボードだけで素早く入力できる
  • 「握力スコア」(高値に近いところで売れたか)を可視化する
  • 過去の取引履歴を蓄積して月ごとに振り返れる
  • データはクラウドに送らず、自分のパソコン内だけに保存する

GeminiとClaude Codeの役割分担がポイントだった

今回の開発で一番効いたのは、2つのAIに「考える役」と「作る役」を分けたことです。

最初からClaude Codeに「ダッシュボードを作って」と丸投げするのではなく、まずGeminiと一緒に要件を整理しました。

AI役割具体的にやったこと
Gemini 企画・設計役(軍師) 「何を作りたいか」を一緒に整理。Claude Codeへの指示書(詳細な仕様)を作成。エラー時の原因分析も担当
Claude Code 実装役(職人) 指示書を受け取って実際にコードを書く。ファイルの作成・修正・デバッグまで自律的に実行

この役割分担がうまく機能した理由は、Claude Codeは「明確な指示があれば驚くほど正確に動く」一方で、「何を作るか」の曖昧さに弱いからです。Geminiで要件を詰めてから渡すと、Claude Codeが迷わず動いてくれました。

💡 ポイント:AIに「アプリを作って」と丸投げするより、「こういう機能が必要で、こういう操作感にしたい」という仕様書を先に作ってから渡す方が、ずっとスムーズに進みます。その仕様書作りにGeminiを使うのが今回の工夫でした。

実際の開発はこんな流れで進んだ

「要件整理 → 実装 → 詰まった箇所の解決 → 機能追加」の3ステップで、数時間のうちに実用的なツールが完成しました。

ステップ1:Geminiと要件を詰める

まず「自分が何に困っていて、どんなツールがほしいか」をGeminiに話しかけながら整理しました。「1秒でも早く入力を終えたい」「データはクラウドに送りたくない」といった細かいこだわりも含めて、Claude Codeが迷わず実装できる指示書の形に落とし込んでもらいました。

GeminiでClaude Code向けの要件指示書を作っているやり取り

▲ Geminiと要件を詰めながら、Claude Code向けの指示書を作っていくやり取り(クリックで拡大)

ステップ2:Claude Codeが実装する

Geminiが作った指示書をClaude Codeに渡すと、React・Next.js・Tailwind CSSを使った画面を次々と作り始めました。ファイルの作成・コードの記述・修正まで、ほぼ自律的に進めてくれます。

Claude Codeが自律的にコードを書いて実装している場面

▲ Claude Codeが指示書をもとにコードを書いていく様子(クリックで拡大)

コードを書かずに見ているだけでアプリが出来上がっていく感覚は、正直かなり不思議でした。

ステップ3:詰まった箇所をGeminiと解決する

一番手こずったのは、楽天証券のCSVファイルの読み込みです。証券会社のCSVには独特のクセがあり、そのままでは文字化けしたりデータが正しく読み込めなかったりします。

🐛 詰まった問題と解決方法

問題①:文字化け

楽天証券のCSVはShift-JIS形式。そのままでは銘柄名などが文字化けする。

解決:GeminiがCSV構造を分析し、文字コードを正しく変換する方法をClaude Codeに指示

問題②:列名の表記ゆれ

同じ「売却単価」でも全角スラッシュや全角カッコが混じり、データが正しく読み込めない。

解決:記号を統一する処理を追加。これで1円単位まで正確に読み込めるように

問題③:0円(同値撤退)が無視される

損益0円の取引がシステム上でスキップされてしまう。

解決:0を「損益なし」ではなく正しく「±0」として扱う処理を追加

こうした細かい問題が出るたびに「こんなエラーが出ています」とGeminiに伝えると、原因を分析してClaude Codeへの修正指示を出してくれる、というサイクルで解決していきました。

完成したダッシュボードの主な機能

「ドラッグ&ドロップでCSVを読み込むだけ」で結果が即表示される、使い勝手を最優先にしたツールが完成しました。

📂 楽天証券CSVの自動読み込み

CSVファイルをドラッグ&ドロップするだけで、文字化けなく即座にデータが展開されます。前述の文字コード問題も自動で解決されます。

約定履歴CSVをダッシュボードにアップロードしている場面

▲ 約定履歴CSVをアップロードする場面(クリックで拡大)

⌨️ Tabキーだけで完結する爆速入力

取引後に高値・安値・終値を入力する際、Tabキーだけで次のセルに移動できます。スプレッドシートのような操作感で、何十銘柄でも素早く入力できます。

💪 握力スコアの可視化

「その日の高値からどれだけ離れたところで売ったか」を0〜100のスコアで数値化。高値付近で利確できた日は高スコア、底値付近で損切りした日は低スコアになります。「うまく売れた日」と「引きずられた日」の差が一目でわかります。

📊 月次・通算の履歴管理

過去の取引を蓄積して月ごとの損益推移を確認できます。データはすべて自分のパソコン内(ブラウザのローカルストレージ)に保存されるため、証券口座情報が外部に送られる心配もありません。

🔧 画面レイアウトの自由な並べ替え

銘柄詳細・握力分析・グラフなど各セクションの表示順を、ドラッグで自由に並べ替えて保存できます。自分が一番見たい情報を一番上に置けます。

株取引ダッシュボードの機能画面

▲ ダッシュボードの機能画面(クリックで拡大)

独自指標「握力スコア」とは何か

「握力スコア」は、高値に近いところで売れたかどうかを0〜100の数値で表した独自指標です。既製品のツールにはない、自分のトレードスタイルに特化した分析が可能になりました。

握力スコアの分析画面

▲ 握力スコアの分析画面。高値接近率・底値回復率が一目でわかる(クリックで拡大)

株の短期取引では「いつ売るか」が重要です。同じ銘柄を買っても、高値付近で利確できた日ズルズル引きずって底値で損切りした日では、心理的・経済的なダメージがまったく違います。

この差を「握力」と呼んで数値化しました。計算の考え方はシンプルです。

💪 握力スコアの計算方法(概念)

① 底値回復率

その日の値幅(高値−安値)の中で、終値が安値からどれだけ回復しているか。100%なら高値付近で引けた、0%なら安値圏で終わった。

② 高値接近率

終値が高値の何%かを示す。97%以上なら「ほぼ天井で売れた」と評価できる。

③ 握力スコア(0〜100)

①と②と実現損益率を組み合わせて0〜100に圧縮。利確の場合は高値接近率を重視、損切りの場合は底値からの回復度(=傷の浅さ)で評価。

この指標があるおかげで、「今日は利益が出たけど、実は底値付近での薄利逃げだった」といった反省が見えるようになりました。数字で自分のクセを把握するのが目的です。

やってみて気づいた、AIコラボ開発の現実

「コードを書かなくてもツールが作れる」は本当でしたが、「何もしなくていい」は違いました。AIに正確に伝える力と、粘り強さが必要でした。

今回の開発を通じて感じたことを正直に書きます。

✅ 思っていたより良かったこと

  • 「こういう機能がほしい」を日本語で伝えるだけで、かなりの精度で実装してくれた
  • エラーが出ても「こんな問題が起きています」と説明すると的確に修正してくれた
  • 数時間で実用レベルのツールが完成した。独学でゼロから作ったら何ヶ月かかるか
  • GeminiとClaude Codeの役割を分けたことで、詰まる場面が大幅に減った

⚠️ 思っていたより大変だったこと

  • 「何を作りたいか」を明確に言語化する作業は自分でやる必要がある
  • 細かいこだわりを伝えないとAIは「無難な答え」を出してくる
  • 楽天証券CSVの文字化け問題など、実際のデータ特有の問題はAIだけでは即解決しない場面もあった
  • 動作確認・テストは自分でやる必要がある(AIは「作って終わり」ではない)

それでも、「自分専用のツールを作るハードルがここまで下がった」という実感は本物です。プログラミングの経験がなくても、諦めずに言語化し続ければ形にできます。

自分もやってみたい人へ:最初の一歩

まずはGeminiで「作りたいものの要件」を整理するところから始めましょう。Claude Codeへの丸投げより、この準備が一番大切です。

💬 Geminiへの最初のプロンプト例

自分専用の〇〇ツールをClaude Codeで作りたいです。

【困っていること】
・既存のアプリでは〇〇ができない
・△△を手動でやっていて時間がかかっている

【作りたいツールのイメージ】
・〇〇のデータを読み込んで
・□□を自動で計算してくれて
・△△を一覧で見たい

Claude Codeに渡す詳細な指示書を作ってください。

「完璧な仕様書」を作ろうとしなくて大丈夫です。最初は曖昧でも、GeminiとやりとりしながらClaude Codeへの指示を育てていけます。

生成AIツールが気になる方はこちら

天秤AI Biz』は、最大6つの生成AIを同時に比較できる、ビジネス特化型のAI同時検索サービスです。GeminiとClaudeの回答を並べて比べたい場面にも使えます。

天秤AI Biz byGMO公式サイトで詳しく見る

GMOが提供している、高品質SEO記事生成AIツール『Value AI Writer byGMO』は、SEOに特化したブログ記事を自動生成するAIライティングサービスです。

高品質SEO記事生成AIツール【Value AI Writer byGMO】公式サイトで詳しく見る

文賢(ブンケン)』は、読みやすくわかりやすい文章を書くことをクラウド上でサポートするツールです。

【文賢】公式サイトで詳しく見る

スマホに貼り付けるだけで会議や取引後の振り返りメモを録音・文字起こし・要約まで自動化できるAIボイスレコーダー「PLAUD NOTE」もおすすめです。

PLAUD NOTE公式サイトで詳しく見る

まとめ

✅ GeminiとClaude Codeで自作ダッシュボード体験まとめ

  • Geminiを企画・設計役Claude Codeを実装役に分けたことが成功の鍵
  • 「何を作るか」の言語化をGeminiと一緒にやってから渡すと、Claude Codeが迷わず動く
  • 数時間で既製品にはない自分専用の機能を持つツールが完成した
  • コードは書かなくてもいい。でも「何がほしいか」を伝える力は必要
  • エラーや問題が出ても、Geminiに状況を伝えると解決策を出してくれる

「自分専用のツールを作りたい」と思ったことがある方、今がやり時です。プログラミングの知識がなくても、GeminiとClaude Codeを組み合わせればかなりのことができます。ぜひ「作りたいもの」を言語化することから始めてみてください。

関連記事
image
Anthropic Academyとは?Claudeの公式無料コース・修了証の取り方を完全解説【2026年版】 📌 結論:Anthropic Academyとは? Anthropic Academyは、Claude開発元のAnthr……
関連記事
image
新年度から差がつくAI仕事術7選!同僚に差をつける生成AI活用法【2026年版】 📌 新生活の不安、生成AIで解消できます 新社会人・新入生の約8割が「社会人になることが不安」と感じています。人間関係……
nekosan

✍️ nekosanより

正直、最初は「AIでアプリなんて大げさじゃ?」と思っていました。でも数時間で動くものが出来上がったとき、その感覚が変わりました。コードは書いていないのに、自分のこだわりが詰まったツールができている。これが今のAIの実力なんだと実感しました。「作りたいものがあるけど技術がない」という方は、まずGeminiに話しかけることから始めてみてください。

よくある質問(FAQ)

Q. Claude Codeとは何ですか?

Anthropicが提供するAIコーディングツールです。ターミナル上で動作し、ファイルの読み書き・コードの生成・修正・デバッグまで自律的に行ってくれます。プログラミングの知識がなくても、やりたいことを日本語で伝えるだけでアプリを作れるのが特徴です。

Q. GeminiとClaude Codeを組み合わせて使うメリットは?

GeminiはアイデアをまとめたりClaude Codeへの指示書を作る「企画・設計役」として使い、Claude Codeは実際にコードを書く「実装役」として使うことで、お互いの得意分野を活かした効率的な開発ができます。一方のAIだけでは詰まる場面も、2つのAIを組み合わせることでスムーズに解決できます。

Q. プログラミング初心者でもClaude Codeでアプリを作れますか?

はい、作れます。やりたいことを日本語で説明するだけで、Claude Codeがコードを書いてくれます。ただし「何を作りたいか」を明確に言語化する力と、エラーが出たときに状況をAIに伝える根気は必要です。Geminiで事前に要件を整理してからClaude Codeに渡すと、よりスムーズに進みます。

Q. AIで作ったツールのデータはどこに保存されますか?

今回のダッシュボードはブラウザのlocalStorage(ローカルストレージ)にデータを保存する設計です。アカウント登録やサーバー不要で、データは自分のパソコン上だけに保存されます。クラウドに送られないため、証券口座の情報を扱う用途にも安心して使えます。

この記事は私が書いたよ!

nekosan

さまざまな生成AIを楽しんでいます! 趣味はエレキギターということもあり、音楽系の生成AIにかなり注目しています。また、日常やビジネスで使える便利な生成AIツールや、新しく登場する生成AIにどんどんチャレンジ中! みなさんに生成AIの情報をお届けして、その便利さを伝えたいです!

TOP