Agentic UX 10-foot UI Voice AI Multi-device

Amazon Shopping on Fire TV Fire TV 向け Amazon ショッピング

A living prototype of agentic commerce for the living room. D-pad browse, Alexa voice shopping, and a phone that becomes the remote, keyboard, and mic — all paired in one scan. リビングルーム向けのエージェンティック・コマースの動くプロトタイプ。D-pad での閲覧、Alexa 音声ショッピング、そしてスマートフォンがリモコン・キーボード・マイクになる。すべてがワンスキャンでペアリングされる。

Context 文脈 Personal R&D prototype 個人の研究用プロトタイプ
Role Design & Engineering デザイン・エンジニアリング
Year 2026
Stack スタック HTML/CSS/JS · Firebase · Web Speech API
POC
Concept prototype — not affiliated with Amazon コンセプトプロトタイプ — Amazon 非公式

This is an independent proof of concept that reimagines Amazon shopping on a TV interface. Product data, prices, and voice replies are simulated for demonstration. The Amazon logo and product images are used for illustrative context only. これは TV インターフェース上の Amazon ショッピングを再想像した、独立した概念実証プロトタイプです。商品データ、価格、音声応答はデモ用にシミュレートされています。Amazon のロゴと商品画像は、説明用の文脈でのみ使用されています。

Product Walkthrough プロダクトウォークスルー

A 60-second overview of the Fire TV shopping concept, the Alexa voice flow, and the phone-as-remote pairing experience. Fire TV ショッピングコンセプト、Alexa 音声フロー、そしてスマホをリモコンにするペアリング体験を紹介する 60 秒の概要動画。

Video generated with Cloud Design and hosted on Cloudinary for adaptive streaming across devices. Cloud Design で生成した動画を、デバイスに応じたアダプティブストリーミングのために Cloudinary でホスティング。

Live Dual-Device Simulator デュアルデバイス・ライブシミュレーター

The TV runs the Fire TV shopping experience. The phone mockup on the right is a live remote — or scan the QR code on the TV with your own phone to control it for real. Use arrow keys, Enter, Esc, V for Alexa, and R to show the pairing QR. TV が Fire TV ショッピング体験を実行しています。右側の電話モックアップはライブリモコンです — または、TV の QR コードを実際のスマートフォンでスキャンして、本当に操作することもできます。方向キー、Enter、Esc、V で Alexa、R でペアリング QR を表示します。

Try it: click inside the TV area, then use arrow keys to navigate, Enter to select, Esc to go back, and V to speak to Alexa. On mobile, the phone mockup works as a touch remote; on desktop, the QR code lets a real phone take over. 試してみる: TV エリア内をクリックしてから、方向キーで移動、Enter で選択、Esc で戻る、V で Alexa に話しかけます。モバイルでは電話モックアップがタッチリモコンとして機能します。デスクトップでは、QR コードを使って実際のスマートフォンをコントローラーにできます。

Test it yourself — live site ↗ 実際に試す — ライブサイト ↗ Open simulator full screen ↗ シミュレーターを全画面で開く ↗

The Problem 課題

Shopping on a TV should feel effortless from the couch. But text entry is painful, browsing with a tiny remote is slow, and voice alone can't always show enough context. The experience gets stuck between "lean-back" convenience and "lean-in" detail. TV での買い物は、ソファから気軽にできるはずだ。しかし文字入力は苦痛で、小さなリモコンでの閲覧は遅く、音声だけでは必要な文脈を示しきれないこともある。体験は「リラックスして使う」利便性と「じっくり見る」詳細の間で行き詰まっている。

The Approach アプローチ

I designed a 10-foot commerce interface where the TV stays the stage, and the phone becomes the best possible input device. D-pad navigation handles discovery. Alexa voice handles intent. And when you need a keyboard, precise pointer, or private mic, your phone is already paired and ready — no download, no login. TV を舞台に据え、スマートフォンを最適な入力デバイスとする 10ft コマース UI を設計した。D-pad ナビゲーションで発見し、Alexa 音声で意図を伝える。そしてキーボード、精密ポインター、プライベートマイクが必要なときは、すでにペアリング済みのスマートフォンが待機している — ダウンロードもログインも不要だ。

Tools & Methods ツール&手法

10-foot UI Spatial Focus Voice UX snap-pair Firebase RTDB Web Speech API OKLCH Vanilla JS
01
Unified lean-back and lean-forward modes in one coherent flow リラックスモードと詳細モードを一つの流れに統合
02
Voice-first search and checkout with spoken confirmation 音声優位の検索と、音声確認でのチェックアウト
03
Phone remote with three navigation modes plus hold-to-talk mic 3 つのナビゲーションモードとホールドトークマイクを持つスマホリモコン
04
Self-contained demo, runnable from any static host 自己完結型デモ — どの静的ホストでも実行可能

What the prototype does プロトタイプでできること

TV shopping, redesigned for 10 feet 10ft 用に再設計された TV ショッピング
Home rails, product pages, filters, cart, and checkout — all laid out for distant viewing with oversized focus rings and high-contrast dark cinema UI. ホームレール、商品ページ、フィルター、カート、チェックアウト — すべて遠距離視聴向けに、大きなフォーカスリングと高コントラストな暗色シネマ UI でレイアウト。
Alexa for Shopping voice flows Alexa for Shopping 音声フロー
Press V or the mic button and say things like “show me chocolate protein,” “add this to my cart,” or “checkout.” A local intent parser routes the command. V またはマイクボタンを押して、「チョコレートプロテインを見せて」「カートに入れて」「チェックアウト」などと話す。ローカルの意図パーサーがコマンドを振り分ける。
Phone becomes remote, keyboard, mic スマホがリモコン・キーボード・マイクに
Scan the QR code on the TV and the phone becomes a D-pad, joystick, trackpad, text search box, and push-to-talk Alexa mic — instantly. TV の QR コードをスキャンすると、スマートフォンが即座に D-pad、ジョイスティック、トラックパッド、テキスト検索ボックス、プッシュトークの Alexa マイクになる。
snap-pair underneath 裏側は snap-pair
The pairing layer is my open-source snap-pair pattern: short code as a rendezvous handle, server-validated room membership, presence heartbeat, and automatic cleanup. ペアリング層は私のオープンソース snap-pair パターンを使用:短いコードを待ち合わせハンドルとし、サーバー側で検証されたルームメンバーシップ、プレゼンスハートビート、自動クリーンアップを備える。
Adaptive cross-device state 適応型クロスデバイス状態
Cart count, current screen, and search context are mirrored to the phone in real time, so the remote always knows what the TV is showing. カート数、現在の画面、検索文脈がリアルタイムでスマホにミラーされるため、リモコンは常に TV が何を表示しているかを把握している。
Zero build tooling ビルドツール不要
Pure HTML, CSS, and JavaScript. No bundler, no npm, no framework lock-in. It runs from a folder or any static host. 純粋な HTML、CSS、JavaScript。バンドラーも npm もフレームワークロックインもなし。フォルダーまたは任意の静的ホストから実行できる。
Deliverables 成果物
TV app, phone remote, voice parser, snap-pair integration TV アプリ、スマホリモコン、音声パーサー、snap-pair 統合
Role
Design & Engineering デザイン・エンジニアリング
Year
2026
Live demo ライブデモ
← Agentic UX ← Agentic UX Next: AI Tools → 次へ: AI Tools →
|