Figma AIでダッシュボードはどこまで作れる？基本手順と実践サンプルを公開

1. はじめに

キーウォーカーでは、お客様へより早く、より良い価値を提供するための試行錯誤を実施しています。

私たちのチームでは、データ収集を効率化するShtockDataやWebページ差分監視・通知サービスのCERVNといった自社プロダクトの開発を行っていますが、フロントエンド開発に多くの工数を割いており、開発コストを削減したいという課題を抱えていました。

そこで、AIツールを活用することでどの程度効率化できるかを確認するために、Figma公式のAI機能「Figma AI（Figma Make）」を活用し、モックアップがどこまで作成できるかの検証を実施しました。

今回は検証の題材として、多数のUIコンポーネントを含む不動産市場分析ダッシュボードのモックアップ作成に取り組みました。本ブログでは、要件定義の作り方からAIへのプロンプト設計、実際の生成結果、そして活用時の注意点までを一連の手順として共有します。同様の課題を抱えている方の参考になれば幸いです。

2. 結論

2-1. モックアップの初版としては十分なクオリティ

検証の結果、Figma AIを使用することでプロトタイプレベルのダッシュボードを作成することができました。

たたき台としては十分に活用可能なクオリティであるため、適切なプロンプトを入力することで、業務に必要な要素（フィルター機能、分析グラフ、比較表など）を含んだ包括的なUIの初版を、短時間で生成できることが確認できました。

ただし、ここで強調しておきたいのは、生成されるアウトプットはそのまま実際の運用で利用できるレベルの完成品ではないということです。細部のデザイン調整や整合性の担保には依然として人の手が必要です。

2-2. 作成物のキャプチャ画像

3. 運用時の制約と活用方針

3-1. 運用活用（本番利用）は困難だが、初期検討段階では有効

Figma AI（Make）を実際の開発運用フローにそのまま乗せることは、現段階では困難です。理由として、生成結果のデザインに一貫性が欠ける場合があることや、利用制限などの制約があるためです。

しかし、プロトタイプの生成においては非常に強力なツールとなります。特に以下の用途において有効です

• プロジェクト初期のプロトタイプ作成（0→1の作成）
• デザインのたたき台としての活用

「完璧なものを作る」のではなく、「議論を始めるための具体的なビジュアルを作る」という目的であれば、十分に実用可能です。

4.【ステップ1】プロンプトの設計：AIに的確な指示を出す

ゴール：不動産市場動向分析ダッシュボードの作成

今回は「不動産情報ライブラリ」のオープンデータを活用し、特定のエリアにおける不動産市場のトレンドや価格の妥当性を分析・可視化するダッシュボードを作成します。

ターゲットユーザーと課題の定義

使用するデータ（不動産情報ライブラリからダウンロードしたCSVファイル）のカラム情報をAIに伝え、データ構造を正確に理解させることが重要です。

具体的には、取引時点、物件種別（中古マンション等）、市区町村名、最寄駅：名称、最寄駅：距離(分)、取引価格（総額）、面積（㎡）、築年など、主要なカラムをプロンプトに含めることで、AIがより適切なダッシュボードを生成できるようになります。

要件定義書の作成

今回は、Markdown形式で要件定義書を作成しましたが、パワーポイントやPDFの資料に要件定義がある場合は、PDFでも問題ありません。要件定義書の内容は以下の通りです。

## 不動産市場分析ダッシュボード要件

### データソース
- Negishi line_Shimbashi_20201_20251.csv

### ダッシュボード構成要素

#### 1. エリア別・駅距離別価格マップ
- 地図上に物件の取引価格をプロットし、色分けやサイズで価格帯を表示
- 一目で高値エリアや割安エリアを把握可能
- 駅近プレミアムや距離による価格下落の傾向を明確に理解

#### 2. 時系列価格トレンド分析
- 取引時期と取引価格を折れ線グラフで表示
- 市場全体の価格トレンドや特定エリア・物件タイプの価格変動をリアルタイム追跡
- 市場のピークやボトムを予測し、売買タイミングの提案根拠として活用

#### 3. 物件特性と価格の相関関係ダッシュボード
- 散布図や箱ひげ図で面積、築年数、延床面積、前面道路幅員が価格に与える影響を分析
- どの要素が価格を大きく左右するかを把握
- 建物構造や用途別の平均価格比較で需要の高い物件タイプや投資価値の高い構造を特定

#### 4. 競合物件比較ツール
- フィルター機能で地域、駅距離、面積、築年数、用途等の条件で過去取引事例を絞り込み
- 類似物件の取引価格を瞬時に比較
- 顧客への販売価格提案や購入アドバイスで客観的なデータに基づいた説得力のある根拠を提供

#### 5. 開発ポテンシャル視覚的評価
- 都市計画、建ぺい率、容積率、前面道路幅員を組み合わせて表示
- 物件の再開発や増築可能性を視覚的に評価
- 投資家への提案材料として活用

#### 6. 市場異常値・特殊事例特定
- 価格が平均から大きく乖離している物件をハイライト表示
- 市場の異常値や「隣地の購入」等の特殊取引事情を素早く特定
- より詳細な調査が必要な物件を洗い出し

#### 7. 営業資料・顧客向けレポート作成効率化
- 可視化されたデータを営業資料や顧客向け市場レポートに直接活用
- 情報収集と資料作成の工数を大幅に削減
- データドリブンな戦略的意思決定と顧客への価値提供を実現

### デザイン要件
- 不動産業界のプロが使うツールとして「信頼感のある」「モダンでクリーンな」デザイン
- ユーザーが「市場の全体像」→「価格トレンドの詳細分析」→「個別データの確認」へとスムーズに思考を移せる構成
- インタラクティブなフィルター機能（期間指定、エリア指定、物件条件）を必須要件として実装

5.【ステップ2】Geminiに要件定義書とデータソースを登録

作成した要件定義書をGeminiに登録し、データソースと合わせてダッシュボードデザイン用のプロンプトを生成します。

Geminiの「知識」タブにデータソース（Negishi line_Shimbashi_20201_20251.csv）を登録します。

次に、Geminiに以下のようなプロンプトを入力して、要件定義書を生成します。

最終的に以下のような要件定義書に基づいたプロンプトが生成されます。

あなたは、不動産プロフェッショナル向けのデータ可視化ツールを専門とするUI/UXデザイナーです。提供された要件と以下のデータソース詳細を基に、不動産市場分析ダッシュボードのデザインを作成してください。
## データソース詳細
**データレイアウト（CSVの列情報）**:
- 種類
- 価格情報区分
- 地域
- 市区町村コード
- 都道府県名
- 市区町村名
- 地区名
- 最寄駅：名称
- 最寄駅：距離（分）
- 取引価格（総額）
- 坪単価
- 面積（㎡）
- 取引価格（㎡単価）
- 土地の形状
- 間口
- 延床面積（㎡）
- 建築年
- 建物の構造
- 用途
- 今後の利用目的
- 前面道路：方位
- 前面道路：種類
- 前面道路：幅員（ｍ）
- 都市計画
- 建ぺい率（％）
- 容積率（％）
- 取引時期
- 取引の事情等
## 基本要件
- **ターゲットユーザー**: 不動産売買仲介、デベロッパー、投資家
- **デザインコンセプト**: 信頼感があり、モダンでクリーンなデザイン。プロフェッショナルが日々の業務で利用するのにふさわしい、直感的で洗練されたインターフェース。
- **思考フロー**: ユーザーが「市場の全体像の把握」→「価格トレンドの詳細分析」→「個別物件データの確認」へと、スムーズに思考を深められるような情報設計。
- **カラーパレット**: 青を基調とした落ち着いたカラースキーム。信頼性と専門性を表現し、重要なデータ（例：異常値、高価格帯）をハイライトするためのアクセントカラー（例：オレンジ、赤）を効果的に使用。
- **タイポグラフィ**: 可読性の高いモダンなサンセリフ体（例：Noto Sans JP, Inter）を使用。
## ダッシュボード構成案
**## 1. メイン画面（オーバービュー）**
画面上部に、最も重要なKPI（Key Performance Indicator）とインタラクティブフィルターを配置します。
- **KPIサマリー**
- 取引総額（平均）
- 平均坪単価
- 取引件数
- 平均築年数
- **インタラクティブフィルター（画面上部に常時表示）**
- 取引時期: 期間指定スライダー
- エリア指定: 市区町村名 地区名 のドロップダウンメニュー
- 物件条件: 最寄駅：距離（分）, 面積（㎡）, 建築年 のスライダー
---
**## 2. 主要コンポーネント詳細**
### ① エリア別・駅距離別価格マップ
- **目的**: どのエリアが高価格帯か、駅からの距離で価格がどう変わるかを視覚的に把握する。
- **デザイン**:
- 地図ではなく、地区名を基準にしたツリーマップまたはバブルチャートで表現。
- 各エリアのバブルの「大きさ」を取引件数、「色の濃淡」を取引価格（総額）の平均値で表現する。
- バブルにカーソルを合わせると、詳細情報（地区名、平均価格、平均駅距離）がツールチップで表示される。
### ② 時系列価格トレンド分析
- **目的**: 市場全体の価格変動や特定のエリアのトレンドを追跡する。
- **デザイン**:
- 取引時期をX軸、取引価格（総額）をY軸にした折れ線グラフ。
- エリアフィルターと連動し、選択したエリアのトレンドを表示。
- 平均価格の移動平均線も表示し、短期的な変動と長期的なトレンドを区別できるようにする。
### ③ 物件特性と価格の相関関係
- **目的**: 価格に影響を与える主要な要因を分析する。
- **デザイン**:
- **散布図**:
- 面積（㎡）と取引価格（総額）
- 築年数と取引価格（総額）
- **箱ひげ図**:
- 建物の構造（RC, SRC, 鉄骨造など）別の取引価格（総額）分布
- 用途（住宅、店舗、共同住宅など）別の取引価格（総額）分布
### ④ 競合物件比較ツール
- **目的**: 条件に合致する過去の取引事例をリストで比較検討する。
- **デザイン**:
- 画面上部のフィルターで絞り込まれた結果が、テーブル（表形式）で表示される。
- **表示項目**: 地区名, 最寄駅：名称, 最寄駅：距離（分）, 取引価格（総額）, 面積（㎡）, 建築年, 用途, 取引の事情等
- テーブルは各項目でソート（並び替え）可能にする。
### ⑤ 開発ポテンシャル評価
- **目的**: 物件の再開発や増築の可能性を評価する。
- **デザイン**:
- 比較ツール（④）のテーブルで特定の物件を選択すると、その物件の詳細情報としてレーダーチャートを表示。
- **レーダーチャートの項目**: 建ぺい率（％）, 容積率（％）, 前面道路：幅員（ｍ） などを表示し、開発ポテンシャルのバランスを視覚的に示す。
### ⑥ 市場異常値の特定
- **目的**: 平均から大きく乖離した取引や特殊な事情がある取引を素早く見つける。
- **デザイン**:
- 価格マップ（①）や時系列トレンド（②）、散布図（③）上で、統計的に外れ値となるデータを異なる色（例：警告を示す黄色や赤色）でハイライト表示する。
- 取引の事情等に「隣地の購入」などの記載があるデータも同様にハイライトする。

6.【ステップ3】Figma AIでダッシュボードを生成する

Geminiで生成したプロンプトをFigma AIに入力します。

作成ボタンクリック後、ダッシュボードデザインが生成されます。

7.【実践サンプル】Figma AIが生成したダッシュボードのデザイン

生成されたダッシュボードのデザインは以下の通りです。

フィルタ設定・サマリー表示

画面上部にインタラクティブなフィルター機能が配置されています。期間指定、エリア指定、物件条件などのフィルターを操作することで、データを動的に絞り込むことができます。

また、重要なKPIが一目で把握できるサマリーセクションも表示されており、取引総額、平均取引価格、取引件数、平均築年数などの主要指標が視覚的に整理されています。

エリア別・駅距離別価格マップ

地図上に物件の取引価格をプロットした価格マップが表示されています。各エリアのバブルの「色の濃淡」で取引価格の平均値を表現しており、一目で高値エリアや割安エリアを把握できます。

マーカーにホバーすると、地区名、平均価格、平均駅距離などの詳細情報がツールチップで表示される仕組みも実装されています。

時系列価格トレンド分析

取引時期をX軸、取引価格をY軸にした折れ線グラフで、市場全体の価格変動や特定エリアのトレンドを追跡できます。エリアフィルターと連動し、選択したエリアのトレンドを表示する機能も実装されています。

グラフ上のマーカーにホバーすることで、取引時期、取引価格、物件詳細などの詳細情報がツールチップで表示されます。また、移動平均線の表示/非表示をトグルできる機能や、期間を変更できるスライダーも搭載されており、短期的な変動と長期的なトレンドを区別して分析できます。

物件特性と価格の相関

物件の特性と価格の相関関係を4つのタブに分けて表示しています。各タブでは以下の分析が可能です

• 面積相関: 面積（㎡）と取引価格の散布図で、面積が大きいほど取引価格が高い傾向を可視化
• 築年数相関: 築年数と取引価格の散布図で、築年数が古いほど取引価格が低い傾向を分析
• 構造別: 建物構造（RC、SRC、鉄骨造など）別の価格分布を比較
• 用途別: 用途（住宅、店舗、共同住宅など）別の価格分布を分析

各グラフ上のデータポイントにホバーすることで、物件の詳細情報（地区名、取引価格、面積、築年数など）がツールチップで表示され、どの要素が価格を大きく左右するかを把握できます。

競合物件比較ツール・開発ポテンシャル評価

条件に合致する過去の取引事例をリストで比較検討することができます。以下の機能が実装されています

• 競合物件比較ツール:
  • テーブル形式で地区名、最寄駅、取引価格、面積、築年数、用途、取引事情等を表示
  • 各項目でソート（並び替え）可能
• 開発ポテンシャル評価:
  • 特定の物件を選択すると、その物件の詳細情報としてレーダーチャートを表示
  • 建ぺい率（％）、容積率（％）、前面道路幅員（ｍ）などを表示
  • 物件の再開発や増築可能性を視覚的に評価
  • 総合評価点数による定量的な開発ポテンシャル評価

市場異常値の特定

市場異常値の特定を行っています。以下の機能が実装されています

• 価格マップ（①）や時系列トレンド（②）、散布図（③）上で、統計的に外れ値となるデータを異なる色（例：警告を示す黄色や赤色）でハイライト表示する。

8. Figma AIなどの生成AI活用の注意点

生成AIの活用には以下のような注意すべきデメリットと制約があります。実務で導入する際には、これらの点を十分に理解し、対策を検討する必要があります。

1. 生成結果の一貫性の欠如

同じプロンプトを使用しても、生成されるデザインに一貫性がない場合があります。複数の画面を持つダッシュボードや、デザインシステムの統一が求められるプロジェクトでは、この一貫性の欠如が大きな問題となります。

例えば、1つ目の画面で生成されたボタンのスタイルと、2つ目の画面で生成されたボタンのスタイルが異なるケースや、カラーパレットが微妙に変わってしまうケースが発生します。これにより、手動での修正・統一作業が必要になり、結果的に作業効率が低下します。

2. カスタマイズの限界と手動修正の必要性

初期デザインの生成には優れていますが、細かいカスタマイズや独自性のあるデザイン要素の追加には限界があります。生成されたデザインは汎用的で「無難」なデザインになりがちで、ブランディングや独自性を強く打ち出したい場合には、大幅な手動修正が必要です。

これらのデメリットを踏まえた上で、生成AIは「初期デザインのアイデア出し」「プロトタイプの迅速な作成」「定型的なUIコンポーネントの生成」といった用途に限定して活用することが現実的です。

9. まとめ

本記事では、Figma公式のAI機能「Figma AI（Figma Make）」を活用したモックアップ作成の検証結果を共有しました。

検証の結果、運用レベルの完成品ではなく、プロトタイプレベルの成果物であれば効率化できることが明確になりました。

今後もShtockDataやCERVNの機能開発を効率化し、お客様へより早く、より良い価値を提供するための試行錯誤を続けていきます。

おわりに

私たちキーウォーカーは 「まずは試す」「成功も失敗もオープンに共有する」 ことを大切にしています。
新しい技術やツールを積極的に取り入れ、事業成果・顧客価値に結びつける取り組みを続けています。

• 新しいことに主体的に取り組みたい
• 最新技術（生成AIやLLMなど）を活用した価値創出に挑戦したい
• BizとDevの垣根を越えて挑戦してみたい

新卒・中途問わず、そんな意欲ある仲間を歓迎しています。
少しでも興味を持っていただいた方は、ご応募・お問い合わせください。

👉 詳しくは新卒採用ページ、中途採用ページをご覧ください。

この記事の著者：福田 修平