架空の企業を想定した自主制作のコンセプトサイトです。受注案件ではなく、ここで紹介している企業は実在しません。
棲 SUMI
AI査定、費用の完全な内訳、LINEでの問い合わせを備えた東京のバイリンガル不動産プラットフォーム。掲載する部屋と同じくらい丁寧に作った。
棲 SUMIは、質の良い部屋を探す日本人居住者と外国人駐在員のための東京の不動産プラットフォームだ。AI査定、通勤情報付きのGoogleマップ、360°バーチャルツアー、LINEでのやり取り、認証済みエージェントの一覧を備えたバイリンガルのNext.jsアプリケーションを構築した。ダークでエディトリアルなデザインで、部屋探しを上質なものに感じさせる。
直面した
課題
東京の賃貸市場は、外国人には読み解きにくく、日本人にとってもストレスが多い。既存のプラットフォームは雑然として単一言語で、作りも古い。求められたのは、借り手が本当に必要とする情報の深さを削らずに、上質さを感じさせるサイトだった。
日英両方の言語が自然に読め、内容も両言語に合わせて調整し、両方の文字を扱える組版を持つ、完全バイリンガルの物件プラットフォームを作る。
カスタムマーカー、850以上の駅の通勤情報、エリアデータを持つGoogleマップを組み込み、モバイルでも速さを保つ。
隠れた費用で知られる市場で、費用を明かすことで信頼を得るAI査定パネル、費用計算、エージェント一覧を設計する。
前提と
制約
このビルドが答えようとしたことと、意図的に止めた場所。
- ブリーフ
- 架空の不動産会社のための自主制作。東京の物件探しが、費用を明かしながら上質さも保てるかを試したかった。多くのプラットフォームは、どちらか一方しかできていない。
- スコープ
- サンプルデータの上に6つのルート群を置き、静的書き出しにまとめた。物件、エリア、エージェントは型付き配列なので、実際の在庫を持っているように装わずに、不動産ポータルに必要な画面を示せる。
- 未接続
- AI査定は類似取引のサンプルの上に作った画面で、背後にモデルはない。問い合わせフォームはどこにも送信せず、LINEはただのリンクだ。画面上の費用の透明性は本物だが、それを支える仕組みはまだ作っていない。
導いた
解決策
Next.js 15、React 19、Tailwind CSSで、ダークでエディトリアルなプラットフォームを構築した。インクの背景、ゴールドのアクセント、セリフ体が、サイト自身のキャッチコピー「東京で最も洗練された不動産」を支えている。すべてのセクションで日本語と英語を並べて見せる。
インクのような黒（#0a0a0a）に、温かいゴールド（#b8860b）のアクセント。セリフの見出しと等幅のデータで情報の階層をつくり、日本語のラベルは英語の横にインラインで置く。
Next.js 15 App Routerを静的HTMLに書き出し、Cloudflare Pagesから配信。物件・エリア・エージェントのデータはビルドに焼き込まれたフィクスチャで、検索もAI査定パネルも費用計算もブラウザ内で完結し、待ち時間が発生しない。
サイト
ウォークスルー
検索欄は、どちらの言語でも「渋谷近くの2LDK、15万円以下」のような文章を受け付ける。フォームに項目を分けさせられる前に、人はそうやって希望を口にするからだ。下には、タップで選びたい人のためにエリアのタグを8つ置いた。
主なフィルターは一列のチップにまとめ、残りは「More Filters」の奥にしまった。カードの先頭は最寄り駅からの徒歩分数だ。東京では、その数字が家賃を左右するからだ。
査定額と費用の内訳は、エージェントの情報より先に置いた。契約を決めるのは敷金、礼金、保証料、保険なのに、問い合わせるまで隠しておく慣習がある。このビルドは、それを壊そうとした。
エリアページがあれば、個々の物件が街の良さを語る必要はない。まず間取り別の家賃を示し、次に交通、食事、治安と、内見の前に人が尋ねることに答えていく。
得られた
成果
サイトはCloudflare Pages上の静的書き出しで、エッジ関数は動いていない。検索、査定額、費用計算はすべてブラウザ内でサンプルデータに対して動き、サーバーとの往復を待つ必要がないので、モバイルのスコアもよく保たれている。
、公開中のサイトを Lighthouse 13.0.3（各プリセット3回計測の中央値）で実測した値です。
最後の
振り返り
東京の不動産プラットフォームには、いまだに雑然とした画面、単一言語の内容、不透明な費用が多い。SUMIは、物件探しを部屋そのものと同じくらい丁寧に感じさせる試みだった。バイリンガル対応は翻訳の層にとどまらず、すべてのコンポーネントに日本語のインラインラベルと両方の文字に合わせた組版がある。AI査定と費用の完全な内訳は、隠れた費用で知られる市場で信頼を築く助けになり、地図上の通勤時間は住所を暮らしの判断に変える。サイトはCloudflare Pages上の静的ビルドで、問い合わせは9,700万人がすでに使っているLINEを通る。
こんなサイトを作りたい？
中小企業のためのウェブサイトを、日本語と英語で設計・制作しています。プロジェクトについてお聞かせください。24時間以内にご返信します。