merce collection ECサイトデザイン

Mar 2026 -

高濃度酸素オイルを中心とした化粧品を製造販売を行う株式会社フレイズの運営する通販サイト「merce collection」のサイトの再リニューアルの要件定義からWebデザインまでを行いました。

Cliant

株式会社フレイズ

My Role

要件定義、情報設計、アートディレクション、Webデザイン、グラフィックデザイン

The Team

事業担当(1)、PR/SNS担当(1)、フロントエンドエンジニア(外部)、バックエンドエンジニア(外部)

Background

再リニューアルの経緯について


このサイトは2024年の10月にリニューアルされ、運用を行なわれていたのですが、サイトからの購入率が下がっていることを起点にして、改善の声が求められ、相談を受けました。
最初は、TOPのみのサイト改善を想定していたのですが、構成が変わることで下層ページも変更しなくてはならなくなり、フェーズを分けた再リニューアルの形を提案しました。

まずはサイトの課題を洗い出すため、Google Analyticsからリニューアル前とリニューアル後の同時期6か月間のデータをCSVで抽出し、AIを活用して比較・分析しました。その結果と参考サイトをもとに、PR・SNS担当やプロダクトオーナーへヒアリングを行い、影響範囲やユーザー体験を踏まえながら、改善すべき課題と優先順位を整理しました。



Problem

GA分析とヒアリングから分かった課題


1. ユーザーが商品まで辿り着けていない

GA4の比較数字を見るとトップページのユーザー数は大幅に増加しているが、商品詳細ページに辿り着いたユーザー数が約35%減少していました。

→ 仮説1: トップページでユーザーに沿った商品提案がされていないのではないか。

→ 仮説2: トップページから一覧とカテゴリページまで遷移するUIがわかりずらいのではないか。


2. 商品一覧ページの操作しずらさ

GA4の比較数字では、商品一覧・カテゴリページの平均エンゲージメント時間が旧サイトと比較して約3倍に増加していました。
→ 仮説3: 商品一覧やカテゴリページにおいて迷う動線があるのではないか。


3. 流入してきた新規ユーザーにとって何のサイトかわかりにくい

これはPR/SNS担当者からのヒアリングで上がってきた課題で、魅力的な商品が置いてある中で、新規ユーザーにとってこのサイトが何のサイトなのか、どんなブランドがあるのかわかりにくいとの指摘がありました。




Process & Solution

課題から取り組みと工夫したこと


1. トップページの情報の優先度を変更

KVにこのサイトの軸となる6種類のブランドイメージを置く

このサイトは4つのブランドを軸にして商品の販売をしているので、KV箇所にブランドイメージを持ってくることで何を扱っているサイトなのかを一目でわかるようにいたしました。


KVの後にランキング→特集の流れを作る

ブランドについてでどんな商品があるのか知ってもらった後、ランキングや、特集を見せることにより、このサイトの何が売れ筋なのか、どんなキャンペーンがあるのか知ってもらう形にしました。




2. headerのUI変更

メニューデザインの変更

headerのUIは各カテゴリが隠れているプルダウンメニューのデザインで、一目で何のカテゴリがあるのか分かりにくく選択をしにくいと考えたため、主要のカテゴリを見せるメガドロップダウンのデザインに変更しました。


headerへ検索軸の集約

商品一覧ページ内に分散していた「ブランド・カテゴリー・お悩み」の探索軸をグローバルナビゲーションに集約。どのページからでも目的に合わせて商品を探し直せる構造へ変更しました。




3. カテゴリトップページのUI変更

headerのドロップダウンメニューに検索軸を集約したため、カテゴリトップページの左カラムに置いてあった「ブランド・カテゴリー・お悩み」の探索軸は不要な遷移を招いてしまうのではないかと考え、こちらを無くしその分ページ内に載せられる商品カード量を増加させました。




4. ターゲットに沿ったUI改善

メインターゲットは40-60代のため、特にSPの場合は、スマホで見ることになるので、ボタンの押しやすさやテキストの大きさにも配慮を行いました。




Results

成果


商品一覧ページの平均エンゲージメント時間は約18%短縮しましたが、その一方で、商品一覧ページのアクティブユーザーは約22%増加しました。

より多くのユーザーが商品一覧を閲覧するようになった一方で、一人あたりの閲覧時間は短くなっていることから、商品を探す際の迷いを減らすという改善意図に沿った変化が見られました。


今回の数字を見る限り、リニューアルによって「商品を探し始めるところ」は改善した可能性がありますが、「そこから具体的な商品を選ぶところ」にはまだ改善余地が残っていると感じています。




Design

サイトデザイン



©Yuri Yamada

merce collection ECサイトデザイン

Mar 2026 -

高濃度酸素オイルを中心とした化粧品を製造販売を行う株式会社フレイズの運営する通販サイト「merce collection」のサイトの再リニューアルの要件定義からWebデザインまでを行いました。

Cliant

株式会社フレイズ

My Role

要件定義、情報設計、アートディレクション、Webデザイン、グラフィックデザイン

The Team

事業担当(1)、PR/SNS担当(1)、フロントエンドエンジニア(外部)、バックエンドエンジニア(外部)

Background

再リニューアルの経緯について


このサイトは2024年の10月にリニューアルされ、運用を行なわれていたのですが、サイトからの購入率が下がっていることを起点にして、改善の声が求められ、相談を受けました。
最初は、TOPのみのサイト改善を想定していたのですが、構成が変わることで下層ページも変更しなくてはならなくなり、フェーズを分けた再リニューアルの形を提案しました。

まずはサイトの課題を洗い出すため、Google Analyticsからリニューアル前とリニューアル後の同時期6か月間のデータをCSVで抽出し、AIを活用して比較・分析しました。その結果と参考サイトをもとに、PR・SNS担当やプロダクトオーナーへヒアリングを行い、影響範囲やユーザー体験を踏まえながら、改善すべき課題と優先順位を整理しました。



Problem

GA分析とヒアリングから分かった課題


1. ユーザーが商品まで辿り着けていない

GA4の比較数字を見るとトップページのユーザー数は大幅に増加しているが、商品詳細ページに辿り着いたユーザー数が約35%減少していました。

→ 仮説1: トップページでユーザーに沿った商品提案がされていないのではないか。

→ 仮説2: トップページから一覧とカテゴリページまで遷移するUIがわかりずらいのではないか。


2. 商品一覧ページの操作しずらさ

GA4の比較数字では、商品一覧・カテゴリページの平均エンゲージメント時間が旧サイトと比較して約3倍に増加していました。
→ 仮説3: 商品一覧やカテゴリページにおいて迷う動線があるのではないか。


3. 流入してきた新規ユーザーにとって何のサイトかわかりにくい

これはPR/SNS担当者からのヒアリングで上がってきた課題で、魅力的な商品が置いてある中で、新規ユーザーにとってこのサイトが何のサイトなのか、どんなブランドがあるのかわかりにくいとの指摘がありました。




Process & Solution

課題から取り組みと工夫したこと


1. トップページの情報の優先度を変更

KVにこのサイトの軸となる6種類のブランドイメージを置く

このサイトは4つのブランドを軸にして商品の販売をしているので、KV箇所にブランドイメージを持ってくることで何を扱っているサイトなのかを一目でわかるようにいたしました。


KVの後にランキング→特集の流れを作る

ブランドについてでどんな商品があるのか知ってもらった後、ランキングや、特集を見せることにより、このサイトの何が売れ筋なのか、どんなキャンペーンがあるのか知ってもらう形にしました。




2. headerのUI変更

メニューデザインの変更

headerのUIは各カテゴリが隠れているプルダウンメニューのデザインで、一目で何のカテゴリがあるのか分かりにくく選択をしにくいと考えたため、主要のカテゴリを見せるメガドロップダウンのデザインに変更しました。


headerへ検索軸の集約

商品一覧ページ内に分散していた「ブランド・カテゴリー・お悩み」の探索軸をグローバルナビゲーションに集約。どのページからでも目的に合わせて商品を探し直せる構造へ変更しました。




3. カテゴリトップページのUI変更

headerのドロップダウンメニューに検索軸を集約したため、カテゴリトップページの左カラムに置いてあった「ブランド・カテゴリー・お悩み」の探索軸は不要な遷移を招いてしまうのではないかと考え、こちらを無くしその分ページ内に載せられる商品カード量を増加させました。




4. ターゲットに沿ったUI改善

メインターゲットは40-60代のため、特にSPの場合は、スマホで見ることになるので、ボタンの押しやすさやテキストの大きさにも配慮を行いました。




Results

成果


商品一覧ページの平均エンゲージメント時間は約18%短縮しましたが、その一方で、商品一覧ページのアクティブユーザーは約22%増加しました。

より多くのユーザーが商品一覧を閲覧するようになった一方で、一人あたりの閲覧時間は短くなっていることから、商品を探す際の迷いを減らすという改善意図に沿った変化が見られました。


今回の数字を見る限り、リニューアルによって「商品を探し始めるところ」は改善した可能性がありますが、「そこから具体的な商品を選ぶところ」にはまだ改善余地が残っていると感じています。




Design

サイトデザイン



©Yuri Yamada

merce collection ECサイトデザイン

Mar 2026 -

高濃度酸素オイルを中心とした化粧品を製造販売を行う株式会社フレイズの運営する通販サイト「merce collection」のサイトの再リニューアルの要件定義からWebデザインまでを行いました。

Cliant

株式会社フレイズ

My Role

要件定義、情報設計、アートディレクション、Webデザイン、グラフィックデザイン

The Team

事業担当(1)、PR/SNS担当(1)、フロントエンドエンジニア(外部)、バックエンドエンジニア(外部)

Background

再リニューアルの経緯について


このサイトは2024年の10月にリニューアルされ、運用を行なわれていたのですが、サイトからの購入率が下がっていることを起点にして、改善の声が求められ、相談を受けました。
最初は、TOPのみのサイト改善を想定していたのですが、構成が変わることで下層ページも変更しなくてはならなくなり、フェーズを分けた再リニューアルの形を提案しました。

まずはサイトの課題を洗い出すため、Google Analyticsからリニューアル前とリニューアル後の同時期6か月間のデータをCSVで抽出し、AIを活用して比較・分析しました。その結果と参考サイトをもとに、PR・SNS担当やプロダクトオーナーへヒアリングを行い、影響範囲やユーザー体験を踏まえながら、改善すべき課題と優先順位を整理しました。



Problem

GA分析とヒアリングから分かった課題


1. ユーザーが商品まで辿り着けていない

GA4の比較数字を見るとトップページのユーザー数は大幅に増加しているが、商品詳細ページに辿り着いたユーザー数が約35%減少していました。

→ 仮説1: トップページでユーザーに沿った商品提案がされていないのではないか。

→ 仮説2: トップページから一覧とカテゴリページまで遷移するUIがわかりずらいのではないか。


2. 商品一覧ページの操作しずらさ

GA4の比較数字では、商品一覧・カテゴリページの平均エンゲージメント時間が旧サイトと比較して約3倍に増加していました。
→ 仮説3: 商品一覧やカテゴリページにおいて迷う動線があるのではないか。


3. 流入してきた新規ユーザーにとって何のサイトかわかりにくい

これはPR/SNS担当者からのヒアリングで上がってきた課題で、魅力的な商品が置いてある中で、新規ユーザーにとってこのサイトが何のサイトなのか、どんなブランドがあるのかわかりにくいとの指摘がありました。




Process & Solution

課題から取り組みと工夫したこと


1. トップページの情報の優先度を変更

KVにこのサイトの軸となる6種類のブランドイメージを置く

このサイトは4つのブランドを軸にして商品の販売をしているので、KV箇所にブランドイメージを持ってくることで何を扱っているサイトなのかを一目でわかるようにいたしました。


KVの後にランキング→特集の流れを作る

ブランドについてでどんな商品があるのか知ってもらった後、ランキングや、特集を見せることにより、このサイトの何が売れ筋なのか、どんなキャンペーンがあるのか知ってもらう形にしました。




2. headerのUI変更

メニューデザインの変更

headerのUIは各カテゴリが隠れているプルダウンメニューのデザインで、一目で何のカテゴリがあるのか分かりにくく選択をしにくいと考えたため、主要のカテゴリを見せるメガドロップダウンのデザインに変更しました。


headerへ検索軸の集約

商品一覧ページ内に分散していた「ブランド・カテゴリー・お悩み」の探索軸をグローバルナビゲーションに集約。どのページからでも目的に合わせて商品を探し直せる構造へ変更しました。




3. カテゴリトップページのUI変更

headerのドロップダウンメニューに検索軸を集約したため、カテゴリトップページの左カラムに置いてあった「ブランド・カテゴリー・お悩み」の探索軸は不要な遷移を招いてしまうのではないかと考え、こちらを無くしその分ページ内に載せられる商品カード量を増加させました。




4. ターゲットに沿ったUI改善

メインターゲットは40-60代のため、特にSPの場合は、スマホで見ることになるので、ボタンの押しやすさやテキストの大きさにも配慮を行いました。




Results

成果


商品一覧ページの平均エンゲージメント時間は約18%短縮しましたが、その一方で、商品一覧ページのアクティブユーザーは約22%増加しました。

より多くのユーザーが商品一覧を閲覧するようになった一方で、一人あたりの閲覧時間は短くなっていることから、商品を探す際の迷いを減らすという改善意図に沿った変化が見られました。


今回の数字を見る限り、リニューアルによって「商品を探し始めるところ」は改善した可能性がありますが、「そこから具体的な商品を選ぶところ」にはまだ改善余地が残っていると感じています。




Design

サイトデザイン