自分の資産ポートフォリオを公開するダッシュボードを作ってみたよ

こんにちは、星影です。

表題のとおり、自分の資産ポートフォリオを公開するダッシュボードを作りました。

国内株、米国株、投資信託、金（ゴールド）など、証券口座に散らばっている保有資産をまとめて見られるようにしたものです。

自分用に「今の資産って全体でどれくらいあって、どんな構成なんだっけ？」をサクッと確認できる場所がほしかったんですよね。

家計簿管理アプリや証券会社のアプリでも見られるには見られるんですが、口座ごとに分かれていたり、ログインが面倒だったり、キャンペーンやおすすめ銘柄の情報が目に入ったりして、意外とノイズが多いじゃないですか。

なので、自分の資産だけを静かに眺められる場所を作りたい、というのが最初の動機でした。

加えて、ただ自分用に作るだけでなく、いっそ公開してみたいという気持ちもありました。

新NISAをきっかけに投資に興味を持つ人が増えて、成功者のポートフォリオを紹介する動画なんかもよく見かけます。

とはいえ、中身としては「国内株が何割、米国株が何割、債券や金も少々」くらいのざっくりした話だったり、億り人の持論だったりして、正直そのまま参考にするには距離を感じるものも多い印象でした。

具体的な保有数量や、割合の変遷、投資額の推移まで、シンプルかつオープンにしている人がもっといてもいいのではないか。

前からそんなことを思っていたので、まずは自分が先陣を切ってみることにしました。

以前、投資は短期で結果を求めるものではなく、時間をかけて積み上げるものだという話を書きました。

その意味でも、ある時点の資産額だけでなく、保有銘柄や投資額、割合の変化まで見えるようにしておくと、それなりに参考になる部分もあるのではないかと思っています。

昔から投資系ブログでこうした情報を公開している人はいましたが、どうにも無骨で、パッと見では参考にしづらいものも多いです。

ただ数字が並んでいるだけではなく、パッと見られて、画面を触りながら「お、この銘柄をこれだけ持ってる理由は何だろう？」と、見る人の興味を少し刺激するような形にできないか。

そのための見せ方を模索した結果が、このダッシュボードです。

自分の場合は、元手30万円ほどの規模から軽い気持ちで株式投資を始めました。それが気づけば5年くらいの運用実績になっていて、ちょうど証券口座に置いている資産が1,000万円を超え、評価損益も+300万円前後に達したところです。

これくらいの期間と規模になれば、それなりに参考になるものもあるかもしれない。そう思って、開発と公開を進めることにしました。

こんなものが見られるよ

ダッシュボードでは、資産構成のドーナツグラフや、評価額の推移、銘柄ごとの損益、評価損益率の上位・下位ランキングなどを見られるようにしています。

国内株、米国株、投資信託、金の割合も一目でわかるので、自分でも「思ったより米国株の比率高いな」とか「金がいい感じに分散枠になってるな」みたいなことを見返しやすくなりました。

あと、SNSでシェアしたときに出るOGP画像も自動生成しています（そんな頻繁にシェアするものでもないですけど）。

その日の資産構成が画像として出るので、なんかいい感じです。こういうシェア時のOGP画像生成、テンション上がるので取り入れてみました。

Claude DesignとClaude Codeで作ったよ

今回おもしろかったのは、Claude DesignとClaude Codeを行き来しながら作ったところです。

最初はClaude Designに「楽天証券のiGrowみたいに、シンプルで見やすい資産ダッシュボードを作りたい」と、かなりざっくり投げました。

そこから、銘柄内訳のドリルダウンを入れる、損益の上位/下位ランキングを出す、過去の資産構成も追えるように、みたいな要望を詰めていきました。

Claude Designは、いきなり作り始めるというより、事前に「誰に見せるのか」「どれくらいインタラクティブにするのか」「通貨表示はどうするのか」みたいな質問を返してくれるのが良かったです。

雑に投げたアイデアが、そこで少しずつ仕様っぽくなっていく感じです。

その後、Claude Codeに持ち込んで、実データで動くようにしたり、スマホ表示を調整したり、GitHub Actionsで毎日データ更新する仕組みを作ったりしました。

AI時代の個人開発、やっぱりヤバい

少し前なら、こういうダッシュボードを自分で作ろうと思っても、なかなか腰が重かったと思います。

デザインを考えて、画面を作って、グラフを描画して、データ更新の仕組みを作って、スマホ対応して、OGP画像まで用意して……となると、普通に面倒くさいです。

でも今は、Claude Designで大枠を作り、Claude Codeで実装を詰めていけば、かなりの速度で形になります。

もちろん、AIに任せれば全部いい感じになるわけではありません。

今回のダッシュボードでは、資産データ自体はかなりオープンに見せています。なので「何を隠すか」というよりも、どういう構成で作るか、どこまで機能を載せるか、どの提案を採用するかの判断が大事でした。

たとえば、便利そうだからといって余計なAPIを増やしたり、過剰にライブラリを導入したりすると、あとからメンテナンス負荷が上がります。個人で運用するものなので、見た目や機能以上に「無理なく保守できること」はかなり重視しました。

Claudeからの提案も、良さそうに見えるものをそのまま全部採用するのではなく、このダッシュボードで大事にしたいコンセプトに合っているか、構成が重くなりすぎないか、自分で判断しながら取捨選択しています。

AIを使うことで開発スピードはかなり上がりますが、技術選定や設計方針、採用する機能の線引きまで曖昧にしてしまうと、結局あとで困るのは自分です。

その境界は、個人開発でもけっこう大事だなと感じました。

詳しい開発記録はこちら

以下のZenn記事では、Claude DesignとClaude Codeをどう行き来したか、技術スタック、データの持ち方、株価データの取得方針、OGP画像生成、GitHub Actionsでの自動更新など、技術面の具体的な話を書いています。

資産管理ダッシュボードの話ではありますが、個人的には「AIエージェント時代の個人開発ワークフロー」としても、けっこう面白い事例になったと思っています。

この流れ、今後もいろいろ使えそうです😉