本文へスキップ
  1. TOP
  2. Webサイト制作実績
  3. ケーススタディ
  4. PDF中心の注文導線を、Webで完結する選択フローへ

PDF中心の注文導線を、Webで完結する選択フローへ

CASE STUDY Web完結型の注文フロー 社名非公開

PDF中心の注文導線を、Webで完結する選択フローへ

専門性の高い製品を扱う二言語サイトで、企業・技術情報の発信と、会員向けの製品選択・注文導線を一体で設計しました。従来はPDFを見ながら進めていた注文を、カテゴリ、製品、カート、利用者情報の順にWeb上で選べる流れへ再構成し、更新やサーバー環境の変更も含めて段階的に公開しました。

クライアント名 某サービス企業
業種
サイトのカテゴリ
サイトの特徴
  • サイトリニューアル
制作範囲
  • 企画構成
  • 制作進行
  • ディレクション
  • デザイン
  • コーディング
  • システム
  • 管理画面
  • 会員管理
課題と制約

製品を理解するための情報量が多く、日本語と英語の両方で専門性を保ちながら、初めて訪れた利用者にも会社とサービスの全体像を伝える必要がありました。注文についてはPDFの資料を参照して必要事項を読み替える運用があり、情報の更新時に複数の資料をそろえる負担と、利用者がどの製品を選んだかを確認しにくい課題がありました。

一方で、すべての商品情報を単純なECサイトの型へ入れると、専門製品に必要な説明や確認事項が不足します。会員ログイン、製品分類、注文内容、利用者情報の関係を整理し、どこまでを画面上で選択させ、どこからを個別確認とするかを決める必要がありました。公開時には既存URLの転送、メンテナンス表示、PHP環境の更新も重なり、コンテンツとシステムを別々に扱えない案件でした。

判断と対応

まず、利用者の行動を「会社・技術を知る」「製品群を絞る」「対象製品を選ぶ」「注文内容を確認する」「利用者情報を送る」に分解しました。PDFをそのまま画面へ移すのではなく、カテゴリから製品、カート、利用者情報へ進む順序を定め、各段階で必要な説明と確認事項を配置しました。会員状態によって利用できる操作も整理し、公開情報とログイン後の機能を混在させない構成です。

日本語と英語はページ単位で対応関係を持たせ、専門用語や製品名が異なる意味にならないよう確認単位をそろえました。公開はコンテンツ、注文フロー、サーバー切替を一度に抱えず、メンテナンス表示と転送設定を含む手順へ分割しました。選択式にできない相談事項は無理に自動化せず、個別確認へ渡す境界を残しています。

デザイン面の工夫

専門製品のサイトでは、情報を減らし過ぎると判断材料が足りず、すべてを同じ強さで見せると重要な条件が埋もれます。そこで、概要、特徴、選択条件、注意事項、次の操作を段階ごとに分け、注文画面でも「今どの製品を選んでいるか」が見失われない構成にしました。

二言語で文章量が変わっても、製品名、数量、確認項目、行動ボタンの位置関係が崩れないよう部品化しています。PDFで慣れていた担当者にも確認しやすい一覧性を残しつつ、利用者には一度に必要な項目だけを示しました。専門家向けの情報密度と、Web操作としての分かりやすさを両立させることを重視しています。

実装と公開後の改善

会員認証、製品分類、カート、利用者情報を別々の責務として整理し、カテゴリから注文までの状態を引き継ぐ構成としました。PDF更新に依存せず、製品情報と注文に必要な項目をWeb側で管理できるため、内容変更時に導線全体を作り直さずに済みます。

公開作業では、旧URLへのアクセスを新サイトへ引き継ぐ転送、切替中のメンテナンス表示、稼働環境の更新を確認項目に含めました。この方法は、選択条件を一定のルールにでき、最後に人の確認を残せる注文・申込業務に向きます。個別見積りや例外条件が大半を占める場合は、カート化を目的にせず、相談時に必要な情報を正確に集めるフォーム設計から検討すべきです。

PRACTICAL KNOWLEDGE このケースに関連する実務知識

この案件で確認した判断を、複数の制作記録と照合し、ほかのWeb制作でも使える確認事項として整理しています。

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

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

紙やPDFで行ってきた申込・注文業務をWeb化するとき、利用者の操作、受付側の確認、例外処理、計算、保存、外部連携までを一続きで設計する方法を整理します。

案内施設で冊子とスマートフォンの情報を見比べる利用者

PDFを残す・HTML化する・両方持つ境界をどう決めるか

既存PDFをWebで公開するとき、HTMLへ出す情報、PDFとして残す資料、両方持つ場合の正本、古いURL、アクセシビリティをどう整理するかまとめます。

その他のケーススタディ
CASE STUDY 事業の世界観が伝わる企業サイト 社名非公開

情報だけの「オンライン上の名刺」から、事業の世界観が伝わるコーポレートサイトへ

新しい会社・事業の立ち上げに伴うコーポレートサイト制作です。企業情報や事業内容などの大枠は見えていた一方、各ページの役割、事業を表す言葉、ブランドの見...

業種
レジャー・エンタメ / サービス
カテゴリ
コーポレートサイト
対応範囲
企画構成 / 制作進行 / ディレクション / デザイン / コーディング / CMS
詳細を見る
CASE STUDY 既存Web基盤への新サイト追加 社名非公開

既存Web基盤へ新サイトを追加。CMS権限・公開・継続運用をどう設計したか

既存の企業サイトとMovable Typeが稼働する環境に、施設サイトと新しい更新担当部門を追加したリニューアルです。ページ制作だけでなく、既存ドメイン・サーバー...

業種
レジャー・エンタメ / サービス
カテゴリ
サービスサイト
対応範囲
企画構成 / 制作進行 / ディレクション / デザイン / コーディング / システム / CMS / 管理画面
詳細を見る
CASE STUDY 運用できる会員サイト設計 社名非公開

会員サイトを「公開できる」から「運用できる」へ。認証・検索・権限・外部データ連携をどう設計したか

業界団体の会員向けポータルをリニューアルした案件です。蓄積されたお知らせ、資料、マニュアル、各種フォームを整理し、会員認証、検索、公開期間、管理画面、...

業種
金融 / 特殊法人
カテゴリ
サービスサイト / システム開発
対応範囲
企画構成 / 制作進行 / ディレクション / デザイン / コーディング / システム / CMS / 管理画面 / 会員管理
詳細を見る
CASE STUDY 日英同時進行の多言語サイト 社名非公開

日本語と英語を同時に進める多言語サイト制作

日本語と英語の二言語サイトを限られた期間で並行制作した案件です。日本語版を基準に共通テンプレートを整えながら、後から届く翻訳原稿、言語ごとの文字量と改...

業種
住宅・不動産 / 金融
カテゴリ
コーポレートサイト
対応範囲
企画構成 / 制作進行 / ディレクション / デザイン / コーディング / CMS
詳細を見る
ケーススタディ 一覧