TANABE MIKU

NETSEA SPカート・購入フロー改善

プロジェクト概要

SPカート・購入フローのUI改善

NETSEAのスマートフォン向け購入フローを対象としたUI改善プロジェクトです。
GA4による行動分析と既存UIの調査から課題を発見し、ディレクターおよび事業部へ改善を提案。合意を得て案件化につなげました。
購入フローは売上に直結する重要な領域であるため、予算・工数や既存機能への影響を考慮し、改善施策を4段階に分けて計画しました。
小規模な改修から着手し、効果を検証しながら段階的に改善を進める方針としました。
本プロジェクトでは、課題分析・改善提案・UI設計・KPI設計から、第1段階のリリース後の効果検証、追加改善案の策定まで担当しました。

改善のハイライト

データから課題を発見し、改善提案から効果検証まで

GA4の行動分析と画面構造の調査から、SP購入フローの改善課題を整理しました。ディレクター・事業部への提案を通じて案件化し、売上への影響や開発工数を考慮した4段階の改善計画を立案。第1段階のUI改善とリリース後の効果検証まで実施しました。

プロジェクト詳細

SP仕入れカートから購入完了までの導線を見直す

NETSEAは、小売事業者が複数のサプライヤーから商品を仕入れるBtoB ECサイトです。仕入れの際には、過去の注文や取引条件を確認しながら商品を比較するなど、一般的な消費者向けECとは異なる行動が発生します。

商品詳細ページの改善に向けてGA4を調査する中で、スマートフォン(SP)の購入導線にも着目。画面構造と利用行動を照らし合わせ、段階的なUI改善と効果検証を提案しました。

対象
NETSEA / SP仕入れカート〜購入完了
期間
2026年3月〜10月(調査・提案・第1段階検証)
担当
GA4分析、課題定義、改善提案、UI設計、KPI設計、効果検証
進行
事業部へ提案・案件化/第1段階を2026年9月10日にリリース

改善の進め方

  1. 行動データを分析

    PC・SPの経路比較

  2. 改善案を段階化

    4段階の検証計画

  3. リリース後に検証

    計測条件と画面構造を再確認

01 · 背景と行動分析

GA4で購入行動を分析し、改善対象を検討

商品詳細ページの改善に向けてGA4を調査する中で、スマートフォン(SP)の購入フローにも着目しました。
約3か月間の行動データを対象に、ファネル探索・経路データ探索・逆経路分析を実施。
PCとSPの購入行動や、新規・リピーターの違いを比較しました。

分析で確認した3つの観点

01

PC・SPの購入フローを比較

GA4のファネル探索を使用し、カートから購入完了までの各ステップをPC・SPで比較。デバイスごとに異なる画面構造や操作導線にも着目しました。

02

カートからの移動経路を調査

経路データ探索・逆経路分析を使用し、カートを起点としたページ間の移動を調査。購入途中に必要となる情報と、その情報へアクセスするための導線を検討しました。

03

新規・リピーターの行動を比較

購入フローの進行状況を新規・リピーター別に比較。利用経験によって操作上の課題が異なる可能性も考慮し、改善対象を検討しました。

分析から設計課題へ

購入途中に必要な情報へ、迷わずアクセスできるか?

行動データの分析に加え、実際の画面構造と操作導線を確認しました。
BtoB ECでは、購入途中にも過去の注文や取引情報を確認する場面が想定されます。こうした利用場面を踏まえ、カートから必要な情報へアクセスしやすい設計を検討しました。

02 · 課題の整理と仮説

ユーザーの利用場面と画面構造から、改善仮説を整理

GA4による購入行動の分析と既存UIの調査を行い、SPカート・購入フローの改善仮説を整理しました。
特に、購入途中に注文履歴やブックマークなどを確認する利用場面を想定し、必要な情報へのアクセス方法を検討しました。
PCではヘッダーから直接アクセスできる機能も、SPのカート画面には同様のメニューがないため、操作導線に改善の余地があると考えました。
また、購入ステップの名称やサプライヤーごとに分かれたカート構造など、情報の伝わりやすさにも着目しました。

カート変更前
SPカート画面の変更前。 ヘッダーにメニューがなく、 注文履歴やブックマークへの直接導線がない。

画面構造と利用場面から立てた5つの仮説

01

必要なページへの導線が不足している

SPカート画面にはメニューがないため、注文履歴やブックマークを確認する際にTOPを経由する必要がある。

02

購入に集中させる設計が、利用場面に合っていない可能性

卸ECでは、購入途中にも過去の注文や取引情報を確認する場面が想定される。必要な情報へ移動し、購入手続きに戻れる設計が適している可能性がある。

03

サプライヤー別のカート構造が分かりにくい

サプライヤーごとに注文手続きが必要なことや、現在どのカートを操作しているのかが直感的に伝わっていない可能性がある。

04

購入ステップの名称が抽象的

「入力」「確認」といった名称では、現在どの段階にいるのか、次に何をするのかが具体的に分かりにくい。

05

カート追加後の画面遷移が買い回りを中断している

商品をカートに追加すると即座にカート画面へ遷移するため、同じサプライヤーの商品を続けて探す行動を妨げている可能性がある。

改善方針の検討

購入フロー全体を一度に変更せず、課題ごとに改善・検証する

これらの仮説は、行動データと画面構造から検討したものであり、ユーザーが実際に迷っていることを確認できたわけではありません。
そこで、仮説ごとに改善施策と評価指標を設定し、影響範囲を切り分けながら段階的に検証する方針としました。

03 · 改善方針

影響範囲を切り分け、4段階で改善する

一度に大きく改修すると、どの変更が行動に影響したか判断しづらくなります。
そこで、実装負荷が比較的小さい施策から着手し、原則として施策ごとに検証してから次へ進む計画を立てました。

01 / リリース・検証済み

購入ステップの明確化

抽象的な名称と現在地表示を改善

02 / 提案

カートのナビゲーション改善

注文履歴・ブックマークへの直接導線を検討

03 / 提案

サプライヤー別カートの整理

複数カートと注文状況をわかりやすくする

04 / 提案

カート追加後の行動選択

買い回りを妨げない完了通知・導線を検討

第1段階の評価指標

KPI 01
カートから「お届け先・支払方法選択」への遷移率

KPI 02
購入フロー途中からTOP等へ移動する割合

購入完了率などの事業指標も確認しつつ、UIが意図した操作を支えているかを分けて評価する方針としました。

04 · UI設計とリリース

第1段階:購入ステップの名称と現在地表示を見直す

従来の「入力」「確認」といった抽象的な表現では、何をする画面なのか想像しにくいと考えました。購入フロー4画面のステップ名を具体化し、進行状態がわかる表示へ変更。2026年9月10日にリリースしました。

BEFORE / 変更前の考え方

短いラベルだが、何を入力・確認するのかが伝わりにくい。

変更前
AFTER / 変更後の考え方

操作内容を具体化し、フロー全体の見通しを持てる表示へ。

変更後

05 · 効果検証と追加改善

計測方法を見直し、次の改善につなげる

リリース後はGA4を使用し、購入フローの各ステップにおけるユーザー行動を検証しました。

当初は探索レポートを使用していましたが、サンプリングによる数値の揺れに気づき、主要指標を標準レポートで再取得しました。また、変更前後の比較だけではUI改善との因果関係を判断できないため、PCの動向や計測条件も確認しました。

行動データの検証に加え、実際の画面構造と操作の整合性を改めて確認し、追加改善案の検討につなげました。具体的な分析数値・結果は非公開としています。

効果検証で重視したこと

数値の変化だけで、UI改善の成否を判断しない

計測方法や集計条件によって、データの見え方が変わる場合があります。そのため、集計方法の妥当性を確認するとともに、複数の指標や画面の操作状況を照らし合わせ、一つの数値だけで結論を出さないようにしました。

画面構造を再確認し、次の改善案へ

お届け先・支払方法選択画面の比較
画面構造の確認

支払方法選択ページのステップ名と、 実際の画面操作が一致していない

同一URL内で「お届け先」と「支払方法」の表示が切り替わる構造。ブラウザの戻る操作では前の表示に戻らず、カートへ移動することがわかりました。

操作上の仮説

現在地に表示したカートアイコンが 誤解を招く可能性

購入途中でも現在地にカートアイコンが表示され、「カートへ戻る」操作と認識される可能性を検討しました。

追加改善案・未実装

お届け先の確認導線と、ステップ表示の再調整

金額・クーポン欄より上に「お届け先」の1行表示と変更リンクを置き、必要なときだけ戻れる導線を提案。
購入画面の現在地アイコンは番号表示に変更する案を作成しました。いずれも追加検討した提案であり、実装・効果は未確認です。

追加改善案のイメージ(AI生成・未実装)
検証後に検討した改善方針をもとに、AIで作成した参考イメージ。実際のサービス画面や実装済みのデザインではありません。

成果と学び

課題発見から案件化、設計・検証まで一貫して取り組む

このプロジェクトでは、商品詳細ページの調査をきっかけに購入導線の課題を発見し、自ら行動分析・改善提案につなげ、事業部の合意を得て施策化しました。

また、売上に直結する購入フローを一度に大きく変更するのではなく、予算・工数・既存機能への影響を考慮し、4段階の改善計画を立案しました。第1段階ではUI設計からリリース後の効果検証まで担当しました。

効果検証では、計測条件や集計方法を確認し、データの信頼性を踏まえて評価することの重要性を学びました。また、画面単体の分かりやすさだけでなく、購入フロー全体で操作や情報が一貫しているかを考える必要があると感じました。

今後も定量データと操作観察の両方を使い、課題定義から改善提案・UI設計・効果検証まで継続的に取り組めるデザイナーを目指しています。