それぞれの目的に沿ってフローを分ける。
購入者にはモバイルアプリ、販売者にはWebダッシュボードを用意しました。
購入者・販売者向けコマース · UX・データ可視化
購入体験と、販売者のデータ・業務をつなぐ。
購入者向けのモバイル体験と、販売者向けのWebダッシュボードを設計しました。データ確認から商品・注文管理までを支える情報と画面を構成しました。
企画上の判断
購入者と販売者の体験をつなぐ、3つの設計方針。
把握したい情報に合ったグラフを選ぶ。
チャネル別の推移と構成比、訪問・離脱、地域別の分布を可視化しました。
モバイルとWebで共通基準を使う。
ブランド、入力状態、ボタン、色、アイコンを共通基準に整理しました。
背景と目的
購入と販売運営を、一つのサービスで支える。
購入者にはアルゴリズムによる商品提案を、販売者には購買データと分析情報を提供するコマースです。モバイルの購入体験と販売者向けWebを設計しました。
対象ユーザーと方針
初期企画では30〜40代の男性と、厳選された商品を探すオンライン購入者を想定。購入者には探しやすさと購入のしやすさを、販売者には運営データと管理機能を提供しました。
ブランディングとUXを担当し、販売者ダッシュボードの情報設計とデータ可視化に取り組みました。
01 / サービス体系
購入に必要な機能と、販売運営の機能を分ける。
- 問題
- 購入者は商品を探して購入し、販売者は商品・注文を管理しながらデータを確認する必要がありました。
- 設計方針
- 購入者アプリと販売者Webに役割を分け、同じブランドとデザイン基準を適用しました。
購入者 · モバイルアプリ
アカウント利用、おすすめ商品の探索、オプション選択、カート管理、購入。
販売者・ウェブ
データ確認、商品管理、注文・配送管理、売上情報の確認。
02 / Information → Decision → Data blueprint
データの見せ方と、その先の判断を一緒に設計する。
ダッシュボードで購買データとユーザー行動を確認できるようにしました。チャネル別推移、訪問構成比、訪問・離脱、地域分布ごとに、示す情報と比較方法を整理しました。
WHEN期間
どの期間を見るか
WHERE FROMチャネル
どの流入経路を比較するか
WHAT訪問・離脱
どの指標をあわせて見るか
WHERE地域
どの地域差を見るか
時間による変化 → 線のつながり
値の上昇・下降を時間順につなぐことで、複数チャネルの変化の方向とタイミングを比較できます。
推移 / 折れ線グラフ
チャネル別の訪問推移
期間ごとに、チャネル別の訪問数はどう変わるか。
- 必要な情報
- 時間順、チャネル別の訪問値、チャネル名。
- 画面への反映
- 複数チャネルを同じ時間軸に配置し、線の色と凡例を対応させました。変化の時点とチャネル間の差を比較できます。
- 支える判断
- 変化の大きい時点とチャネルを見つけ、詳しく確認する対象を絞ります。
全体に占める割合 → 円の分割
全体を一つの円とし、チャネルごとの割合に分割。構成を一目で把握し、正確な名称と割合はツールチップで確認できます。
構成比 / ドーナツグラフ
チャネル別の訪問割合
全訪問に対して、各チャネルはどの程度を占めるか。
- 必要な情報
- 同じ期間の訪問構成、チャネル名、割合。
- 画面への反映
- ドーナツで全体に占める割合を表現し、ツールチップで名称と数値を補いました。分布と詳細値をあわせて読める構成です。
- 支える判断
- 訪問が集中するチャネルと、割合の小さいチャネルを区別します。
同期間の2指標 → 並列の棒
2指標を期間ごとに並べることで、同時点の差と期間ごとの変化を比較できます。色と凡例で訪問・離脱を区別しました。
比較/棒グラフ
訪問・離脱の比較
同じ期間の訪問と離脱に、どんな差があるか。
- 必要な情報
- 期間別の訪問値・離脱値と、両者を区別する基準。
- 画面への反映
- 同じ期間の中に2本の棒を並べ、色と凡例で指標を区別しました。期間ごとの差を同じ画面で比較できます。
- 支える判断
- 訪問と離脱が異なる動きをする時点を確認します。
地域 × 期間 → 格子と色
地域と期間を行・列に置き、値を色の濃淡で表現。複数の地域・期間の分布を一覧で把握するのに適しています。
分布 / ヒートマップ
地域別の分布
地域と期間によって、値はどう異なるか。
- 必要な情報
- 地域、期間、それぞれの交点の指標値。
- 画面への反映
- 地域と期間を行・列に分け、値の大きさを色の濃淡で表しました。凡例で尺度を示し、相対的な差を読めるようにしました。
- 支える判断
- 値の高い・低い地域と期間から、詳細を確認する対象を絞ります。
グラフが変わっても、比較基準がわかるように
時間変化、構成比、指標比較、地域分布を分け、各グラフの役割を明確にしました。
折れ線・ドーナツではチャネル、棒では指標、ヒートマップでは値の大きさを表現します。
グラフで分布をつかみ、凡例とツールチップで対象と数値を確認できます。
データ可視化での担当範囲
販売者に必要な情報と比較の観点を整理し、軸・色・凡例・ツールチップへ具体化しました。データ確認と商品・注文管理を同じWeb内につないでいます。
販売者に必要な情報と比較の観点を整理し、軸・色・凡例・ツールチップへ具体化しました。データ確認と商品・注文管理を同じWeb内につないでいます。
03 / 販売者の情報設計
データ確認と販売運営を、一つのWebに。
- 問題
- 販売状況を把握しながら、商品・注文・配送も管理できる必要がありました。
- 設計方針
- ダッシュボードと商品・注文・配送管理を、同じWebから利用できる構成にしました。
- 画面に反映した内容
- 日付選択、チャネル別グラフ、商品一覧、注文・配送概要、注文詳細モーダル、商品登録フォームを設計しました。
04 / モバイルの購入体験
購入途中でも、オプションと数量を変更できるように。
- 問題
- 購入者は、買い物の途中で商品オプションを選び、選択済みの内容も変更できる必要がありました。
- 設計方針
- 商品探索からオプション変更、カート、アカウント利用、購入完了までのモバイルフローを設計しました。
- 画面に反映した内容
- サイズ・色、数量、カートの商品選択、配送先入力、注文確認の画面を構成しました。
- 意図
- 購入の流れを保ちながら、オプションと数量を変更しやすくしました。
05 / ブランディング
モバイルとWebに、共通のブランドを適用する。
有用で、認識しやすく、信頼できるブランドを目指しました。名称とメッセージにValuable・Intelligence・Brand・Influenceの4概念を込めました。
“Our valuable artificial intelligence makes your brand a positive influence”という言葉で方向性を表現。紫は、新しさと技術志向の印象を伝えるために採用しました。
06 / 共通デザインガイド
繰り返し使うUIの基準を整理する。
タイポグラフィとビジュアル基準
MontserratとNoto Sans KRを採用し、共通パレットとアイコンをガイドにまとめました。
入力要素とコンポーネントの状態
入力欄、選択項目、チェックボックス、ラジオボタン、ボタンの状態を定義。モバイルとWebで再利用し、画面間の一貫性を保ちました。
Output / Result · 成果物と結果
購入者アプリと販売者Webを、共通の基準でつなぐ。
購入者の体験
商品探索、オプション、カート、購入をつなぐモバイルUI。
販売者の経験
データ可視化と商品・注文管理のダッシュボード・運営画面。
共通のデザイン基盤
共通ブランド、再利用できるビジュアル、拡張を見据えたデザインシステム。
プロジェクトの成果
購入者の体験と販売者の運営画面を設計しました。共通ブランドと再利用できる要素で一貫性を保ち、拡張と保守に活用できる基盤を整えました。
購入者の体験と販売者の運営画面を設計しました。共通ブランドと再利用できる要素で一貫性を保ち、拡張と保守に活用できる基盤を整えました。
経験はその後のプロジェクトにも活かされる
このデータ可視化の経験は、その後の企業内ダッシュボードと大学情報システムにも活用しました。再利用できるデザインシステムを構築し、事業目標に応じて画面を改善・拡張する経験にもつながりました。