花王   花王製品カタログサイト

花王株式会社様（以下、花王）の製品カタログサイトをリニューアルしました。本プロジェクトでは、オンライン／オフラインとも変化し続ける消費者の購買行動に長く寄り添えるサイトを目指しました。未来における企業サイトとユーザーの関係性を見据えたユーザー体験、それを実現するサイト構造を設計しました。

※本プロジェクトは伊藤忠テクノソリューションズ株式会社（バックエンド開発/サーバー/インフラ担当。以下、CTC）、アドビ株式会社（AEMテクニカルコンサルティング。以下、Adobe）と協業で行っています。

前回のリニューアルから10年以上が経過した花王の製品カタログサイト。「経年で変化するユーザーの情報取得方法に長く寄り添える耐久力があること」「サイト運用についてすべてのステークホルダーが統一した認識をもてるわかりやすいシステム構築」の2点を要件に、時代の変化に対応し続けられるサイトを目指してプロジェクトを推進しました。

また、既存のプラットフォームから、花王グループ全体で採用している新プラットフォーム（Adobe Experience Manager / 以下、AEM）へ移行する必要もありました。既存のプラットフォームで実現していた複雑なプロセスをAEMでも再現すること、手作業で行われていた運用業務のデジタル化など、今後のビジネス拡張に生かせる基盤の構築にも並行して着手しました。

花王グループ最大規模とも言えるウェブサイトリニューアルとなる本件。10年後の未来でも通用する耐久性のあるウェブサイトにするべく、現代の価値観を踏まえた未来のスタンダードについて考察しながらコンセプト設計を行いました。

最初に行ったワークショップでは「10年後のユーザーはどんな生活をしているか」というテーマを設け、生活やインフラ、医療や社会などさまざまな分野に対して未来への仮説を立てました。産業における各分野がどのような未来を迎えるかを想像して未来のユーザーを想定したペルソナを作り、それらをもとに202X年の暮らしについてカテゴリーごとにマッピングしたコンセプト資料を作成。企業の製品カタログサイトは未来ではどのような位置付けになっているかを明らかにしながら、必要な機能について提案。機能ごとに個別で設計を行いました。

作成したコンセプト資料。IoT、AI、自動化など各分野が10年後ユーザーの生活にどのような変化をもたらしているのかをイラストを交えて分かりやすくまとめました。

これまで製品カタログサイトに掲載される情報（製品名/製品概要/成分/付帯情報/製品画像のカットなど）はすべてサイト運用の担当者が手作業で更新していましたが、今回のリニューアルを機にマスターデータをシステム的に統合して一括登録できるようにすることで、更新作業にかかっていた運用負荷を軽減。製品詳細ページも、製品のマスターデータからウェブサイトを生成するように連携しました。

サイト運用時の情報のやりとりを説明した図。以前は担当者に各種情報が集中し作業も複雑でしたが、今回のリニューアルによってシンプルな運用フローを実現しました。

消費者に対しては適切な情報提供だけでなく、オンライン/オフラインの購買行動も踏まえた情報設計をしています。ユーザー訪問時は、該当製品のほか関連製品も同ページ内で展開し、オンラインで購入できる各ECサイトへの動線や取扱店情報も表示するなど、ユーザーが検索した製品にまつわるさまざまな情報を一度に提供することが可能になりました。特に取扱店情報は、平日9:00-17:00の電話やメールでの対応から、24時間365日いつでもお客様自身で検索できる環境を実現しました。

ビジネスユーザー向け紙カタログの廃止に伴い、その代替えとなる機能も追加。流通向けの製品安全データシートも同ページ内で閲覧できるようになりました。

また、製品に関する情報追加が必要になったときのために編集エリアを設け、製品担当自らがカタログサイトを更新できる機能も追加。情報資産の利活用を促進しながら、新たなデータを蓄積する基盤を構築しています。

本システムは、日本国内だけでなく、アジア8地域のカタログサイトにも同一のガバナンスでリニューアルを実施しています。今後も引き続きD2Cへの新たなチャレンジと、マーケターに向けた機能やデータの提供を行う予定です。

集約された情報資産を多面的に活用できる基盤構築を行い、ユーザー向けサービスと社内業務用の両方でデータを活用し、ユーザー向けの店舗検索機能へ活用しています。

製品ページにある「取扱店を探す」機能。地名・住所・郵便番号などから製品を取り扱う店舗を検索し、Google Maps上にその場所を表示します。