/// SYSTEM INITIALIZED: v4.2.1 /// KITSUNEWEB STUDIO /// ARCHITECTURE FOR THE BOLD /// OPEN FOR COMMISSIONS /// SYSTEM INITIALIZED: v4.2.1 /// KITSUNEWEB STUDIO
CASE_STUDY_PROTOCOL
PROPTECH 2026 SUMI_FUDOSAN

棲 SUMI

A Tokyo real estate platform where every detail — from AI valuations to LINE integration — is designed with the same precision as the properties it showcases.

棲 SUMI
// OVERVIEW
ROLE
Design & Development
TIMELINE
5 weeks
PLATFORM
Web (Cloudflare Workers)
TECH_STACK
Next.jsReactTailwindGoogle MapsCloudflare Workers

棲 SUMI is a premium Tokyo real estate platform targeting both Japanese residents and expatriates seeking refined accommodations. We built a bilingual Next.js application with AI-powered property valuations, interactive Google Maps with commute intelligence, 360° virtual tours, LINE messaging integration, and a verified agent marketplace — all wrapped in a dark, editorial design language that treats apartment hunting like a luxury experience.

// PROBLEM_ANALYSIS

The
Challenge

challenge_brief.md

Tokyo's real estate market is notoriously opaque for foreigners and frustrating even for locals. The existing platforms are cluttered, monolingual, and built on outdated UI patterns. The challenge was building something that felt premium without sacrificing the depth of information renters actually need.

01

Build a fully bilingual (EN/JA) property platform with natural language throughout — not just translated labels, but culturally adapted content and dual-script typography.

02

Integrate Google Maps with custom markers, commute intelligence across 850+ stations, and real-time area data — all performant on mobile.

03

Design an AI valuation system, cost calculator, and agent marketplace that builds trust through transparency in a market known for hidden fees.

// IMPLEMENTATION

The
Solution

We built a dark, editorial-grade platform using Next.js 15 with React 19 and Tailwind CSS. The design language — ink backgrounds, gold accents, serif typography — positions SUMI as Tokyo's most refined property platform. Every section is natively bilingual with Japanese and English presented side by side.

DESIGN APPROACH

A dark ink base (#0a0a0a) with warm gold (#b8860b) accents creates a sophisticated, editorial atmosphere. Serif headings paired with monospace data create visual hierarchy. Bilingual labels appear inline, never as an afterthought.

ARCHITECTURE

Next.js 15 App Router with Turbopack for development. Google Maps API with custom styled markers and commute overlays. Property data served via edge functions on Cloudflare Workers for sub-second global performance.

KEY FEATURES
AI-powered property valuations with ±3.2% median accuracy vs. transaction price
Interactive Google Maps with area pins, price markers, and commute intelligence across 850+ stations
360° virtual tours on every listing with 4.7× higher response rate
Full cost transparency calculator — rent, shikikin, reikin, guarantor, insurance, and move-in totals
Verified agent profiles with public reviews, response time badges, and LINE-first communication
// SITE_WALKTHROUGH

Site
Walkthrough

00
HOMEPAGE

Full-width hero with bilingual search bar, quick area tags for 8 Tokyo neighbourhoods, scroll indicator, and a curated property grid below the fold featuring featured listings with VR badges and price cards.

01
PROPERTY SEARCH

Filtered listing view with quick-filter chips (Under ¥200K, 1LDK, 2LDK, VR Tour, Pet OK, Furnished), sort controls, map toggle, and horizontal property cards with station proximity and floor details.

02
PROPERTY DETAIL

Full property page with image carousel, AI valuation confidence bar, cost breakdown table, station access with train line badges, neighbourhood amenities, and inline agent inquiry form with LINE integration.

03
AREA GUIDE

Neighbourhood deep-dive with hero image, stats bar (avg rent, population, walk score, stations), rent-by-layout breakdown, lifestyle/dining/transport/safety profiles, and featured area listings.

// PERFORMANCE_METRICS

The
Results

Deployed to Cloudflare Workers edge network with Next.js 15. Static pages load instantly, dynamic property routes render at the edge. The site scores near-perfect across all Lighthouse categories.

PERFORMANCE
96
Lighthouse Performance
SPEED
0.5s
First Contentful Paint
SEO
100
Lighthouse SEO
MOBILE
100%
Responsive Coverage
// CLOSING_THOUGHTS

Final
Reflection

reflection.md

Tokyo real estate platforms have been stuck in the early 2010s — cluttered interfaces, monolingual content, and zero transparency on costs. SUMI was built to prove that property search can feel as refined as the apartments themselves. The bilingual-first approach isn't a translation layer — it's baked into every component, from inline Japanese labels to dual-script typography. AI valuations and full cost breakdowns build trust in a market known for hidden fees. Google Maps with commute intelligence turns location from an address into a lifestyle decision. Next.js 15 on Cloudflare Workers keeps everything fast globally, and LINE integration meets users where 97 million of them already are. Five weeks, one platform, zero compromise on transparency.

Want a site like this?

We build premium websites for businesses that refuse to blend in. Let us know about your project and we will get back to you within 24 hours.

// READY_TO_DEPLOY? HELLO@
KITSUNE
WEB.STUDIO

OPERATIONS

STATUS

Remote Team Serving Clients Worldwide

CONTACT

Email Only

LOCAL TIME --:-- JST
© 2026 KITSUNEWEB STUDIO. ALL RIGHTS RESERVED.