Self-directed concept build for an invented business. This project was not commissioned, and the company described here does not exist.
棲 SUMI
A bilingual Tokyo real estate platform with AI valuations, a full cost breakdown and LINE contact, designed to feel as considered as the apartments it lists.
棲 SUMI is a Tokyo real estate platform for Japanese residents and expatriates looking for well-kept apartments. We built a bilingual Next.js application with AI property valuations, Google Maps with commute information, 360° virtual tours, LINE messaging and a directory of verified agents. The dark, editorial design is meant to make apartment hunting feel high end.
The
Challenge
Tokyo's rental market is hard for foreigners to read and frustrating for locals too. Existing platforms tend to be cluttered, monolingual and dated. The task was a site that felt high end without cutting the detail renters actually need.
Build a fully bilingual (EN/JA) property platform where both languages read naturally, with adapted content and typography that handles both scripts.
Integrate Google Maps with custom markers, commute information for 850+ stations and area data, and keep it fast on mobile.
Design an AI valuation panel, a cost calculator and an agent directory that earn trust by being open about costs in a market known for hidden fees.
The
Constraints
What the build was answering, and where we stopped on purpose.
- THE BRIEF
- Self-directed, for an invented agency. We wanted to see whether Tokyo property search could be open about costs and still feel high end, since most platforms manage only one of the two.
- SCOPE
- Six route groups over fixture data, compiled into a static export. Listings, areas and agents are typed arrays, so the site shows the interface a property portal needs without claiming to hold live inventory.
- NOT CONNECTED
- The AI valuation is a designed panel over sample comparable transactions, with no model behind it. The contact form doesn't submit anywhere, and LINE is a plain link. The cost transparency in the interface is real, but the systems behind it aren't built.
The
Solution
We built a dark, editorial platform with Next.js 15, React 19 and Tailwind CSS. Ink backgrounds, gold accents and serif type back up the site's own tagline, "Tokyo's most refined property platform". Every section shows Japanese and English side by side.
An ink-black base (#0a0a0a) with warm gold accents (#b8860b). Serif headings and monospace data set the hierarchy, and Japanese labels sit inline next to the English ones.
Next.js 15 App Router, exported as static HTML and served from Cloudflare Pages. Property, area and agent data are fixtures compiled into the build, so search, the AI valuation panel and the cost calculator all resolve in the browser with nothing to wait for.
Site
Walkthrough
The search field accepts a sentence in either language, such as "2LDK near Shibuya under ¥150,000", because that is how people describe what they want before a form splits it into fields. Eight area chips underneath cover anyone who would rather tap.
The main filters sit as chips in a single row, and the rest fold behind a More Filters button. Each card leads with the walk to the nearest station, because in Tokyo that number drives the price.
The valuation and the full cost breakdown come before the agent's details. Shikikin, reikin, the guarantor fee and insurance are what decide a lease, and keeping them behind an enquiry is the habit this build set out to break.
Area pages mean a listing doesn't have to sell its neighbourhood. They start with rent by layout and then cover transport, dining and safety, the questions people ask before a viewing.
The
Results
The site is a static export on Cloudflare Pages with no edge functions behind it. Search, the valuation figures and the cost calculator all run in the browser against fixture data, and without a server round trip to wait for, the mobile scores hold up well.
Measured against the live build with Lighthouse 13.0.3, median of three runs per preset.
Final
Reflection
Tokyo real estate platforms still tend to have cluttered interfaces, single-language content and little clarity on costs. SUMI was our attempt to make property search feel as considered as the apartments. Bilingual support runs deeper than a translation layer, with inline Japanese labels and type set for both scripts in every component. AI valuations and a full cost breakdown help build trust in a market known for hidden fees, and commute times on the map turn an address into a decision about daily life. The site is a static build on Cloudflare Pages, and contact runs through LINE, which 97 million people already use.
Want a site like this?
We design and build websites for small businesses in English and Japanese. Tell us about your project and we'll reply within 24 hours.