FUN TO SHOPPING ー 歩いて買い物ができるバーチャルネットスーパー
制作物の紹介
- 「歩いて買い物ができるネットスーパー」のプロトタイプを制作しました。
ブラウザでURLを開くと、上から見下ろした2Dの売場に入店できます。キャラクターを操作して店内を自由に歩き回り、棚に近づくと商品が並び、気になったものをカゴに入れてレジまで進める、という一連の買い物体験ができます。
次のような機能を実装しました。
- みんなで入店 … 同時に入った人のアバターが表示され、いま誰がどこを見ているかが分かる
- レジ横の衝動買い棚・関連商品 … リアルの売場にある「ついで買い」の導線を再現
- シズル棚 … 実際の売場写真の上に商品のホットスポットを配置し、写真から直接選べる
- 3D商品ビュー … 手に取る瞬間だけ3Dに（現在はりんご1点で試作中）
- 行動ログ … 誰がどこを歩き、何を見て、何をカゴに入れたかを自動で記録
使用技術
素のHTML / Canvas（売場・回遊）、Google model-viewer（3D）、Firebase Realtime Database（同時入店・行動ログ）、静的サーバーホスティング。コードは書かず、AIとの対話で実装しました。
なお、あえて完全な3D空間にはしていません。売場全体を俯瞰で見渡せること、移動のテンポが落ちないこと、URLひとつで誰でもすぐ入れること。この3つを優先し、リアルさよりも買い物のテンポを選びました。
制作してみた結果
一番大きかったのは、触れるものがあると議論が変わるということでした。
売場の言葉が出てきた
店舗を経験してきたメンバーに実際に歩いてもらうと、画面のワイヤーフレームを見せていたときには一度も出てこなかった言葉が、次々に出てきました。
- 「もっとシズル感がほしい」
- 「農産は白菜、水産はタラ、畜産は豚小間が特売。売場全体で鍋を想像させる」
- 「全体的にレイアウトが真逆です」
買い回り導線、第一磁石、ゴールデンゾーン、エンド展開、温度帯別、単品大量陳列。こうした売場の言葉が、触ってもらった瞬間から自然に飛び出してきました。どこにも書かれていなかった経験知が、はじめて言葉になったという感覚です。
未来のアイデアが出てきた
触ってくれた8人から、私ひとりでは思いつかなかったアイデアが出てきました。
- 家族でひとつのカゴ … ファミリーアカウントで、親は生鮮、子どもはお菓子売場へ。最後にまとめて会計。迷子にもならないし、買い上げ点数も増えるかもしれない
- テレビで、ゲーム機で … ゲームのように買い物する
- 階が増えて、デパートに … 家電もおもちゃも見て回れる
- 店舗のカメラとつながる … 実際の陳列がそのまま画面に映る
- お祭り会場をひらく … 期間限定の別会場ならワクワクがある
プロトタイプそのものへの感想ではなく、その先の話が始まったことが収穫でした。
