1mm単位のオーダーサイズを、Webで受けられるように。印刷通販サイトの注文フォームで、製造可能な仕様を詳細まで選択できるステップ形式UIに拡張

1.ビジネス要件を理解し、製造できる・できないを定義する

サイズは1mm単位で指定できるため、組み合わせは数えきれないほどあります。そこで、サイズの上限と下限、素材ごとの制約、加工どうしの依存関係といった製造の決まりを条件として整理し、どの組み合わせなら製造できて、どの組み合わせだとできないのかを定義しました。

製造できる組み合わせだけでもかなりのパターンがあります。まずそのすべてを洗い出し、そのうえでNGになるパターンと、注文ではなく個別にご相談いただく条件も決めていきました。

決まりの多くは、先方の担当者の方が経験をもとに判断していたものです。どんな注文を受けたいのかというビジネス要件から理解し直したうえで、細かな打ち合わせを重ね、条件を図にして見ていただきながら、一つずつ確認しました。先方の担当者の方にも時間を割いていただき、一緒に進めています。

2.選択肢が多いので、ステップに分けて選んでもらう

素材、サイズ、加工を一つの画面でまとめて選ぶ形にすると、選択肢が多すぎて、注文の途中で離脱する原因になります。そこで、注文フォームをステップに分け、順に選んでいく形にしました。前のステップで選んだ内容に応じて、次に選べる選択肢が変わるので、専門的な知識がなくても、製造できる仕様にたどり着けます。

• サイズは1mm単位で入力でき、上限と下限をその場で判定して、範囲外ならすぐに知らせる
• 対応できないほど大きなサイズが入力されたときは、リンクを表示して、個別のお問い合わせに案内する
• 選んだ素材やサイズに応じて、次に選べる選択肢だけを表示する
• NGの組み合わせのままでは、注文ボタンを押せないようにする

3.決まりを一か所にまとめ、実装後のテストを重ねる

定義した決まりは、注文フォームの判定（バリデーション）として一か所にまとめて管理しています。製品や加工が増えたときも、その一か所を直せば対応できる形です。

条件の組み合わせが多いため、実装後のテストにも時間をかけました。NGと定義した組み合わせで注文に進めないことと、製造できる組み合わせが問題なく選べることを、先方の担当者の方と確かめながら仕上げています。