公開データは取得できても、現場判断にはそのまま使いにくい
API 単体では条件指定や比較観点が断片的になりやすく、確認に時間がかかります。 特に駅起点で相場を見たい場面では、入力導線と一覧表示の整理が必要でした。
公開データを、意思決定に使える業務画面へ再設計
駅指定の不動産売買履歴を、迷わず比較できる検索体験へ。
国土交通省の不動産情報ライブラリ API と駅マスタを組み合わせ、 実務で確認したい条件に沿って売買履歴を横断比較できる Web アプリを企画・実装しました。 単なるデータ取得ではなく、検索導線、要約表示、詳細確認、CSV 出力までを一貫して設計しています。
Project Snapshot
駅指定で絞る、不動産リサーチ画面
駅候補の選択から売買履歴の比較までを、視認性と判断速度を意識して組み立てたプロダクトです。
検索条件
10+
年 / 四半期 / 面積 / 価格帯 / 構造
出力体験
3段階
一覧 / 詳細 / CSV
表示価値
Summary
平均価格 / 中央値 / 平米単価
検索起点
Station
駅名サジェストから導線化
表示内容
役割
価値
駅検索と候補選択
入力起点
迷いを減らす
条件フィルタとソート
比較支援
判断を早める
CSV エクスポート
二次活用
業務に接続する
Overview
このアプリで解いたのは、データ取得ではなく、比較しづらさそのものです。
不動産取引情報は取得できても、実際には「どの駅の、どの時期の、どの価格帯を、どう比較するか」が煩雑になりがちです。 そこで、駅指定を起点にした検索導線と、要約から詳細確認までの流れをひとつの業務画面として整理しました。
検索開始から比較判断までを一画面で完結
駅サジェスト、検索条件、サマリー、詳細モーダル、CSV までを分断せず設計し、 操作の往復を減らす構成にしています。
採用担当やクライアントに見せやすい、業務アプリの実装例
API 連携だけでなく、情報設計、UI 密度、例外時の扱い、二次利用のための出力まで含めて、 実務を想定したフロントエンド実装としてまとめています。
Features
主な機能
検索体験の組み立て方が伝わるよう、利用者の行動に沿って機能を整理しています。
駅名サジェストから始める検索導線
駅マスタをもとに候補を提示し、駅名だけでなく路線名や都道府県情報まで確認しながら対象を選べます。
比較しやすいフィルタ、ソート、集計表示
年、四半期、価格帯、面積、築年数、構造などを組み合わせ、 平均価格や中央値まで含めた要約を上段で提示します。
一覧で把握し、詳細モーダルで深掘る
一覧には比較に必要な情報だけを集約し、補足項目はモーダルへ分離。 情報密度を高めつつ、可読性を崩さない構成です。
CSV 出力まで含めて業務フローにつなぐ
画面上で見て終わりではなく、フィルタ後の全件を CSV として持ち出せるため、 比較検討や社内共有の次アクションへつなげられます。
Why It Matters
この実装で見せられること
採用担当や業務委託のクライアントに対して、単なる UI 作成ではなく、 情報整理と要件の翻訳まで扱えることが伝わる構成にしています。
要件を画面体験へ落とし込む力
API の仕様をそのまま露出せず、利用者が欲しい比較観点に変換して画面へ落とし込んでいます。
実務寄りの UI 密度設計
情報量の多い業務画面でも、視線移動と判断順序を意識して、混乱しにくいレイアウトに整理しています。
二次利用まで見据えた実装判断
サマリー表示、詳細モーダル、CSV 出力を揃えることで、閲覧だけで終わらない使い方まで設計しています。
Stack
技術構成
軽量なフロントエンド構成をベースに、公開 API とローカル駅データの橋渡しを行う実装です。
React
TypeScript
Vite
Tailwind CSS
不動産情報ライブラリ API
駅マスタデータ連携
CSV Export
業務画面 UI 設計
Process
制作で重視した視点
Input
駅検索を起点にし、利用者が何から入力すればよいか迷わない入口を用意。
Compare
一覧だけでなく、平均価格や中央値も同時に見せて、比較判断を早くする構成に整理。
Inspect
一覧で見たい情報と、深掘り時にだけ必要な情報を分けて、画面の密度を制御。
Export
最終的な持ち出しや共有を想定し、画面の外にデータをつなぐ出口として CSV を配置。
ドラフト版として、このアプリ実績を単独で見せる LP を分離配置。
既存のアプリ本体とは切り分けて、 Vercel ではこのフォルダだけを Root Directory に指定すれば単独デプロイできる形にしています。
デモ URL:
https://findlaw-over-composed-effect.trycloudflare.com/