Self-directed concept build for an invented business. This project was not commissioned, and the company described here does not exist.
NAGIPET
A little blue house on the Kanagawa coast that sells saltwater fish, aquascapes and parakeets and boards small animals out back. The site had to hold all three without looking like three shops.
NAGIPET（なぎぺっと）is the "little blue house", an aquarium and parakeet shop in Aoba, Kanagawa, with a small-animal hotel and grooming room behind it. We built a Japanese-only site with five routes: a home page introducing the three specialisms, a page each for the aquarium, birds, and hotel and care, and a page with shop details, access and the enquiry form. Next.js 15 exports it as static HTML to Cloudflare Pages, and the only server code is a Pages Function that handles the form. The design idea, 「静かなる専門性」 or quiet expertise, comes down to warm paper, deep aquarium blue and two Japanese typefaces.
The
Challenge
Specialist shops like this usually end up with three shops' worth of content on one blog, or a template that puts a coral tank and a rabbit's nail trim in the same product grid. Boarding and grooming, the side of the business that fills the calendar, are booked by phone one animal at a time.
Fit three unrelated specialisms (saltwater and aquascaping, parakeets, boarding and grooming) into one site that doesn't read as three businesses stapled together.
Put Japanese typography first, with two self-hosted families, a palette named in 和色, palt kerning and first-line indents, at a page weight a phone on a train can still open.
Send reservations to the phone, where the shop takes them, while keeping the contact form useful for everything else.
The
Constraints
What the build was answering, and where we stopped on purpose.
- THE BRIEF
- Self-directed, for an invented shop in an invented town. The premise was one address holding three specialisms that share nothing but an owner.
- SCOPE
- Five routes, Japanese only, statically exported, with no CMS. The shop updates its stock on Instagram, so the site links there instead of keeping a page that would go stale between visits.
- CONNECTED ON PURPOSE
- Only the enquiry form has a backend, because it is the only part where a customer needs a reply. Reservations go to the phone because the shop boards one animal at a time, and a booking widget would promise capacity nobody has.
The
Solution
Five statically exported routes on a warm off-white background. Each specialism has its own page and they share a card system, so the shop feels like one place with three rooms. Colour marks the split, with deep 藍 blue for water, 鳶 brown for the birds and the hearth, and 苔 moss used sparingly on aquatic content.
The design idea is quiet expertise, 「静かなる専門性」. Warm 生成り paper (#faf7f2) sits under deep aquarium blue (#0b2236) and earth brown, and every colour token is named after a traditional Japanese colour. Shippori Mincho B1 is the display face and Zen Kaku Gothic Antique the body face, with palt kerning and first-line indents in running copy. Rounded cards and soft navy shadows keep a specialist shop from looking clinical.
Next.js 15 App Router with output: "export", so the site ships as static HTML on Cloudflare Pages with no origin server to fail. The only dynamic part is a Pages Function at /api/contact. It checks the origin, validates with zod, catches bots with a honeypot field and rate-limits by IP, then sends through Resend with Reply-To set to the sender.
Site
Walkthrough
The page shows the shop before it tries to sell anything: a near-full-screen photograph of the blue house, one line about what it is and two buttons, one to enquire and one to call. Below the fold, a trust strip lists the four things customers check first, which are ADA dealer status, animal-handling registration, three parking spaces and opening hours of 11:00-20:00, closed Tuesday and Wednesday.
One card each for the aquarium, the birds, and hotel and care. This is the only place the three appear side by side, so it shows the whole shop at a glance, and each card leads with a photograph that sets the tone before the text does.
The page lists the livestock actually kept in store (saltwater fish, coral, tropical fish, plants and medaka) with a note that stock changes and Instagram has the current list. The ADA dealership gets its own section above that, because for aquascapers it is the reason to make the drive.
Parakeet sales are written as an invitation to ask before buying, without a price list. This week's stock is on Instagram, so the page links there and doesn't go out of date.
Boarding is appointment-only and booked by phone, so the number comes first in the section. Below it are the terms that otherwise come up awkwardly at drop-off: bring your own cage for birds, use the shop's cages for small animals, ¥1,500 and ¥1,200 for loaner cages, and what to pack.
Hours, address, parking, access and the animal-handling registration share one page, with the form at the end. Reservations still go to the phone. The form handles everything else, promises a reply within two to three business days and asks for consent before sending.
The
Results
Accessibility, best practices and SEO score 100 on both presets, and layout shift is zero. Performance is weak. On the throttled mobile profile Lighthouse couldn't produce a score at all, because no LCP was recorded in three runs, and first paint takes seconds. The cause is the build rather than the design. The static export serves every photograph at full desktop resolution, and the two self-hosted Japanese fonts load a render-blocking stylesheet with one rule per unicode-range chunk. The next two changes are pre-sized responsive images and one fewer font weight.
Measured against the live build with Lighthouse 13.0.3, median of three runs per preset.
Final
Reflection
Two decisions shaped this build. The first was not letting the site take bookings. The shop boards one animal at a time by phone, and a booking widget would promise capacity nobody has, so the site's job is to send each question to the right place: the phone for reservations, the form for everything else and Instagram for new arrivals. Every page is arranged around that. The second was spending the page weight on Japanese type. Shippori Mincho and Zen Kaku Gothic are the design, and without them the site is a template with photographs. That choice costs time on a throttled phone, as the numbers above show. We would make it again, but we'd pre-size the images, which is where we actually went wrong.
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.