Claude Design ↔ Claude Code を行き来して作った資産ポートフォリオダッシュボード

• URL: https://zenn.dev/unsoluble_sugar/articles/fd73c7b67d80ce
• 日付: 2026-06-22
• Tier: Tier 3
• 要旨: Claude Design と Claude Code 行き来して資産ポートフォリオダッシュボード完成。自分の資産を全体で見渡せ、複数口座に散らばった国内株・米国株・投資信託・金を1画面で把握。証券アプリのログイン手間・ノイズ排除。Claude Design でプロトタイプ・デザイン方向決め、Claude Code で実データ・本番仕上げ。デザインは「明るい白基調・低彩度・情報密度高め・装飾最小・色は意味にのみ使用」。実装は ランタイム dc-runtime・Vanilla JS・素の CSS・GitHub Pages・GitHub Actions CI/CD。メンテナンスコスト最小化でビルドレス・フレームワーク非依存・python3 -m http.server で即座に動作。

詳細

自分の資産ポートフォリオを1画面で見られるダッシュボード開発。国内株・米国株・投資信託・金が複数口座に散らばり、証券アプリはログイン毎に必要・ノイズ多・合計額把握困難。家計簿アプリもAPI煩雑・カスタマイズ難。シンプルでオープンに持ち数量・割合変遷・投資額推移を公開する人を増やしたいという背景。元手30万円から5年運用で1,000万円超・評価損益+300万円でそれなりに参考価値あり。Claude Design が使いやすくなったのをきっかけに開発。二段構え：Claude Design で大枠デザイン・動くプロトタイプ・配色・レイアウト・コンポーネント方向固める；Claude Code で実データ・本番仕上げ・内部実装リファクタ・CI・細かな挙動調整。デザインと実装の分担で進捗効率向上。Claude Design は作る前に質問してくる確認フォーム：「誰に見せるか」「どれくらい動かすか」「通貨表示」「出す指標」「騰落の色」「案の数」で要件明確化。実データ CSV（Shift-JIS 文字化け問題、Claude Design 側でデコード）を複数回に分けてアップロード、米国株ドル円換算・投信口数表示・金グラム単位など実物の歪みをプロトタイプ段階で把握。3案（クラシック・カード・一覧）を並べて比較、案A採用。インタラクション（ドーナツドリルダウン・％ラベル・為替ライブ更新）をプロトタイプ段階で詰める。デザイン方針：騰落色は国内標準（プラス赤・マイナス緑・変化グレー）・カテゴリ色一貫運用・飾りの色は足さない。技術スタック選定：フレームワークなし静的サイト・Vanilla JS・素の CSS・GitHub Pages・GitHub Actions でCI（株価取得・スナップショット・OGP生成・デプロイ）・為替・金・株価 API キー不要。dc-runtime（Claude Design 生成物 support.js の テンプレート）そのまま引き継ぎ。ビルドレスで メンテナンスコスト最小化、python3 -m http.server で即座動作・file:// で直接開いても動作・GitHub Pages も同一コード。ロジック mixin で分離、js/ に大半実装・window.PortfolioLogic メソッド集登録。インライン Component 末尾で合成、見た目は styles.css・ロジックは js/・画面構造は テンプレートで分離。