外資系コスメブランド公式ECサイトUI/UX改善プロジェクト

エスティローダーの公式オンラインショップを対象に行われた競合ベンチマーク評価では、資生堂、IPSA、LANCOMEといった主要な競合他社サイトに加え、他業界の優れたECサイトを含む合計12サイトとの緻密な比較検証が行われました。

その結果、エスティローダーのサイトには、直ちに他社水準に追いつくべき「Catchup」項目が11点、独自性を高めるための「Differentiation」項目が10点、合計21の改善すべき課題が浮き彫りになっています。

評価の過程で明らかになったのは、ユーザーが求める情報へのアクセスのしやすさに関する課題です。
多くの競合サイトがスキンケアなどの大カテゴリーに対して見やすいインデックスページを設けているのに対し、エスティローダーではカテゴリー構成や商品ページの情報の充実度に改善の余地があることが判明しました。
特に、商品の成分や使用方法といった、ユーザーが購入を決断するために必要不可欠な詳細情報の見せ方が不足していると考えられます。
ユーザーの購買体験に直結するチェックアウトプロセスの検証では、サンプル選択画面の操作性に難があることが指摘されました。具体的には、画面を下にスクロールしないと「次に進む」ボタンが現れない仕様になっており、これがスムーズな購買行動を阻害する要因となっています。加えて、顧客のロイヤリティを高めるためのマイページがやや無機質なデザインに留まっており、競合他社が積極的に導入している実店舗と連動したポイントプログラムなどのサービスが存在しない点も、公式ECとしての魅力向上に向けた大きな改善ポイントとして挙げられました。
これらの課題を一つひとつクリアすることで、ユーザーにとってより魅力的で使い勝手の良いサイトへと進化するはずです。

■印象的な課題例
・スキンケア等の大カテゴリーのインデックスや、成分・使用方法などの商品説明の拡充が必要。
・サンプル選択画面でスクロールしないと次へ進めず、チェックアウト時の操作性に難がある。
・マイページが無機質であり、実店舗と連動したポイントプログラムなどロイヤリティを高める施策がない。

MACコスメティックスの公式オンラインショップにおける競合ベンチマーク評価は、YSL、SHUUEMURA、RMKなどの直接的な競合ブランドを中心に行われました。
この比較調査を通じ、サイト全体で合計18の改善ポイントが抽出されました。
内訳としては、他社の標準的な機能に追いつくための「Catchup」項目が13点、MACならではのブランド価値を際立たせるための「Differentiation」項目が5点となっています。

調査の中で特に目立った課題は、スマートフォン閲覧時におけるグローバルナビゲーション（ハンバーガーメニュー）の構造に関するものです。
メニューの階層が深く複雑であるため、ユーザーが目的の商品やカテゴリーにスムーズにたどり着けないというユーザビリティ上の問題が指摘されました。メニュー構造をシンプルにし、不要なステップを削減することが急務と言えます。また、リストページにおける商品の探しやすさも重要な論点となりました。
多くの商品を取り扱うブランドでありながら、価格順や新着順といった並び替え（ソート）機能がリストページに実装されておらず、これがユーザーの利便性を低下させている要因となっています。

他社サイトでは検索結果の絞り込み機能が充実しているため、MACでも同様の最適化を図る必要があります。さらに、ブランドとしての独自性を表現する上で、スマートフォンサイトでのモーションやビジュアルの見せ方にも工夫が求められます。
既存のコンテンツをうまく活用し、各製品のカテゴリーに応じた適切なアドバイスや使用感を伝えることで、競合他社にはないMAC独自の魅力的な購買体験を構築することが期待されます。

■印象的な課題例
・スマートフォンのハンバーガーメニューの階層が深く、目的の情報に素早くアクセスできない。
・商品数が多いにもかかわらず、リストページに価格順などの並び替え（ソート）機能が存在しない。
・スマホサイトでの独特なモーションの欠如や、アドバイスコンテンツへの導線不足によるブランド体験の低下。

最高峰のスキンケアブランドであるDELAMER（ドゥ・ラ・メール）の競合ベンチマーク評価では、CHANEL、Dior、GUERLAINといったトップクラスのラグジュアリーブランドを対象に比較分析が行われました。
この調査によって、他社水準を満たすための「Catchup」項目が14点、独自の強みを打ち出す「Differentiation」項目が2点、合計16の具体的な改善点が抽出されています。

最も顕著な課題として挙げられたのは、スマートフォンの限られた画面領域の非効率な利用です。
サイト上部にある大きなバナーや、画面下部を占有するフッターナビゲーションの影響で、ユーザーが実際に商品を閲覧できる領域が画面全体の約40%程度にまで狭まってしまっていることが判明しました。
バナーを閉じられるようにしたり、スクロールに合わせてフッターを非表示にするなどの工夫により、閲覧エリアを75%程度まで拡大し、快適なショッピング環境を提供することが推奨されました。また、リストページのデザイン洗練化と情報設計も見直すべきポイントです。

高級感のあるブランドイメージを保ちつつ、商品の特長やアワード受賞歴といった強みを端的に伝える情報をリストページに追加することで、他社との差別化を図ることが求められています。さらに、サービス面での比較において、競合他社の多くが実店舗と連携したポイントプログラムや送料無料サービスなどを導入している中、DELAMERにはそうしたロイヤルティを高める仕組みが不足していることも確認されました。
公式サイトで直接購入することの明確なメリットをユーザーに提示することが、今後のEC展開における大きな鍵となるでしょう。

■印象的な課題例
・スマホ画面の大部分をバナーやフッターが占有しており、実際のコンテンツ閲覧領域が著しく狭い。
・リストページにおいて、商品の強みやアワード受賞歴など、ユーザーの興味を惹く情報が不足している。
・競合が導入しているポイントプログラムや特典など、公式サイトで購入する強力な動機付けが弱い。

エスティローダーの被験者テストは、ターゲット層となる5名のモニターユーザーを対象に、実際のサイト操作を通じて行われました。
ユーザーの生の声と行動観察から、ECサイトが抱える21の実践的な課題と解決策が導き出されています。
テストを通じて最も多く寄せられた不満は、サイトのナビゲーションに関するものでした。
トップページがユーザーの期待する情報を提示できていないことに加え、ハンバーガーメニューの構造が複雑で、どこに何があるのか直感的に理解しづらいという問題が浮き彫りになりました。さらに、PCサイトとスマートフォンサイトでメニューの構造が異なっている点も、複数デバイスを使い分けるユーザーにとって大きな混乱の元となっています。

購買プロセスの中核をなすチェックアウト画面においても課題が見つかりました。
エスティローダーの特典であるサンプル選択画面において、各サンプルの具体的な説明や効能（例えば美容液の詳しい効果など）がカタカナ表記のみで十分に伝わらず、どれを選べばよいか迷ってしまうユーザーの姿が観察されました。情報不足はユーザーの決断を遅らせる要因となります。
一方で、ブランドの成り立ちや哲学を伝えるコンテンツ「ESTEESTORIES」は、実際に閲覧したユーザーからは「ブランドへの親しみが増した」と高く評価されました。しかし、現状ではサイト内の導線が弱く、多くのユーザーがその存在に気づいていないという非常にもったいない状況です。
魅力的なコンテンツを適切なタイミングでユーザーに届けるUI設計が、ブランドロイヤリティ向上に不可欠であると結論づけられました。

■印象的な課題例
・ハンバーガーメニューの構造が複雑な上、PCとスマホで構成が異なりユーザーを混乱させている。
・サンプル選択時に商品の詳細な説明がなく、どれを選ぶべきかユーザーが判断しづらい。
・高い評価を得られる読み物コンテンツ「ESTEESTORIES」への導線が弱く、見つけにくい。

MACコスメティックスの公式ECサイトにおける被験者テストも、5名のモニターを対象に実施され、合計25項目の課題と改善案が抽出されました。
MAC特有の洗練されたデザインが、かえってユーザビリティを損ねている実態が明らかになっています。
ユーザーが最初に直面した壁は、メニューの視認性と理解度です。

ハンバーガーメニューを開いた際、フォントサイズが大きすぎるために全体が見渡しにくく、MACの持つ「オシャレ感」が削がれているという指摘がありました。また、「VIPS」「GOODBYES」「アーティストリー」といったブランド独自の専門的なメニュー名が並んでおり、一般的な化粧品を探しに来たユーザーが直感的にカテゴリーを判別できない傾向が見られました。

商品詳細ページにおいても、デザイン性を優先するあまり、商品説明のテキストサイズが小さすぎて読みにくいという声が多数挙がりました。さらに、商品の素材や色に関する具体的な情報が不足しており、特にカラーバリエーションが豊富なブランドであるにもかかわらず、カートに入れるまで在庫状況が分からない仕様は、購入意欲を大きく削ぐ結果となっています。

ブランドの独自性を発信する「アーティストリー」などのコンテンツは、一部のファンには響くものの、一般的なユーザーには見つけにくく、十分に活用されていません。
今後は、MACらしいモードでクールな世界観を損なうことなく、初めてサイトを訪れたユーザーでも迷わずに商品を選び、購入できる親切なナビゲーションと情報設計を両立させることが最大の課題と言えます。

■印象的な傾向例
・メニューの文字が大きすぎることや、「VIPS」等の専門用語が多用され、直感的な操作を妨げている。
・商品説明の文字が小さく、商品の素材や色に関する具体的な情報が不足しているため購入を躊躇させる。
・カラーを選択するまで在庫状況が確認できないため、購入プロセスでの離脱を招きやすい。

クリニークの公式ECサイトと、Amazonをはじめとする巨大モールとの比較調査では、ユーザーが各チャネルをどのように使い分けているかという購買心理が深く掘り下げられました。この調査は、ブランド直営サイトが持つべき存在意義を再確認する重要なプロセスとなりました。

調査の結果、ユーザーの多くは「初めての購入は百貨店などの実店舗で色や使用感を確かめ、2回目以降のリピート購入でオンラインを利用する」という堅実な行動パターンを持っていることが確認されました。
オンラインでの購入先を選ぶ際、ユーザーがAmazonや楽天に対して公式ECサイトに期待する最大のメリットは、「無料サンプルの提供」「正規品であるという絶対的な安心感」「公式限定アイテムの存在」、そして「送料無料」といったプレミアムな付加価値です。しかし、実際のサイト操作テストでは、クリニーク公式ECのUI/UXがこれらの期待を十分にサポートできていないことが判明しました。

例えば、無料サンプルが何個選べるのかという重要な説明が欠けていたり、カート画面での情報が不足しているため、ユーザーが戸惑う場面が見受けられました。また、個人情報を入力するフォームの枠が小さく、フリガナの自動入力機能も備わっていないため、購入完了までの入力ストレスが大きいことも離脱の原因となっています。さらに、クリニーク独自の強みである「3ステップスキンケア」やコンテンツページ「TheWink」の価値が、ユーザーに的確に伝わっていないという課題も浮き彫りになりました。

公式ECサイトがモールに対抗するためには、こうした直営ならではの独自コンテンツとサービスを、より直感的で使いやすいUIを通じてユーザーに届けることが急務です。

■印象的な課題例
・無料サンプルが何個選べるかなど、特典に関する説明不足がユーザーの期待を裏切っている。
・入力フォームの枠が小さく、自動入力機能もないため、決済時のユーザビリティが低い。
・「3ステップ」等の独自コンテンツの魅力が伝わりきれておらず、モールとの差別化が不十分。

本プロジェクトを通じ、大手百貨店コスメブランドにおける公式ECサイトの真の役割と、あるべきUI/UXの姿が明確に示されました。
百貨店ブランドの化粧品は比較的高単価であるため、EC市場が急速に拡大している現在においても、依然として「実店舗（カウンター）で美容部員のアドバイスを受けながら、直接商品を手に取って買いたい」と考えるユーザーが多数を占めています。その中で、ブランド公式ECが単なる「オンライン上の販売窓口」にとどまるべきか、あるいはそれ以上の役割を果たすべきか、深く考えさせられる結果となりました。

調査から見えてきたユーザーの典型的な行動モデルは、非常に示唆に富んでいます。
ユーザーは「初回購入時は百貨店で自分の肌に合う色やテクスチャーを慎重に確認して購入し、自分の定番アイテムとなった2回目以降は、手軽なECサイトで指名買いをする」という使い分けを巧みに行っています。
さらに、並行輸入品などが流通するAmazonや楽天といった巨大モールと比較した際、ユーザーは「品質への不安を払拭し、定価であっても確実に本物を手に入れたい」という強い心理から公式サイトを選択しています。

基本的にメーカーの公式サイトでは、モールのような大幅な値引きやポイント還元競争を行うことが困難です。だからこそ、金額的なインセンティブに代わる「公式サイトをあえて選ぶメリット」を戦略的に設計し、それをUI/UXとして実装しなければなりません。今回の調査で明らかになった「サンプルの充実とその分かりやすい提示」「ブランドの哲学を伝える上質なコンテンツへのスムーズな導線」「ストレスのない洗練された購買プロセス」は、まさにそのメリットを形にするための具体的な処方箋です。
UI/UXの改善は、単にボタンの位置を変えたりデザインを整えたりする表面的な改修ではありません。それは、実店舗で得られるような「ブランドのホスピタリティ」をデジタル上でいかに再現し、顧客のロイヤリティを深めるかという経営戦略そのものです。

今回のミッションに対し、徹底した競合ベンチマークとリアルな被験者テストから得られた貴重な調査結果は、同社の日本市場におけるEC事業の飛躍に大きく貢献することでしょう。
公式ECサイトの運営を担うすべてのブランド担当者にとって、本プロジェクトの緻密なプロセスとユーザー起点の改善アプローチは、自社サイトの価値を再定義し、モールや実店舗と相乗効果を生み出すための強力な羅針盤となるはずです。