こんにちは、ももっぺです。ネットスーパーやECのUI/UXデザイナーをしています。
いま個人的に 「バーチャルネットスーパー」 というプロトタイプを作っています。
この記事は、その 第一歩として「複数人が同じ店内を同時に歩ける」ところまで実装した記録 です。
制作物のご紹介
ブラウザ上に2Dの売場を作り、アバターで歩きながら買い物ができるプロトタイプです。
現在できること：
- 売場を 歩いて 移動できる（11売場・66商品）
- 棚に近づくと商品が見られる／カートに入れられる
- ミニマップで店内のどこにいるか分かる
- 複数人が同じ店内に同時に入れる（今回実装した部分）
検索窓に商品名を打ち込むのではなく、売場をめぐりながら選ぶ 買い物体験を目指しています。
なぜ、それを作ろうと思ったのか
40件のアイデアから、最後に残った1つ
もともとの出発点は、「身のまわりの困りごとを片っ端から書き出す」 ことでした。
チームで洗い出したアイデアは40件ほど。そこから絞り込みを重ねました。
絞り込みの過程で、このバーチャルネットスーパーには人が集まりました。
理由を聞いてみると、返ってくるのは機能の話ではなく 「楽しそう」「触ってみたい」 という反応ばかり。
業務改善のアイデアを出していたはずなのに、いちばん反応があったのは、いちばん"仕事っぽくない"ものでした。
——と、このときの私は受け取っていました。
（この受け取り方が浅かったことに、あとで気づきます）
ただ、私がこのアイデアを最後まで残したのは「楽しそうだったから」ではありません。 **日々のUI改善の仕事で行き詰まっていた、2つの課題** に、まっすぐつながるアイデアだったからです。
📝 絞り込みの詳しい経緯は、noteに書きました
いちばんの自信作に、付箋が1枚もつかなかった
解決したい課題①：カテゴリーUIの議論には、決め手がない
ネットスーパーのカテゴリー一覧・商品一覧画面って、各社デザインがバラバラなんです。
いろんなサイトを見ていますが、「これが正解」と言い切れる画面にはまだ出会えていません。
各社違うのには理由があって、たぶん リスト型UIという枠の中では、正解が収束しない。
枠の中でA案B案を比べても議論が前に進まない、というのはUI改善を担当する私の日常のリアルな課題です。
利用者側からも、同じことを裏づける声を聞きました。
「ネットスーパーは頭を使うから疲れる。商品検索が面倒で、結局お店に行っちゃう」
| 実店舗 | ネットスーパー | |
|---|---|---|
| 買い方 | 見て選ぶ | 思い出して検索する |
| 商品との出会い | 歩いていたら目に入る | 検索しない限り出会えない |
| 頭の使い方 | 眺めながら決められる | 献立を先に決める必要がある |
ネットスーパーのUIは「早く目的の商品にたどり着く」検索効率を前提に設計されてきました。
それ自体は正しいのですが、枠の中の改善を続けても、この「疲れる」は消えないのではないか。
だったら一度、枠の外の選択肢を、手で触れる形にしてみたい。
これが1つめの動機です。
解決したい課題②：売場の知見が、プロダクトに流れ込む仕組みがない
私は制作会社出身で、小売の世界はいまの職場が初めてです。
同じ職場には、店長やお店のスタッフから本社に来たメンバーがいて、同じネットスーパーというプロダクトを一緒に作っています。
実はこのバーチャルスーパー、以前ひとりで試作しかけたことがあるのですが、
売場のレイアウトの「あるべき」が分からなくて手が止まりました。
なぜ入口に野菜があるのか。どの棚に何を置くべきなのか。
それは店舗出身のメンバーが体で知っていることで、私にはない知識です。
しかもこの知見、ドキュメントには書かれていません。
文書化された情報の属人化ならBotで解決できますが、こちらは 言語化すらされていない経験知の属人化 で、いまのところ画面設計に活かすルートがないんです。
逆に、それを画面の体験に翻訳する技術は私の側にある。
つまりこのアイデアは、どちらか一方の専門性だけでは完成しません。
作る過程が、そのままバックグラウンドの違うメンバーとの対話になる。そこにいちばん惹かれています。
そこで作りはじめました
店に行けない人に、店に行く体験を届ける をコンセプトに、
「歩いて買えるネットスーパー」のプロトタイプを作りはじめました。
完成品を提案するためではなく、議論のたたき台を手で触れる形にするため の試作です。
全体像と、今回挑戦した部分
作りたいものの全体像はこちらです。
- 2Dの売場を歩いて買い物ができる（v1〜v2：実装済み）
- 複数人が同じ店内に同時に入れる（v3）← 👈 今回の記事はここ
- 2Dの中に3D（v4）棚に近づくとシズル感が360°で見られる／レジ横のついで買い配置
- 反応収集（v5）店内ご意見ボード／行動ログ／回遊の可視化
全部を一度に作ることはできないので、「一人で歩く売場」を「みんなで歩ける売場」にする ところを第一歩に選びました。
理由は2つあります。
- 実店舗の楽しさには 「誰かと一緒に買い物に行く」 という要素が含まれているから
- 人に試してもらってフィードバックをもらうために、同じ空間に入って見せられる状態 が必要だったから
使った技術
| 技術 | 使いどころ |
|---|---|
| HTML / CSS / JavaScript（Canvas） | 売場の描画とアバターの移動 |
| Firebase Realtime Database | 複数人の位置情報をリアルタイムに同期 |
| JSON | 商品データ・プレイヤー情報の構造 |
| 生成AI（ChatGPT / Claude） | 実装の相談・コードの生成 |
| 独自ドメインでのホスティング | URLを渡すだけで誰でも試せる状態に |
画面の表示はHTML／CSS／JavaScript（canvas）で、同期の部分だけFirebaseに初めて挑戦 しました。
制作過程
つまずき①：そもそもリアルタイム同期をどう実現するか
「複数人が同じ画面にいる」を実現するには、自分の位置を誰かに伝え続ける仕組みが必要です。
サーバーを立てる方法も考えましたが、プロトタイプに時間をかけすぎない ことを優先して、Firebase Realtime Databaseを選びました。
決め手は 「あとで行動ログを残したい」 ことです。
位置の同期と、行動の記録を、同じ仕組みでまかなえる点が今回やりたいことに合っていました。
つまずき②：ルーム番号方式をやめた
最初は「ルーム番号を入力して同じ部屋に入る」形にしていました。
でも実際に人に試してもらおうとしたとき、「番号を伝える」という一手間が思った以上に邪魔 でした。
お店に入るのに合言葉は要りません。
そこで 全員が同じ1つの店舗に入る方式 に変更しました。
URLを開いたら、もうそこに誰かがいる。この状態のほうが、目指している「店に行く体験」に近いと感じています。
実装できた瞬間
別の端末で開いたアバターが、画面の中で動いた瞬間はうれしかったです。
「一人用の絵」が「場所」になった感覚がありました。
周囲からもらったフィードバック
店舗出身の上司から
売場づくりを現場で経験してきた上司に見てもらいました。
返ってきたのは、私が想像していなかった方向性の話でした。
「2Dの中に3Dがあるようなイメージ」
アナログの中にバーチャルな世界があるような感じ。やっぱりアナログはどうしても存在し続けて、それを急にバーチャルには変えられない。
完全にメタバースみたいにすることは、多分できないと思うんだよね。
可能なのかもしれないけど、メタバースが浸透しなかったのには、やっぱり何かの理由があったんだと思う。
そのうえで、具体的な提案ももらいました。
商品カテゴリーの棚に行った時に、3Dで商品のシズル感が分かる写真 を見ることができて、お店で見たときのような体験ができるものにしたい。
別の場でもらった視点
プロトタイプを見てもらった別の場で、こんな意見をもらいました。
俯瞰して店舗を見ることができるUI/UXであれば、レジ横のついで買いや、
関連商品を隣に置いてあげることで、一緒に買ってもらえるんじゃないか。
フィードバックから気づいたこと
なぜ、完全な3D空間を目指さないのか
「メタバースっぽいものは昔から何度も作られてきたし、高品質な3Dゲームが 世の中にある中で、開発コストの話で頓挫しやすい企画では」という指摘をもらいました。もっともだと思います。
ただ、私が目指しているのは完全なメタバース化ではありません。
上司(店舗出身)に相談したとき、こう言われました。「2Dの中に3Dがある、くらいのイメージ」。アナログの買い物は存在し続けるし、そこから急にバーチャルへは変えられない。過去にメタバースが浸透しなかったのには理由がある、と。
だから作りたいのは、空間全部を3Dで再現することではなく、買い物の中で本当に3Dが必要な一点にだけ、3Dを使うことです。棚に近づいたときにその棚だけがズームして、商品のシズル感や大きさが分かる。そこだけリアルに寄せる。歩き回る部分は2Dの俯瞰のままで十分だし、そのほうが売場全体を見渡せて、レジ横のついで買いや関連商品の隣接配置といった、実店舗の知恵をそのまま持ち込めます。
「全部をリアルに近づける」のではなく「どこをリアルに近づけるかを選ぶ」。そこがこの試作の設計方針です。
「2Dか、3Dか」で悩んでいたのが間違いだった
正直なところ、ずっと迷っていました。
2Dのまま磨き込むのか、思い切って3Dの没入型に挑戦するのか。
上司の一言で、その二択自体が間違いだったと気づきました。
答えは「2Dの中に3D」でした。
- 店内の回遊は2Dのまま → 気軽さ・軽さを失わない
- 商品との出会いの瞬間だけ立体感を足す → お店で手に取った感覚に近づく
全部を3Dにする必要はなかったのです。
「メタバースが浸透しなかったのには理由がある」という現場感覚に裏打ちされた見立ては、机上で悩んでいた私には出てこない答えでした。
「楽しい」を業務の価値に翻訳するヒントをもらえた
このプロトタイプを人に見せたとき、いちばん多かった反応は「楽しい！」でした。
うれしい反面、「楽しい」だけでは仕事の提案にならない ことが悩みでした。
「俯瞰UIならレジ横のついで買いができる」という視点は、その悩みへの答えの一つでした。
歩いてめぐる体験は、関連商品との出会いを増やす ——楽しさと売場の役割が、同じ線の上に乗りました。
制作してみた結果と、今後の方向性
「小さく作って人に見せる」の効果を強く実感した第一歩でした。
頭の中で考えていた段階では出てこなかった言葉が、実際に動くものを見せた瞬間に、相手の口から具体的な提案として出てきた のがいちばんの収穫です。
次にやることは決まりました。
- 棚ズーム演出＋商品の360°回転ビュー（まずは1〜2商品で試作）
- レジ横ゾーンに、ついで買い・関連商品の隣接配置
- 店内の行動ログ（立ち寄った棚・滞在時間・回遊ルート）の記録と可視化
- 体験後アンケートで、「検索するネットスーパー」と「歩くネットスーパー」の疲れの差 を検証する
最終的に目指しているのは、「探す疲れが減って、また歩きたくなる売場」 です。
引き続き作りながら考えていきます。