Tech Waves

produced by Hakuhodo DY ONE

本ブログは、株式会社Hakuhodo DY ONEの開発チームによるエンジニアブログです。
それぞれのメンバーが業務を通して得た技術情報や、各種セミナーの参加レポート、またその他トピックについて情報発信を行っています。

フロアマップをGensparkとTableauの力で可視化してみた

こんにちは、廣本です🗺️。

一見すると、構造化データとして扱いにくそうなフロアマップですが、今回はさまざまなAIエージェント機能を持つGensparkと、多様な可視化表現が得意なTableauの力を使って、可視化してみました。

Genspark - Your All-in-One AI Workspace

フロアマップ画像の準備

まずは今回の検証に使用するフロアマップを準備します。今回はGensparkの「AI画像」機能を使用して、架空の商業施設のフロアマップを作成しました。

モデルはNano Bananaを使用して作成しています。Gensparkでは編集したい箇所を具体的に指示することができ、画像の微調整をしやすいのが便利な点です。

何度かやり取りをして、フロアマップが完成しました。今回はこの架空の商業施設のフロアマップをTableauで可視化してみたいと思います。


フロアマップ画像を構造化する

では上記で作成したフロアマップ画像を構造化したテーブルの形式に変換していきましょう。

まずは画像の情報から、店舗のリストを作成します。今度はGensparkのスーパーエージェントを使用します。

プロンプトの内容を参照するだけではなく、その依頼内容を正しく理解して処理するために、AIエージェントが自律的に必要なツールを選んで使用してから、結果が出力されます。

プロンプト

添付の画像データから、店舗情報を下記のテーブル形式でリスト化してください。
店舗IDは、「s-001」のような形式で、左上の店舗から時計回りに連番を振ってください。
店舗カテゴリは、色の判例で使用されているものを記載してください。

店舗ID 店舗カテゴリ

出力された結果は以下です。

店舗ID 店舗カテゴリ 位置
S-001 Fashion Stores 上部エリア・左側1番目(ピンク)
S-002 Fashion Stores 上部エリア・左側2番目(ピンク)
S-003 Fashion Stores 上部エリア・中央(エレベーター横)(ピンク)
S-004 Electronics Shop 上部エリア・右端(青)
S-005 Cafes 右側エリア・上(ベージュ)
S-006 Cafes 右側エリア・中央(ベージュ)
S-007 Bookstore 右側エリア・下(緑)
S-008 Cafes 下部エリア・右側(ベージュ)
S-009 Cafes 下部エリア・中央右(ベージュ)
S-010 Restaurants 下部エリア・中央(オレンジ)
S-011 Fashion Stores 下部エリア・左側(大)(ピンク)
S-012 Fashion Stores 左側エリア・下(縦型)(ピンク)
S-013 Fashion Stores 左側エリア・上(縦型)(ピンク)
S-014 Restaurants 内部エリア・左上1番目(オレンジ)
S-015 Restaurants 内部エリア・左上2番目(オレンジ)
S-016 Fashion Stores 内部エリア・左下(ピンク)
S-017 Restaurants 内部エリア・左下右隣(オレンジ)
S-018 Food Court 中央エリア(黄)

画像を正しく読み取り、店舗情報を一覧化してくれました。位置の説明もわかりやすいですね。

では続いて、Tableauで位置を可視化するために、座標データを作成したいと思います。同様にGensparkのスーパーエージェントに依頼してみましょう。

プロンプト

この店舗一覧情報をTableauで可視化したいと思います。
各店舗の位置を定義する、X座標とY座標のデータを作成してください。

テーブルの表示にとどまらず、CSVファイルの作成やプレビュー表示までおこなってくれました。


出力された構造化テーブルは下記です。

店舗ID 店舗カテゴリ X(中心) Y(中心) Width Height X_min X_max Y_min Y_max
S-001 Fashion Stores 16 62 18 16 7 25 54 70
S-002 Fashion Stores 34 62 18 16 25 43 54 70
S-003 Fashion Stores 65 62 14 16 58 72 54 70
S-004 Electronics Shop 90 63 20 14 80 100 56 70
S-005 Cafes 90 47 20 14 80 100 40 54
S-006 Cafes 75 44 10 18 70 80 35 53
S-007 Bookstore 90 28 20 20 80 100 18 38
S-008 Cafes 76 8 14 12 69 83 2 14
S-009 Cafes 62 8 14 12 55 69 2 14
S-010 Restaurants 47 8 14 12 40 54 2 14
S-011 Fashion Stores 22 8 26 12 9 35 2 14
S-012 Fashion Stores 3 27 6 32 0 6 11 43
S-013 Fashion Stores 3 55 6 26 0 6 42 68
S-014 Restaurants 16 49 18 16 7 25 41 57
S-015 Restaurants 34 49 18 16 25 43 41 57
S-016 Fashion Stores 16 32 18 16 7 25 24 40
S-017 Restaurants 34 32 18 16 25 43 24 40
S-018 Food Court 58 37 24 28 46 70 23 51

各店舗の中心座標だけでなく、ポリゴンとして表示できるよう、幅と高さの情報も付与してくれました。

自力でこういったデータをつくるのはなかなか大変ですが、スーパーエージェントのおかげで、わずか数分で構造化データが完成しました。

Tableauで座標データをプロットする

ではこのデータをTableauで可視化してみましょう。
せっかくなので、可視化する手順を同じくスーパーエージェントに確認してみました。

プロンプト

Tableauで実際にこのデータを使って、
フロアマップ可視化のワークブックを作成する手順を詳しく教えてください。


新たにポリゴン用の構造化テーブルを作成してくれました。

店舗ID 店舗カテゴリ Path X Y
S-001 Fashion Stores 1 7 54
S-001 Fashion Stores 2 25 54
S-001 Fashion Stores 3 25 70
S-001 Fashion Stores 4 7 70
S-001 Fashion Stores 5 7 54
S-002 Fashion Stores 1 25 54
S-002 Fashion Stores 2 43 54
S-002 Fashion Stores 3 43 70
S-002 Fashion Stores 4 25 70
S-002 Fashion Stores 5 25 54
S-003 Fashion Stores 1 58 54
S-003 Fashion Stores 2 72 54
S-003 Fashion Stores 3 72 70
S-003 Fashion Stores 4 58 70
S-003 Fashion Stores 5 58 54
S-004 Electronics Shop 1 80 56
S-004 Electronics Shop 2 100 56
S-004 Electronics Shop 3 100 70
S-004 Electronics Shop 4 80 70
S-004 Electronics Shop 5 80 56
S-005 Cafes 1 80 40
S-005 Cafes 2 100 40
S-005 Cafes 3 100 54
S-005 Cafes 4 80 54
S-005 Cafes 5 80 40
S-006 Cafes 1 70 35
S-006 Cafes 2 80 35
S-006 Cafes 3 80 53
S-006 Cafes 4 70 53
S-006 Cafes 5 70 35
S-007 Bookstore 1 80 18
S-007 Bookstore 2 100 18
S-007 Bookstore 3 100 38
S-007 Bookstore 4 80 38
S-007 Bookstore 5 80 18
S-008 Cafes 1 69 2
S-008 Cafes 2 83 2
S-008 Cafes 3 83 14
S-008 Cafes 4 69 14
S-008 Cafes 5 69 2
S-009 Cafes 1 55 2
S-009 Cafes 2 69 2
S-009 Cafes 3 69 14
S-009 Cafes 4 55 14
S-009 Cafes 5 55 2
S-010 Restaurants 1 40 2
S-010 Restaurants 2 54 2
S-010 Restaurants 3 54 14
S-010 Restaurants 4 40 14
S-010 Restaurants 5 40 2
S-011 Fashion Stores 1 9 2
S-011 Fashion Stores 2 35 2
S-011 Fashion Stores 3 35 14
S-011 Fashion Stores 4 9 14
S-011 Fashion Stores 5 9 2
S-012 Fashion Stores 1 0 11
S-012 Fashion Stores 2 6 11
S-012 Fashion Stores 3 6 43
S-012 Fashion Stores 4 0 43
S-012 Fashion Stores 5 0 11
S-013 Fashion Stores 1 0 42
S-013 Fashion Stores 2 6 42
S-013 Fashion Stores 3 6 68
S-013 Fashion Stores 4 0 68
S-013 Fashion Stores 5 0 42
S-014 Restaurants 1 7 41
S-014 Restaurants 2 25 41
S-014 Restaurants 3 25 57
S-014 Restaurants 4 7 57
S-014 Restaurants 5 7 41
S-015 Restaurants 1 25 41
S-015 Restaurants 2 43 41
S-015 Restaurants 3 43 57
S-015 Restaurants 4 25 57
S-015 Restaurants 5 25 41
S-016 Fashion Stores 1 7 24
S-016 Fashion Stores 2 25 24
S-016 Fashion Stores 3 25 40
S-016 Fashion Stores 4 7 40
S-016 Fashion Stores 5 7 24
S-017 Restaurants 1 25 24
S-017 Restaurants 2 43 24
S-017 Restaurants 3 43 40
S-017 Restaurants 4 25 40
S-017 Restaurants 5 25 24
S-018 Food Court 1 46 23
S-018 Food Court 2 70 23
S-018 Food Court 3 70 51
S-018 Food Court 4 46 51
S-018 Food Court 5 46 23

ポリゴンデータを扱う場合、頂点を順番につなぐ必要があるため、各頂点の座標データを新たに作成してくれました。

また、Tableauで実装する際の手順として、下記の解説もおこなってくれました。

📐 ポリゴンデータの構造(重要)
store_polygon.csv は各店舗の矩形を 5頂点(左下→右下→右上→左上→左下で閉じる) で定義しています。

店舗ID,  店舗カテゴリ,      Path, X,  Y
S-001,  Fashion Stores,   1,    7,  54   ← 左下
S-001,  Fashion Stores,   2,   25,  54   ← 右下
S-001,  Fashion Stores,   3,   25,  70   ← 右上
S-001,  Fashion Stores,   4,    7,  70   ← 左上
S-001,  Fashion Stores,   5,    7,  54   ← 閉じる(左下に戻る)

🔧 STEP 1:データ接続
Tableau Desktop を起動
左パネル「接続」→「テキストファイル」を選択
store_polygon.csv を開く
左側の「追加」から store_label.csv も追加
両テーブルを 「店舗ID」キーでリレーション設定

📊 STEP 2:ポリゴンマーク設定(最重要)
設定場所	設定内容
マークカードの種類	「ポリゴン」 に変更
列シェルフ	X をドラッグ(連続・平均)
行シェルフ	Y をドラッグ(連続・平均)
マーク「詳細」	店舗ID をドラッグ
マーク「パス」	Path をドラッグ ⬅️ これが最重要!
⚠️ 「パス」シェルフ に Path を入れないとポリゴンが正しく描画されません。

🎨 STEP 3:色・ラベル設定
マークカード「色」 に 店舗カテゴリ をドラッグし、以下のカラーコードを手動設定:

カテゴリ	カラーコード	色見本
Fashion Stores	#F4A8C6	🩷 ピンク
Restaurants	#F4845F	🟧 オレンジ
Electronics Shop	#7EC8E3	🔵 水色
Cafes	#C8A882	🟫 ベージュ
Food Court	#F5E87C	🟨 黄色
Bookstore	#7DBF7D	🟩 緑
マークカード「ラベル」 に 店舗ID をドラッグ

⚙️ STEP 4:軸・書式の仕上げ
X軸:右クリック → 軸の編集 → 固定範囲 0〜100
Y軸:右クリック → 軸の編集 → 固定範囲 0〜70
両軸:ヘッダーの表示 → OFF
書式:グリッド線・枠線 → 非表示


ではこれを参考にしながらTableauで座標データをプロットして可視化してみましょう。

プロットしてみたところ、以下のようになりました。


大まかな位置やサイズは問題ないように見えます。しかし微妙に座標が重なってしまっている箇所や、通路の幅がバラバラになっていたため、スーパーエージェントに状況を共有し、座標データの見直しをおこないました。


結果、フロアマップと完全一致とはいきませんが、重なりや通路の幅が大きく改善されました。


上記を元に、最終的には私の目視で座標の確認および調整をおこないました。


修正版のポリゴンデータは下記です。

店舗ID 店舗カテゴリ Path X Y
S-001 Fashion Stores 1 9.5 51
S-001 Fashion Stores 2 27 51
S-001 Fashion Stores 3 27 62
S-001 Fashion Stores 4 9.5 62
S-001 Fashion Stores 5 9.5 51
S-002 Fashion Stores 1 27.5 51
S-002 Fashion Stores 2 45 51
S-002 Fashion Stores 3 45 62
S-002 Fashion Stores 4 27.5 62
S-002 Fashion Stores 5 27.5 51
S-003 Fashion Stores 1 55 51
S-003 Fashion Stores 2 70 51
S-003 Fashion Stores 3 70 62
S-003 Fashion Stores 4 55 62
S-003 Fashion Stores 5 55 51
S-004 Electronics Shop 1 75 51
S-004 Electronics Shop 2 88 51
S-004 Electronics Shop 3 88 62
S-004 Electronics Shop 4 75 62
S-004 Electronics Shop 5 75 51
S-005 Cafes 1 75 40
S-005 Cafes 2 88 40
S-005 Cafes 3 88 50
S-005 Cafes 4 75 50
S-005 Cafes 5 75 40
S-006 Cafes 1 65.5 40
S-006 Cafes 2 70 40
S-006 Cafes 3 70 46.5
S-006 Cafes 4 65.5 46.5
S-006 Cafes 5 65.5 40
S-007 Bookstore 1 75 16.5
S-007 Bookstore 2 88 16.5
S-007 Bookstore 3 88 33
S-007 Bookstore 4 75 33
S-007 Bookstore 5 75 16.5
S-008 Cafes 1 72.5 9
S-008 Cafes 2 88 9
S-008 Cafes 3 88 16
S-008 Cafes 4 72.5 16
S-008 Cafes 5 72.5 9
S-009 Cafes 1 60 9
S-009 Cafes 2 69 9
S-009 Cafes 3 69 16
S-009 Cafes 4 60 16
S-009 Cafes 5 60 9
S-010 Restaurants 1 42 9
S-010 Restaurants 2 52.5 9
S-010 Restaurants 3 52.5 16
S-010 Restaurants 4 42 16
S-010 Restaurants 5 42 9
S-011 Fashion Stores 1 12.5 9
S-011 Fashion Stores 2 40.5 9
S-011 Fashion Stores 3 40.5 18
S-011 Fashion Stores 4 12.5 18
S-011 Fashion Stores 5 12.5 9
S-012 Fashion Stores 1 3 9
S-012 Fashion Stores 2 9 9
S-012 Fashion Stores 3 9 33
S-012 Fashion Stores 4 3 33
S-012 Fashion Stores 5 3 9
S-013 Fashion Stores 1 3 45
S-013 Fashion Stores 2 9 45
S-013 Fashion Stores 3 9 62
S-013 Fashion Stores 4 3 62
S-013 Fashion Stores 5 3 45
S-014 Restaurants 1 12.5 34.5
S-014 Restaurants 2 27 34.5
S-014 Restaurants 3 27 46.5
S-014 Restaurants 4 12.5 46.5
S-014 Restaurants 5 12.5 34.5
S-015 Restaurants 1 27.5 34.5
S-015 Restaurants 2 42 34.5
S-015 Restaurants 3 42 46.5
S-015 Restaurants 4 27.5 46.5
S-015 Restaurants 5 27.5 34.5
S-016 Fashion Stores 1 12.5 22
S-016 Fashion Stores 2 27 22
S-016 Fashion Stores 3 27 34
S-016 Fashion Stores 4 12.5 34
S-016 Fashion Stores 5 12.5 22
S-017 Restaurants 1 27.5 22
S-017 Restaurants 2 42 22
S-017 Restaurants 3 42 34
S-017 Restaurants 4 27.5 34
S-017 Restaurants 5 27.5 22
S-018 Food Court 1 46 20
S-018 Food Court 2 65 20
S-018 Food Court 3 65 46.5
S-018 Food Court 4 46 46.5
S-018 Food Court 5 46 20


架空の店舗情報を追加

最後に、各店舗の店舗名・特徴・イメージ画像を作成します。
生成AIに考えてもらった店舗名と特徴は以下です。

店舗ID 店舗名 特徴
S-001 ファッションプラザ1F 最新トレンドのレディースファッション
S-002 スタイルコレクション 高品質なメンズカジュアルウェア
S-003 エレガンスクローゼット フォーマルからカジュアルまで幅広い品揃え
S-004 デジタルワールド 最新家電とスマートデバイス
S-005 ブレイクタイムカフェ 挽きたてコーヒーと手作りサンドイッチ
S-006 マイルドコーヒーハウス 落ち着いた空間でこだわりの一杯
S-007 知識の森書店 幅広いジャンルの書籍と文房具
S-008 リラックスカフェ 読書に最適な静かなカフェスペース
S-009 フレッシュスムージー 旬のフルーツを使ったヘルシードリンク
S-010 グルメキッチン 世界各国の料理が楽しめるレストラン
S-011 トータルファッション 家族向けのカジュアルウェアと雑貨
S-012 メンズセレクト ビジネスからカジュアルまでメンズ専門
S-013 レディースファッションラボ 若者向けのトレンドファッションアイテム
S-014 和食亭 伝統的な日本の味、寿司と天ぷら
S-015 イタリアーノ 本格的なピザとパスタ
S-016 キッズ&ファミリー 子供服と親子で楽しめるファッション
S-017 中華飯店 ボリューム満点の中華料理
S-018 フードコートスクエア 多彩なジャンルの料理をカジュアルに

店舗画像は、GensparkのAI画像機能を用いて作成しました。

 

プロンプト

下記はサンプルの商業施設に入っている18の店舗またはエリアの名称と特徴です。
それぞれ18個のイメージ画像を作成してください。
なお実在する企業のロゴや商品に似せることは禁止とします。
著作権侵害は決しておこなわないでください。

店舗ID	店舗名	特徴
S-001	ファッションプラザ1F	最新トレンドのレディースファッション
S-002	スタイルコレクション	高品質なメンズカジュアルウェア
S-003	エレガンスクローゼット	フォーマルからカジュアルまで幅広い品揃え
S-004	デジタルワールド	最新家電とスマートデバイス
S-005	ブレイクタイムカフェ	挽きたてコーヒーと手作りサンドイッチ
S-006	マイルドコーヒーハウス	落ち着いた空間でこだわりの一杯
S-007	知識の森書店	幅広いジャンルの書籍と文房具
S-008	リラックスカフェ	読書に最適な静かなカフェスペース
S-009	フレッシュスムージー	旬のフルーツを使ったヘルシードリンク
S-010	グルメキッチン	世界各国の料理が楽しめるレストラン
S-011	トータルファッション	家族向けのカジュアルウェアと雑貨
S-012	メンズセレクト	ビジネスからカジュアルまでメンズ専門
S-013	レディースファッションラボ	若者向けのトレンドファッションアイテム
S-014	和食亭	伝統的な日本の味、寿司と天ぷら
S-015	イタリアーノ	本格的なピザとパスタ
S-016	キッズ&ファミリー	子供服と親子で楽しめるファッション
S-017	中華飯店	ボリューム満点の中華料理
S-018	フードコートスクエア	多彩なジャンルの料理をカジュアルに

 


まとめ

GensparkとTableauを使用して、フロアマップの可視化にチャレンジしてみました。今回はポリゴンデータを作成するまでおこないましたが、フロアマップの画像データを背景画像として設定してみても良いかもしれません。抽象的な指示であっても、Gensparkが意図を汲み取って可視化のサポートをしてくれたのが非常に助かりました。

一方で、AIの出力結果を一部私が修正した部分もありました。AIの出力結果を鵜呑みにするのではなく、人間が出力結果をきちんと評価し、ときには自分自身で最終的な調整をおこなうことが重要ですね。今回は私自身がポリゴンデータの扱い方を理解していたため、最後に自分で修正することができました。

「AIが考えてくれるから自分は知らなくて良い」ではなく、「AIが考えてくれたことを評価できるよう、自分も知識を持っておかなければならない」ということを感じました。

 

この記事を書いた人

廣本 (id:hrhrkun)

以前はBIの開発業務を担当。今はナレッジマネジメントの推進や、AIエージェントの開発をメインにいろいろ行っています。