思考のままに機能するファイナンスダッシュボードの構築方法
Cloud DBとVisual Editorを使用して、パーソナルファイナンスダッシュボードを構築する方法を学びます。ポートフォロトラッカー、予算ビュー、案件トラッカーをステップバイステップのプロンプトで解説します。
汎用的なファイナンスアプリは万人向けに作られています。それこそが、あなたにとって使いにくい理由です。
本記事の目的：
-
画面を一つ作る前に、ダッシュボードが実際に何をすべきか考え抜く
-
3つの主要なファイナンスダッシュボードタイプを理解し、自分の状況に合うものを選ぶ
-
EnterとCloud DB、Visual Editorを使って実用的なバージョンを作成する
-
Enter Proがどのようにダッシュボードの機能を拡張できるかを具体的に確認する
構築前に：ダッシュボードは何を実現すべきか？
多くの人は構築ツールを開くと、すぐに見た目の話から始めます。色、レイアウト、カードのサイズなどです。これは間違いです。
正しい出発点は機能です。このダッシュボードを開いたとき、どのような問いに答えるべきか？
最初のプロンプトを書く前に、自問してみてください。
「朝、このダッシュボードを開いたとき、知っておくべきことのすべてを伝えてくれる数字やビューは何だろうか？」
その答えが、何を構築すべきかを決定します。
まずは1つ選んでください。後から組み合わせることは可能です。最初のセッションで3つすべてを一度に作ろうとすると、どれも中途半端な仕上がりになりがちです。
3つのダッシュボードタイプ
タイプ1 — ポートフォリオトラッカー
必要な機能：
-
現在の保有資産を価値と配分比率で表示する
-
開始時の価値やベンチマークに対する全体的なポートフォリオパフォーマンスを表示する
-
各ポジションの損益状況を色分けする
-
単なる今日のスナップショットではなく、時間の経過に伴う変化を追跡する
データベース構成：
| テーブル | 主要カラム |
|---|---|
| holdings | id, asset_name, ticker, quantity, average_cost, current_price, asset_class |
| price_history | id, holding_id, date, price |
| portfolio_snapshots | id, date, total_value, total_cost, gain_loss |
構築プロンプト：
「ポートフォリオトラッカーダッシュボードを構築して。背景はダーク、デザインはミニマルでクリーン、データ重視。最上段にサマリー行を置き、ポートフォリオ総額、総コスト、全体の損益（ドルと％）を表示。その下に、保有資産をテーブル形式で並べて。資産名、数量、平均取得単価、現在価格、現在価値、損益率を表示すること。プラスは緑、マイナスは赤で色分けして。最下部に資産クラス別の配分を円グラフで表示。データはすべてデータベースのholdingsテーブルから取得して」
タイプ2 — 予算ビュー
必要な機能：
-
当月の収入と支出を表示する
-
カテゴリー別に支出を分類する（プリセットではなく、自分独自のカテゴリーで）
-
カテゴリーごとの予算消化率を表示する
-
貯蓄率を明確に表示する
データベース構成：
| テーブル | 主要カラム |
|---|---|
| transactions | id, date, description, amount, category, type (income/expense) |
| budgets | id, category, monthly_limit, month, year |
| monthly_summary | id, month, year, total_income, total_expenses, savings_rate |
構築プロンプト：
「今月の予算ダッシュボードを構築して。背景は白、清潔で読みやすいもの。上段に総収入、総支出、貯蓄率を大きな3つの数字で横並びに表示。その下に、各支出カテゴリーの行を配置して。カテゴリー名、支出額、予算上限、水平プログレスバーを表示して（80％未満は緑、80～99％はオレンジ、100％以上は赤）。その下に、日付、説明、カテゴリー、金額を含む最近の取引リストを表示。ダッシュボード上で直接新しい取引を追加できるようにして。データはtransactionsテーブルとbudgetsテーブルから取得して」
タイプ3 — 取引トラッカー
投資家、営業担当者、不動産業者、または機会のパイプラインを管理するあらゆる人向け。
必要な機能：
-
現在のステージとともにすべてのアクティブな取引を表示する
-
パイプラインの総額を表示する
-
緊急度や終了日に応じて取引にフラグを立てる
-
取引ごとのメモと次のアクションを追跡する
データベース構成：
| テーブル | 主要カラム |
|---|---|
| deals | id, deal_name, counterparty, value, stage, close_date, probability, owner |
| deal_notes | id, deal_id, note_text, created_at |
| pipeline_summary | id, date, total_pipeline_value, weighted_pipeline_value |
構築プロンプト：
「取引トラッカーダッシュボードを構築して。ダーク背景でプロフェッショナルな雰囲気。上段にパイプライン総額、加重パイプライン価値（価値×確率）、アクティブな取引数、今月終了の取引数を表示。下にカンバンボードを配置し、各取引ステージの列（見込み、認定、提案、交渉、成約、失注）を作成。各取引をカードとして表示し、取引名、相手先、価値、終了日を表示。14日以内に終了するカードには赤枠を付ける。取引カードをクリックすると、詳細とメモセクションが表示されるサイドパネルを開くようにして。データはdealsテーブルとdeal_notesテーブルから取得して」
自分仕様にする — Visual Editor
上記のプロンプトで機能的な土台が作れます。Visual Editorを使えば、それを自分仕様にカスタマイズできます。
最初のビルドが完了したら、Visual Editorを開いて、プロンプトを書き直さずに以下の調整を行ってください：
-
タイポグラフィ — 数字が重要な場合は、大きくする。ダッシュボードでは階層が重要です。
-
色分け — あなたの「緑」はデフォルトと異なるかもしれません。要素をクリックして正確な色味に変更できます。
-
スペース — 金融データには呼吸する余白が必要です。窮屈に感じる場合はカード内のパディングを増やしてください。
-
レイアウトの順序 — セクションをドラッグして、実際の視線の動きに合わせる。最初に確認すべき数字を左上に配置します。
ファイナンスダッシュボードの鉄則：最初に見るべきものは、今日が良い一日か、それとも注意が必要な日かを判断できる情報であるべきです。それ以外はすべて詳細情報です。
Enter Proの使い方
ダッシュボードが構築され動作し始めたら、Enter Proを使って以下の3つの方法で機能を拡張できます。
- 自然言語でデータについて質問する
Enter ProのAIエージェントをCloud DBに接続すれば、技術的な知識なしで財務データについて照会できます：
「過去6ヶ月間の食費の月平均支出は？」「現在保有している資産のうち、未実現損益率が最も高いものはどれ？」「過去90日間で何件の取引が成約し、その合計金額は？」
エージェントがデータベースを読み取り、直接回答します。SQLもピボットテーブルも不要。ただ質問するだけです。
- MCP経由で外部データソースを接続する
ポートフォリオトラッカーで手動入力ではなくライブ価格を取得したい場合は、MCP経由でAlpha Vantageを接続します（本シリーズの前の記事で解説）。接続後は以下のようになります：
「Alpha Vantageからのライブデータを使って、データベース内のすべての保有資産のcurrent_priceフィールドを更新して」
質問するたびにダッシュボードが最新価格で更新されます。
- 分析とレポートを生成する
「過去3ヶ月間の取引テーブルを見て、予算に対して支出過多になっている箇所を1段落で要約して。具体的に書いて」「今四半期と前四半期のポートフォリオパフォーマンスを比較して、どのポジションが最も変化したか教えて」
AIエージェントはデータを表示するだけでなく、読み取り、解釈し、その意味を教えてくれます。これこそが、単なるダッシュボードと、意思決定を支援する真のツールの違いです。
重要なポイント
ファイナンスダッシュボードは、すべてを表示しようとすると失敗します。最初に「正しいこと」を表示するときに真価を発揮します。
公開ボタンを押す前に、他人の視点でダッシュボードを見てみてください。最も重要な数字はすぐに分かりますか？レイアウトはあなたの実際の財務管理の考え方に合っていますか？それとも汎用的なテンプレートに合わせているだけですか？
目線が自然に向かない場所に重要な情報があるなら、移動させてください。Visual Editorなら数秒で調整可能です。
最高のファイナンスツールとは、機能が豊富なものではなく、必要な情報が一目で分かるため毎日開きたくなるものです。
