UI/UX ケーススタディ
給与確認アプリのリデザイン
実際のユーザーインタビューとフィードバックをもとに、給与確認体験を調査・再設計しました。
海外のスーパーは広く、欲しい商品を見つけるのにかなりの労力を使います。
そこで、私はバイト先の店内マップをもとにモバイルアプリを作り、買い物体験をデザインしました。
- Tool
- Figma + MCPClaudeReact NativeNode.jsExpressMySQL
- 役割
- UX Researcher / UI Designer / Frontend Developer
- 期間
- 1か月、2026年6月〜7月
About this project
スーパーの店内で探している商品の場所がひと目で分かるアプリのUIデザイン、開発、テストしました。
Main objective
探し回る時間を減らし、買い物をもっとスムーズに。
大型スーパーで必要な商品をすばやく見つけられるようにし、慣れない売り場でも探し回る時間を減らします。
Project highlight
デザイン × AIツール × 開発
ユーザー中心設計、AIを活用したワークフロー、React Native開発を通じて、インタラクティブな店内ナビゲーションを設計・実装・検証しました。
1. デザインの制約
公式ブランドガイドのルールを厳格に守りながら、UI構築に必要な独自のデザインシステムを設計しました。
2. AIを活用したワークフロー
Claude CodeとFigma MCPを使い、AIを活用したデザインから実装までのワークフローを構築しました。
3. Testing with a Coded Prototype
React Nativeで動作するプロトタイプを実装し、実環境で2種類のUIの操作性と使いやすさを検証しました。
Background
スーパーマーケットで働く中で、毎日のように目にした課題
私はカナダの大手スーパーでアルバイトをした経験があり、何千もの商品が並ぶ広い店内で、目的の商品を見つけられず困っているお客様を何度も見ました。在庫があっても見つけられないまま帰ってしまうことも多く、商品の場所を簡単に確認できる仕組みが必要だと感じました。
お客さんの声：
- 「商品を見つけるのに時間がかかりすぎる」
- 「商品の場所をスタッフに聞くことが多い」
- 「必要な商品を見つけられずに帰ることがある」
- 「何を買いに来たのか忘れてしまう」
店舗スタッフの声：
- 「従業員全員が商品の場所を把握しているわけではない」
- 「商品の場所を聞かれて作業が中断されることが多い」
- 「商品によっては案内看板だけでは十分ではない」
- 「商品の位置情報があれば業務が楽になる」
Design Goals
迷わず、すばやく商品を見つけられるようにする
ユーザーストーリー : 買い物客として、店内で迷わず買い物できるよう、探している商品を簡単に見つけたい。
Theme
そもそもなぜデザインシステムが重要なのか？
デザインシステムは、単なる再利用可能なコンポーネントの集まりではありません。新しい機能を既存のプロダクトへ自然になじませるための、共通のルールとして機能します。
この考えを検証するため、 現在のWalmartには存在しない店内マップ機能を意図的にデザインしました。 課題は新しいものを作ることではなく、新しくても「Walmartらしい」と感じられるものを作ることでした。
Constraint
公開されていたのはWalmartのブランドガイドラインだけでした。
開発で使われているUIコンポーネントやデザイントークンは非公開で、参照できたのは基本的なブランドガイドのみでした。そこで、公開情報からブランドの特徴を読み取り、Walmartらしさを保った新機能の設計に取り組みました。
Decision
公開されているブランド原則をセマンティックトークンへ変換しました。
Figma上ではブランドカラーをコンポーネントへ直接適用せず、セマンティックトークンを導入することで、新しいUIパターンを再利用かつ保守しやすくしました。
Application
トークンを基盤に、機能全体で再利用可能なコンポーネントを構築しました。
作成したデザイントークンをもとに、商品ピンやリストアイコンなどのコンポーネントを設計し、店内マップ全体に一貫して適用しました。これにより、Walmartらしい見た目を保ちながら、新しい機能にも展開できるUIを構築しました。
Objective
店内マップの実装
店内で迷わず商品を見つけられるようにすることが目標でした。勤務先店舗のレイアウトをもとに、通路と商品エリアを正確に再現しました。
整理されたSVGを作るため、元のフロアマップに8 × 8pxのグリッドを重ね、各エリアをセル単位でトレースしました。
Design to Dev
AIで商品情報と連動する店内マップの開発を効率化
マップ上に商品の場所を表示するには、各エリアと商品データを正確に紐づける必要があります。この繰り返し作業を効率化するため、AIを活用しました。
Challenge
数百以上の商品棚セルを正確に管理する
商品と位置を紐づけるには、すべてのマップ要素に固有IDが必要でした。数百以上の要素を手作業で命名すると時間がかかり、ミスや重複も起こりやすくなります。
Solution
Figma MCPとClaudeで命名作業を自動化
商品カテゴリーと位置に基づく命名規則を作り、Figma MCP経由でClaudeを使って各レイヤーへ適用しました。レイヤー名をそのままSVG IDとして利用でき、開発への受け渡しがスムーズになりました。
Outcome
開発時間を短縮し、実装精度を向上
反復作業を減らし、命名の正確性を高めました。また、Figmaから開発への移行も効率化できました。
Design Challenge
マップの見やすさと商品へのアクセスを両立する
店内を移動するとき、買い物客には見やすいマップと買い物リストへの素早いアクセスの両方が必要です。一方を優先すると、もう一方が損なわれがちです。よりよい体験を見極めるため、2つのナビゲーションパターンを検討し、ユーザビリティテストで検証しました。
Design Trade-off
2つのナビゲーションパターンを比較
パターンA
ヘッダーリスト
ヘッダーリストは商品へ常にアクセスでき、表示されるマップ領域を少し狭める代わりに、商品を素早く切り替えられます。
商品をすばやく切り替えられる
マップと買い物リストを同時に確認できる
マップの表示領域が狭い
パターンB
ボトムシート
ボトムシートは、不要なときに買い物リストを隠せるため、マップの見やすさを優先できます。
マップを最大限に表示できる
必要なときだけ買い物リストを表示できる
展開時にマップの一部が隠れる
Usability Test
実店舗でプロトタイプをテスト
参加者には5つの商品を探し、商品を切り替え、見つけた商品を完了にし、店内マップを使って移動してもらいました。どちらのUIを好むかだけでなく、商品を切り替える頻度、買い物リストを開き直す頻度、タスク中のマップ操作も観察しました。
タスク：パターンAとパターンBを使って、それぞれ5つの商品を探す。
A
B
主な発見
- ユーザーはマップを表示したままにしたかった
- ボトムシートはマップを大きく隠してしまった
- ヘッダーからの方が商品を切り替えやすかった
Design Decision
よりスムーズな買い物の流れを優先
ボトムシートではマップを大きく表示できましたが、参加者はマップを全画面で見るよりも頻繁に商品を切り替えていました。ヘッダーリストは不要な操作を減らし、商品へすぐアクセスでき、よりスムーズな買い物を支えました。この結果から、最終UIにはヘッダーリストを採用しました。
デザインとは、制約・トレードオフ・ユーザーのニーズのバランスを取るプロセスが必要不可欠である。
このプロジェクトを通して、単純に見た目の良いデザインをつくることだけでなく、制約の中で何を優先するかを判断することが大切だと学びました。見た目の新しさだけでなく、再利用しやすいか、実装できるか、ユーザー体験を改善できるかという視点で考えるようになりました。
また、AIによってアイデアを素早く形にできるようになっても、速さだけでは良いデザインにはならないと気づきました。AIで生まれた時間を、ユーザーと向き合う時間に使い、仮説の検証や改善をすることが求められると思います。つまり効率化によって単に作業を減らすことができる文、我々デザイナーは重要な意思決定により多くの時間を使うことだと学びました。
