花王   カタログ機能を兼ね備えたECサイト「My Kao Mall」構築支援

花王株式会社様（以下、花王）が生活者と直接つながり、体験を共創するデジタルプラットフォームとして構想された「My Kao」。コンセントでは、その一部であるECサイト「My Kao Mall」の構築・デザインを支援しました。既存のデジタル資産を活用することで、短期間での構築とその後の運用改善を実現しています。

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

2021年にコンセントがリニューアルを支援した花王の製品カタログサイト。それを2022年に立ち上げたプラットフォーム「My Kao」内のECサイト「My Kao Mall」として再構築することになりました。2022年12月のローンチから段階的なリリースを重ね、2024年2月現在は家庭用品・ブランドコスメ・アウトレット品を取り扱っています。

My Kaoは、「知る」「体験する」「買う」「創る」の4つの機能で構成されています。ウェブ上で花王とユーザーの双方が情報の受発信を行い、暮らしに関するデータを蓄積・活用することによる、より良い生活体験づくりを目指しています。

その中で「買う」機能を担うMy Kao Mallが必要となった背景には、EC市場の拡大や生活者の購買行動の変容といった時代による変化がありました。

当初、プロジェクト方針として設定されていたのは「短期間で構築できること」「既存のシステム・リソースを活用し開発コストを抑えること」「リリース後の運用がしやすいこと」の3点。既存の製品カタログサイトに用いていたデジタル資産を再活用しながら、ECサイト画面と運用業務用システムを短期間で並行して開発していく必要がありました。

本記事では、主にECサイトの画面設計プロセスについてご紹介します。

前掲した3つのプロジェクト方針がありつつも、プロジェクト開始時には機能・UIに関する具体的な要求が曖昧な状態でした。プロジェクト推進のためには多くの検討事項に対するステークホルダーの声をスピーディーにまとめ上げていくことが求められました。

そこで本件では、要件定義とデザイン制作を並行する方法を採用しました。ウェブサイトの画面制作においては多くの場合、要件定義の完了後、ワイヤーフレームをもとに掲載要素を確定させてからUI制作に移ります。しかし本件では、ステークホルダーの要求・意見を引き出しやすくするためにあえてワイヤーフレームの段階を省略し、ビジュアライズしたUI案を先行して作成。それを会議の場に持ち込み具体的なイメージを示すことで、多くのステークホルダーから論点を引き出し、多岐にわたる検討・議論を進めました。

実際の検討に用いたMiro（ホワイトボードツール）の画面。サイトを来訪するユーザーが目にする画面と近いビジュアルを議論の素材とすることで、具体的な要求を指摘しやすくした。

検討の結果、「カタログ機能とEC機能を両立させたサイトであること」がMy Kao Mallの大きな軸となりました。カタログ機能、いわば「正しい商品情報を明示する機能」が要件となった背景には、花王の製品カタログサイトとのつながりがあります。製品カタログサイトでは対象ユーザーを生活者のみに限定せず、商品の流通・販売に携わる人々も情報の受け手として想定していました。My Kao Mallにもその捉え方を引き継いだのです。

モノを売るための機能のみではなく、生活者・流通業者・販売業者といった幅広いユーザーにとって有益な情報を提供すること。この設計思想を基本とし、プロジェクト開始からリリースまで10ヶ月という限られた期間の中で、実現可能な最大限の要件を模索・実施していきました。

My Kao Mallでは幅広いユーザーをサポートする視点で情報を提供しています。例えば商品詳細ページでは、成分・使い方・注意事項などの生活者に寄り添った情報の他、サイズ・JANコードといった流通・販売業者向け情報の確認が可能です。

My Kao Mallの商品詳細ページ。「成分・使い方・ご注意など」や「SPF表示、PA表示について」など、メーカー直営のECサイトとして生活者が信頼できる情報を提供している。

また「地図から販売店舗を探す」機能は、オフライン・オンラインを問わず購入の手助けをする機能です。これにより、生活者の購入体験の向上、ならびに生活者と小売店（販売業者）のマッチングを図っています。

多くのECサイトでは、「売る・買う」が第一目的となっているため、オンラインの購入体験に関する販促情報が優先して訴求される傾向が見られます。そのような中、My Kao Mallでは信頼性の高い有益な情報を幅広いユーザーに直接届ける姿勢を重視しました。その反映ともいえる画面設計は、My Kao Mallがもつ独自性あるポイントの一つとなっています。