02 — 製造 / 精密加工 / 2026

HAKUHO

精密加工メーカーのコーポレートサイト。加工能力を理解してもらい、そのまま見積依頼につなげる導線で構成しました。

2026
静岡県静岡市清水区
クライアント
株式会社白萌
領域
製造 / 精密加工
担当
企画、デザイン、開発、SEO、公開
年
2026
公開中
www.hakuhofactory.com ↗

01 / PROJECT

WHAT THE
PROJECT IS.

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

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

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

02 / HOW IT WORKS

THE DECISIONS
UNDER IT.

実装から

01
図面を受け取る前提のフォーム

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

02
そのまま返信できる形で届く

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

03
日本語は文節で折り返す

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

04
加工能力は文章ではなく構造で持つ

材質、サイズ、ロット、公差、設備、品質情報は文章ではなく構造化したデータとして配置しています。検討中の顧客が自分の要件と照合し、そのまま見積フォームへ進めるようにするためです。

03 / DELIVERED

WHAT WAS
BUILT.

  1. 01

    加工能力と見積転換を軸にした情報設計

  2. 02

    図面アップロードと仕様入力、メール送信に対応した見積フォーム

  3. 03

    材質、サイズ、ロット、公差、設備、品質情報の体系的な掲載

  4. 04

    レスポンシブUIとモーションデザイン

  5. 05

    canonical URLやサイトマップを含むSEO基盤の整備

  6. 06

    主要機能に対する自動テストの整備

04 / TECHNOLOGY

THE STACK
BEHIND IT.

  • Next.js
  • React
  • TypeScript
  • GSAP
  • Resend
  • Jest
次の実績 — 03Goodwill Legal→実績一覧 ↗