棲 SUMI
AI査定からLINE連携まで、すべてのディテールが物件と同じ精度で設計された東京の不動産プラットフォーム。
棲 SUMIは、日本人居住者と外国人駐在員の両方をターゲットにした東京のプレミアム不動産プラットフォーム。AI査定、Googleマップ連携の通勤インテリジェンス、360°バーチャルツアー、LINEメッセージング統合、認証済みエージェントマーケットプレイスを備えたバイリンガルNext.jsアプリケーションを構築した。ダークでエディトリアルなデザイン言語が、物件探しをラグジュアリー体験に変える。
The
Challenge
東京の不動産市場は外国人にとって不透明で、日本人にとってもストレスが多い。既存のプラットフォームは雑然とし、単一言語で、時代遅れのUIパターンで構築されている。高級感を保ちつつ、入居者が本当に必要とする情報の深さを犠牲にしないものを作ることが課題だった。
完全バイリンガル(EN/JA)の物件プラットフォームを構築する — 翻訳されたラベルだけでなく、文化的に適応されたコンテンツとデュアルスクリプトのタイポグラフィを実現。
カスタムマーカー付きGoogleマップ、850以上の駅を跨ぐ通勤インテリジェンス、リアルタイムエリアデータを統合 — すべてモバイルで快適に動作。
隠れた手数料で知られる市場で、透明性を通じて信頼を構築するAI査定システム、費用計算機、エージェントマーケットプレイスを設計。
The
Solution
Next.js 15とReact 19、Tailwind CSSを使い、ダークでエディトリアルグレードのプラットフォームを構築した。インクの背景、ゴールドのアクセント、セリフ体のタイポグラフィ — SUMIを東京で最も洗練された不動産プラットフォームとして位置づけるデザイン言語。すべてのセクションが日英バイリンガルでネイティブに表示される。
ダークインク(#0a0a0a)ベースにウォームゴールド(#b8860b)アクセントが、洗練されたエディトリアルな雰囲気を演出。セリフ体の見出しとモノスペースのデータが視覚的階層を構築。バイリンガルラベルはインラインで表示され、後付け感ゼロ。
Next.js 15 App Router + Turbopackで開発。Google Maps APIにカスタムスタイルマーカーと通勤オーバーレイ。物件データはCloudflare Workersのエッジ関数で配信し、サブセカンドのグローバルパフォーマンスを実現。
サイト
ウォークスルー
バイリンガル検索バー付きフルワイドヒーロー、東京8エリアのクイックタグ、スクロールインジケーター、VRバッジと価格カード付き注目物件グリッド。
クイックフィルターチップ(20万円以下、1LDK、2LDK、VRツアー、ペット可、家具付き)、ソート機能、マップトグル、駅近情報と階数詳細付き横型物件カード。
画像カルーセル、AI査定信頼度バー、費用内訳表、路線バッジ付き駅アクセス、周辺施設情報、LINE連携インラインエージェント問い合わせフォームを備えた物件ページ。
ヒーロー画像、統計バー(平均家賃、人口、ウォークスコア、駅数)、間取り別家賃、ライフスタイル・食事・交通・安全性プロフィール、注目エリア物件を備えた地域詳細ページ。
The
Results
Next.js 15でCloudflare Workersエッジネットワークにデプロイ。静的ページは即時ロード、動的物件ルートはエッジでレンダリング。全Lighthouseカテゴリーでほぼ満点。
Final
Reflection
東京の不動産プラットフォームは2010年代前半で時が止まっていた — 雑然としたインターフェース、単一言語のコンテンツ、費用の不透明さ。SUMIは、物件探しが物件そのものと同じくらい洗練されたものになれることを証明するために作られた。バイリンガルファーストのアプローチは翻訳レイヤーではない — インライン日本語ラベルからデュアルスクリプトのタイポグラフィまで、すべてのコンポーネントに組み込まれている。AI査定と完全な費用内訳が、隠れた手数料で知られる市場で信頼を構築する。通勤インテリジェンス付きGoogleマップが、住所をライフスタイルの判断に変える。Cloudflare Workers上のNext.js 15がグローバルに高速を保ち、LINE連携が9,700万人のユーザーがすでにいる場所でコミュニケーションを実現する。5週間、一つのプラットフォーム、透明性への妥協ゼロ。
こんなサイトを作りたい?
埋もれることを拒むビジネスのために、プレミアムなウェブサイトを制作します。プロジェクトについてお聞かせください。24時間以内にご連絡いたします。