The quote form accepts PDF, DXF, DWG, STEP and IGES alongside spreadsheets and documents, because plenty of enquiries arrive as a spec sheet rather than a drawing. Attachments are capped at three files and 4 MB total, which keeps a submission inside the platform's request body limit instead of failing at the edge with nothing to show the sender.
02 — Manufacturing / Precision machining / 2026
HAKUHO
A corporate website for a precision-machining company, structured to help prospective customers understand capabilities and move directly to a quote request.
2026Shimizu, Shizuoka
- CLIENT
- Hakuho Inc. — 株式会社白萌
- SECTOR
- Manufacturing / Precision machining
- ROLE
- Planning, design, development, SEO, launch
- YEAR
- 2026
01 / PROJECT
WHAT THE
PROJECT IS.
Hakuho manufactures more than 24,000 parts a year for over 200 clients. The site organises its machining capabilities, equipment, quality information and production examples so prospective customers can judge whether their requirements can be handled.
The quote flow accepts drawings and specification files including PDF, DXF, DWG, STEP and IGES, allowing enquiries to arrive with the information needed for an actual manufacturing discussion.
I handled the project end to end: requirements and information architecture, UI/UX, frontend and backend implementation, the quote and email flow, SEO, testing and launch.
02 / HOW IT WORKS
THE DECISIONS
UNDER IT.
FROM THE IMPLEMENTATION
Submission goes through a server action to the mail API, with the sender set as the reply-to address — so the office replies to the notification itself rather than copying an address out of it. The sender gets an automatic confirmation from the site address at the same time.
Japanese has no spaces, so a browser will break a line anywhere. Headings are parsed into phrases and given a break opportunity only between them, paired with keep-all so nothing breaks mid-phrase. The break is a zero-width space rather than a <wbr> element: some crawlers and text extractors turn <wbr> into a regular space, which splits a word in the middle of the extracted text.
Materials, sizes, lot sizes, tolerances, equipment and quality information are laid out as structured data rather than paragraphs, so a prospective customer can check their requirement against it and reach the quote form in one move.
03 / DELIVERED
WHAT WAS
BUILT.
- 01
Information architecture centred on machining capabilities and quote conversion
- 02
Drawing-upload quote form with specification fields and email delivery
- 03
Structured presentation of materials, sizes, lot sizes, tolerances, equipment and quality information
- 04
Responsive UI and motion design
- 05
SEO foundations including canonical URLs and sitemap
- 06
Automated tests for key site functionality
04 / TECHNOLOGY
THE STACK
BEHIND IT.
- Next.js
- React
- TypeScript
- GSAP
- Resend
- Jest

