花王   花王製品カタログサイト 登録業務UI改善

花王株式会社様（以下、花王）の製品カタログサイトのリニューアルを契機に、作業と判断において部署間を横断していた業務フローのUI改善をしました。多くのステークホルダーが関わり運営しているカタログサイトの膨大なデータをシステム的に集約し、人手を介してアナログに行われていた業務のDXを実現しました。

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

製品のマスターデータからコンテンツを自動連携してページ生成するためのシステム開発を行う中で、製品登録業務に関して個人の判断を必要とするフローがありました。その判断は主にコンテンツオーナーが行います。運用フローをスムーズにするために、ウェブサイト制作の知見をもたない担当者でも操作可能なUIでコンテンツ編集できる仕組みが必要になりました。

従来の業務フローを踏まえ、新製品とリニューアル製品が発売された際の登録更新業務など、製品カタログサイトの運用シナリオをひと通り洗い出しました。その後、一連の業務フローにまつわる画面遷移について、それぞれの運用シナリオでシステムが耐えうるかを検討。ECサイトの購入フローのように、ウェブサイト運用の知見がない制作担当者でも、初見で画面の指示に沿って作業を進めるだけで登録完了できるようなフローを設計しました。

作成したフロー図。

登録画面は入力フォームの位置や並びを製品カタログサイトの表示画面と同様に設計しているため、直感的に操作することが可能です。

製品カタログサイトの表示画面

製品情報登録システムの画面

登録業務で不明な点があったときのためのFAQサイトも制作

本プロジェクトは、協業したCTC、Adobe、コンセントの3社間でディスカッションを重ね、既存のシステム機構（環境、ユーザーアカウントなど）を活用し、スクラッチ開発で最小限のコストに収まる方法を検討し、実施しました。

従来の業務フローと画面遷移を見直し、担当者が製品情報を直接登録できるようになったことで、多くの人手を介していた工程を簡略化することに成功。これにより、運用における時間的コストを削減し、業務効率化に貢献しました。

登録画面の冒頭では、自動連携元となる製品のマスターデータの登録状況を確認することができ、製品データの整備を促す役割も果たしています。