本文へスキップ
  1. TOP
  2. Web制作
  3. 実務知識
  4. 紙・PDFで続けてきた申込・注文業務を、どうWebへ移すか

03 / BUILD

つくるフェーズの実務知識

紙・PDFで続けてきた申込・注文業務を、どうWebへ移すか

画面を作る前に、選択・確認・例外・担当者の処理を業務フローへ戻す

受付窓口で申込書と処理の流れを確認する担当者と利用者

PRACTICAL KNOWLEDGE 実務知識

WRITTEN BY

FHW制作チーム

反省会と日々の制作記録をもとに、担当スタッフが実際に迷い、確認し、判断した過程を整理しています。

紙の申込書をWebフォームにする。PDFの商品一覧を画面にする。言葉にすると簡単ですが、実際に着手すると「この選択は誰が確認するのか」「該当しない場合はどこへ戻すのか」「受付後は何へ転記するのか」が次々に出てきます。

私たちの制作でも、紙の注文手順をカテゴリ選択から受付まで組み直した案件や、検索から申込、社内システムへの連携まで整理した案件がありました。画面をきれいに並べただけでは、これまで担当者が会話や手作業で補っていた判断が抜け落ちます。

ここでは、紙やPDFをそのまま画面へ写すのではなく、利用者の行動と受付側の仕事を一つのWeb業務へ変換する方法を整理します。

帳票ではなく、実際の一日を聞く

最初に見るのは用紙の項目ですが、仕様を決める材料は用紙だけでは足りません。担当者が受け取ってから何を確認し、どこへ転記し、不足があれば誰へ連絡するかまで聞きます。

  • 利用者は何を見て申込・注文を始めるか
  • 選択肢や数量を決めるために、別の資料を参照していないか
  • 受付後に人が計算、照合、承認している項目は何か
  • 電話やメールで補っている例外は何か
  • 完了後に、台帳、基幹システム、配送担当などへ何を渡すか

紙では一枚に見えていても、実務では複数の役割と判断がつながっています。そのつながりを先に出すと、画面に必要な入力と、画面外に残す仕事を分けられます。

項目より先に、状態と次の行動を並べる

Web化で先に作りたくなるのは入力項目の一覧です。しかし、項目だけでは「途中」「確認待ち」「差し戻し」「受付済み」を表せません。利用者と担当者の双方について、状態と次の行動を並べます。

  1. 利用者が対象や条件を選ぶ
  2. 必要な情報と注意事項を確認する
  3. 入力内容を送信する
  4. 受付側が不足・重複・対象外を確認する
  5. 受理、差し戻し、追加確認へ分ける
  6. 後続の担当・システムへ渡す

この順番が見えると、確認画面や自動返信が必要な理由も、管理画面に必要なステータスも説明できます。

正常に進まない場面を、後回しにしない

紙の運用では、欄外のメモや担当者の判断が例外を吸収しています。Webでは、選択肢にない、在庫や条件が変わった、同じ人が二度送った、途中で戻った、といった場面を仕様にしなければ止まります。

  • 選択できない条件を、いつ・どの言葉で伝えるか
  • 途中保存や再開が必要か
  • 重複送信をどう見分けるか
  • 自動で確定せず、人が確認する境界はどこか
  • 処理に失敗したとき、利用者と担当者へ何を知らせるか

例外を全部自動化する必要はありません。人が判断するなら、その人に必要な情報と戻し方を用意することが仕様になります。

計算・検索・外部連携を、画面の裏側として分ける

条件検索、料金計算、シミュレーター、顧客管理への登録などが入ると、見た目は一つでも処理は複数になります。入力値、計算結果、外部へ送る値、保存する値を分け、どこが正しい状態を持つか決めます。

外部会社がフォームや計算処理を担当する場合は、画面の幅、項目名、エラー表示、受け渡すデータ、最終確認者まで揃えます。「組み込めば完成」ではなく、組み込んだ後の一連の操作が完了条件です。

受付後の仕事まで通して、初めて完成とする

利用者に完了画面が出ても、通知が届かない、台帳に保存されない、担当部署へ振り分けられないなら業務は終わっていません。受付番号、通知、保存データ、担当者の確認画面、外部連携を一続きで試します。

最初から全パターンを作るより、代表的な一つの申込を、開始から担当者の処理完了まで通す方が早く不足を見つけられます。その後、対象外、重複、取消、情報不足などの境界へ広げます。

Web化の前に確認すること

  • 用紙やPDFだけでなく、受付後の実務を確認したか
  • 利用者と担当者の状態、次の行動を並べたか
  • 電話やメモで補っている例外を拾ったか
  • 自動処理と人が判断する範囲を分けたか
  • 計算結果、保存データ、外部へ送る値の正本を決めたか
  • 外部会社との画面・処理・確認の境界を決めたか
  • 代表的な一件を、受付後まで通して確認したか
  • 紙の運用を残す場合、Webとの二重管理をどう防ぐか決めたか

PRACTICAL KNOWLEDGE 同じフェーズの実務知識

私たちが別の制作で得た判断や確認方法を、同じ制作フェーズからご覧いただけます。

複数社でWeb制作の引き継ぎ内容を確認する作業デスク

自社で公開できないWeb制作で、入稿・納品・確認の責任範囲をどう決めるか

外部CMSや別会社の環境へ入稿・納品する制作で、利用できる技術、確認段階、修正の戻し先、完了条件をどう決めるか整理します。

支給デザインを共通ルールと例外へ分けて確認する制作チーム

支給デザインを、共通ルール・例外・動作仕様へどう変換するか

Figma、画像、印刷物、参考サイトなどの支給物から、共通部品、例外、可変条件、レスポンシブ、動作仕様を整理し、複数人で再現できる実装ルールへ変換する方法をご紹介します。

急増したAPI利用料金の請求明細とグラフを確認する制作チーム

55万円請求を生んだ、公開ページと従量課金APIを直結する落とし穴

公開ページへの機械的な大量アクセスが従量課金APIの大量実行へ増幅され、約55万円の請求に至った経験から、外部APIの費用上限、クォータ、キャッシュ、監視の設計を整理します。

公開日時と素材の進行状況を確認するWeb制作の作業デスク

公開日を動かせないWeb制作で、未確定素材・版管理・日時公開をどう管理するか

公開日時が固定された制作で、後から届く素材、複数の版、日時指定公開、公開直前の変更を安全に管理する方法をご紹介します。

Web制作中に増えた要望と工程への影響を整理する制作チーム

その追加要望、今入れますか? Web制作中の変更をどう判断するか

Web制作中に増えた要望を、目的、合意範囲、影響する工程、費用、日程、公開時期から確認し、修正・追加対応・公開後対応へ整理する方法をご紹介します。

短納期の制作で公開条件と後工程をカードに分ける制作チーム

短納期のWeb制作で、削ってよい工程・削ってはいけない確認は何か

短い制作期間で、共通ルール、未確定素材、確認範囲、公開後へ送る改善を整理し、速さのために品質判断まで省略しない進め方をまとめます。

公共空間でスマートフォン、タブレット、ノートPCを使う人々

対応端末・ブラウザは、利用場面からどう決めるか

Web制作の対応端末とブラウザを、利用者、場所、主な操作、重要度から優先・代表・簡易確認へ分け、境界の内容と再現情報を確認する方法を整理します。

Webフォームの入力から通知までを検証する作業デスク

フォームの送信確認で、通知・自動返信・保存データ・担当振り分けまでどう検証するか

Webフォームについて、入力・確認・送信だけでなく、管理者通知、自動返信、保存データ、担当振り分け、本番環境でのメール到達までを一続きで検証する方法を整理します。

CSVの一括更新結果と既存データへの影響を確認する資料

CSVで一括登録・更新するとき、既存データをどう守るか

CSVの一括登録・更新で、識別キー、空欄、部分失敗、事前確認、再実行、復旧を安全に扱う確認方法を整理します。

更新担当者と制作会社がページテンプレートの編集範囲を確認する作業台

お客さまもHTML・CSSを更新するサイトで、編集範囲をどう設計するか

お客さまがHTML・CSSを直接更新するWebサイトで、編集できる範囲、共通部品、CSSの影響範囲、変更履歴、制作会社へ相談する条件をどう決めるか整理します。

会員の登録状態と役割ごとの権限、外部連携を整理した立体模型

会員サイトで、登録状態・役割・権限・外部連携をどう設計するか

会員サイトの登録途中を含む状態、役割ごとの操作権限、外部サービスとの状態差、機能を段階公開する場合の判断方法を整理します。

少量のサンプルから本番規模の多様なコンテンツへ広げて検証する模型

少量のサンプルで動くWebサイトを、本番規模でも崩さないために何を試すか

数件のきれいなデータだけでは見つからない、最大件数、長文、画像量、空欄、ページ送り、一括処理の問題を公開前に確かめる方法を整理します。

原稿から複数言語のページと公開状態へ展開する編集工程

多言語サイトで、翻訳原稿・共通部品・段階公開をどう同期するか

多言語サイト制作で、ページと言語の対応、翻訳原稿の状態、共通部品の文字量差、言語ごとの段階公開を安全に管理する方法を整理します。

共通基盤でつながりながら役割を分けた複数サイトの建築模型

複数サイト・複数部署で、共通部分と運用範囲をどう分けるか

複数サイトや複数部署で運用するとき、共通化する見た目・情報・仕組み、権限、公開日、正となる情報源をどう分けるかを整理します。

光と布の動きが段階的に変化する展示空間

動きのあるデザインを、雰囲気ではなく実装仕様へどう変えるか

参考サイトやデザインの動きを、開始条件、時間、順番、終了状態、読み込み、端末ごとの代替表現へ分解し、安全に実装する方法を整理します。