WORKS / 02Manufacturing / 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.精密加工メーカーのコーポレートサイト。加工能力を理解してもらい、そのまま見積依頼につなげる導線で構成しました。

2026
Shimizu, Shizuoka静岡県静岡市清水区
CLIENTクライアント
Hakuho Inc. — 株式会社白萌株式会社白萌
SECTOR領域
Manufacturing / Precision machining製造 / 精密加工
ROLE担当
Planning, design, development, SEO, launch企画、デザイン、開発、SEO、公開
YEAR
2026
LIVE公開中
www.hakuhofactory.com

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.白萌は200社を超える取引先に対し、年間24,000点以上の部品を製造しています。加工能力、設備、品質情報、加工事例を整理し、自社の要件に対応できるかを検討中の顧客が判断できる構成にしました。

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.見積フローはPDF、DXF、DWG、STEP、IGESといった図面・仕様ファイルの添付に対応し、実際の製造検討に必要な情報が揃った状態で問い合わせが届くようにしています。

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.要件整理と情報設計、UI/UX、フロントエンド・バックエンド実装、見積とメール送信のフロー、SEO、テスト、公開まで一貫して担当しました。

02 / HOW IT WORKS

THE DECISIONS
UNDER IT.

FROM THE IMPLEMENTATION実装から

01
The form is built to receive drawings図面を受け取る前提のフォーム

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.見積フォームはPDF、DXF、DWG、STEP、IGESに加え、表計算や文書も受け付けます。図面ではなく仕様書で届く相談が少なくないためです。添付は3点・合計4MBまでに制限しています。プラットフォームのリクエストボディ上限の内側に収め、送信者に何も返せないまま失敗することを避けるためです。

02
The enquiry arrives ready to answerそのまま返信できる形で届く

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.送信はサーバーアクション経由でメールAPIへ渡し、返信先に送信者のアドレスを入れています。事務所は届いた通知にそのまま返信でき、本文からアドレスを拾い直す必要がありません。送信者にも同時にサイトのアドレスから自動確認が届きます。

03
Japanese wraps at phrase boundaries日本語は文節で折り返す

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.日本語には語間の空白がないため、ブラウザは任意の位置で改行します。見出しは文節に解析し、文節の切れ目にだけ改行可能点を置き、keep-allと併用して文節の途中では折り返さないようにしています。改行点に<wbr>要素ではなくゼロ幅スペースを使うのは、一部のクローラーやテキスト抽出が<wbr>を半角スペースに変換し、抽出後のテキストで語が途中から分断されてしまうためです。

04
Capability information is structured, not prose加工能力は文章ではなく構造で持つ

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.

  1. 01

    Information architecture centred on machining capabilities and quote conversion加工能力と見積転換を軸にした情報設計

  2. 02

    Drawing-upload quote form with specification fields and email delivery図面アップロードと仕様入力、メール送信に対応した見積フォーム

  3. 03

    Structured presentation of materials, sizes, lot sizes, tolerances, equipment and quality information材質、サイズ、ロット、公差、設備、品質情報の体系的な掲載

  4. 04

    Responsive UI and motion designレスポンシブUIとモーションデザイン

  5. 05

    SEO foundations including canonical URLs and sitemapcanonical URLやサイトマップを含むSEO基盤の整備

  6. 06

    Automated tests for key site functionality主要機能に対する自動テストの整備

04 / TECHNOLOGY

THE STACK
BEHIND IT.

Next.jsReactTypeScriptGSAPResendJest
NEXT次の実績03Goodwill LegalALL WORKS実績一覧