プロジェクト概要

専門性の高い製品情報を扱うBtoB製品サイトの構築プロジェクトにおいて、Business Architects（ビジネス・アーキテクツ、以下BA）は、UI/UX設計・情報設計を中心とした上流工程を支援しました。

対象となる製品サイトでは、数多くの製品情報に加え、各種技術資料など、専門性の高い情報を扱っています。サイトを利用するユーザーも、製品を選定・検討する人、製品や技術情報を幅広く調査する人などさまざまで、目的や情報ニーズは一様ではありません。

本プロジェクトでは、CMSのリプレイスを契機に、単に既存サイトのデザインを刷新するだけでなく、ユーザーが必要な製品・技術情報を探しやすく、公開後の継続的な運用や将来的な展開にも対応できるWebプラットフォームを目指しました。

BAは、ターゲットユーザーの整理から情報設計、UI設計、主要ページのワイヤーフレーム、テンプレート・コンポーネントの検討までを担当。Adobe Experience Manager（以下、AEM）による実装を見据えながら、ユーザーにとっての使いやすさと、運用・拡張のしやすさを両立する設計を進めました。

プロジェクトの背景・課題

BtoBの製品サイトでは、取り扱う製品が増えるほど、サイト内の情報構造が複雑になりやすくなります。今回の対象サイトも、製品カテゴリ、シリーズ、個別製品、技術情報、サポート情報など、多様な情報を扱っていました。そのため、ユーザーが目的の製品や必要な資料を探す際に、どの情報から確認すればよいのか分かりにくく、目的の情報へ効率的にたどり着ける体験の設計が重要な課題となっていました。

特に考慮する必要があったのは、サイトを利用するユーザーによって、製品の探し方や必要とする情報が異なることです。求める条件に合う製品を探し、製品仕様や技術情報を効率的に確認したいユーザーがいる一方で、新製品や関連技術を含め、より広い視点で情報を収集・比較するユーザーもいます。

また、本プロジェクトはCMSのリプレイスを契機としており、新しいプラットフォーム上で、継続的に情報を更新・展開していくことも前提となっていました。そのため、既存画面の見た目を整えるだけでは十分ではありません。

誰が、どのような目的でサイトを利用し、どの情報を、どのような流れで取得するのか。さらに、それらの情報をCMS上でどのように管理し、運用していくのか。ユーザー体験と実装・運用の両面から、サイト全体を設計する必要がありました。

ご提案・実施内容

前述の課題を踏まえ、BAでは、製品情報を探しやすいサイト構造と、公開後も継続的に更新・拡張しやすい運用基盤の両立を目指しました。

そのために、まずは製品サイトを利用するユーザーの目的や情報探索の方法を整理し、その内容をもとに情報設計、UI設計、主要ページのワイヤーフレーム作成へと段階的に進めました。また、CMSリプレイス後の運用も見据え、AEM上でのページ制作やコンテンツ更新を考慮しながら、テンプレートやコンポーネントの設計方針も検討しています。

ユーザー理解｜利用者によって異なる製品の探し方を整理

はじめに、製品サイトを利用する主要なユーザーを整理しました。クライアントから提供された情報やヒアリング内容をもとに、利用者ごとの業務、情報収集の方法、必要とする情報を整理し、主要なターゲットについてはペルソナを作成しました。

製品の条件や仕様をもとに目的の情報を効率的に探したいユーザーがいる一方で、新製品や関連技術を含めて幅広く情報を収集するユーザーもいます。こうした利用目的や情報探索の違いを整理し、サイトに必要な情報や導線を具体化していきました。

競合調査・クリエイティブブリーフ｜プロジェクトの判断基準をつくる

次に、同業他社の製品サイトを対象に競合調査を実施しました。調査結果やターゲットユーザーの整理をもとに、サイトがユーザーへ提供すべき価値と、目指す体験を言語化し、その考え方をクリエイティブブリーフとして整理しました。

クリエイティブブリーフは、単にデザインの方向性を決めるための資料ではありません。情報設計やUI設計、デザインを検討する際に、関係者が共通して立ち戻れる判断基準として機能するようにしました。

情報設計・UI設計｜検索、絞り込み、比較を一連の体験として設計

製品サイトにおける重要な体験の一つが、ユーザーが目的の製品を探すプロセスです。今回のプロジェクトでは、フリーワード検索だけでなく、製品の分類や利用目的など、複数の切り口から情報を探すことができる構造を検討しました。

どの入口から検索を始めた場合でも、検索結果を起点に条件を絞り込み、候補となる製品を確認できるよう、製品探索全体の流れを再整理しています。また、また、比較機能についても、どの製品を比較対象とするのか、どの段階で利用できるようにするのかを検討しました。

さらに、サイト内には情報の粒度や役割が異なる複数のページが存在します。各ページでユーザーに何を理解してもらい、次にどの情報へ進んでもらうのかを整理し、ページ単位ではなくサイト全体の情報探索の流れを設計しました。

AEMを見据えた設計｜UIと実装・運用を分断しない

今回のプロジェクトでは、CMSとしてAEMを利用することが決まっていました。そのため、UI/UXを設計する際も、完成した画面だけを考えるのではなく、そのページがAEM上でどのように作成され、継続的に更新されるのかを考慮しています。

例えば、各ページに掲載する情報を整理し、それぞれの情報がどのページで、どのような役割を持つのかを定義しています。あわせて、サイト全体で共通して利用する情報やレイアウトを整理し、テンプレートやコンポーネントとしてどのように扱うかも検討しています。

製品情報や資料、画像、関連情報などを再利用しやすい構造にすることで、サイト全体の一貫性を保ちながら、運用担当者が継続的にコンテンツを更新できる状態を目指しました。
UI/UX設計とCMSの実装を別々の工程として考えるのではなく、実装や運用の特性を理解した上で上流工程から設計することが、大規模なWebサイトでは重要です。

プロジェクト期間

本プロジェクトでは、要件定義フェーズから情報設計・UI設計までを約半年かけて進めました。整理した内容は、後続の設計・開発フェーズへ引き継ぎ、具体的な実装検討につなげています。

成果

本プロジェクトでは、AEMでの実装・運用を見据えながら、ターゲットユーザーの整理から、サイト構造、製品検索の体験、主要ページのUI、テンプレート・コンポーネントの考え方までを整理しました。

特に、製品情報が多く、利用者によって情報の探し方が異なる製品サイトにおいて、「誰に、どの情報を、どのような流れで届けるのか」を上流工程で具体化できたことは、大きな成果の一つです。

また、「使いやすさ」だけではなく、AEMによる実装やサイト公開後の運用までを見据えて設計することで、UI/UXとシステムの間にある論点を早い段階で整理しました。これにより、後続の設計・開発フェーズでも、サイトが目指す体験や各ページの役割を関係者間で共有しながら、具体的な実装検討へ進めるための基盤を整えることができました。

CMSの導入やリプレイスでは、システムの選定だけでなく、その上でどのようなユーザー体験を提供し、公開後にどう運用していくのかを早い段階から整理することが重要です。BAでは、Webサイトの構築・実装までを一貫して支援するだけでなく、今回のように、要件定義や情報設計、UI/UX設計などの上流工程からプロジェクトに参画することも可能です。

プロジェクトメンバー

• プロジェクトマネージャー
• UI/UXデザイナー
• テクニカルディレクター