【イカしたUIを見る】Vol.5 スマホから飛び出した体験設計！リアルの世界でこそ輝くUI
こんにちは！UIデザイナーのsugaso、haruとエンジニアのchigeです。UIデザインの面白さにハマってしまった私たちは、定期的に「イカしたUIを見る会」（通称：イカ会）という課外活動を行っています。
前回の記事はこちら！
【イカしたUIを見る】Vol.4「誰かのメガネ」をかけると見える、気の利いたUI
UIデザインと聞いてまず思い浮かぶのは、多くの人が手にしているスマートフォンやPC、タブレットといった身近なデバイスの画面です。代表的なガイドラインである「Human Interface Guidelines」や「Material Design」も、その対象はこうした「手元の画面」を中心に考えられてきました。とはいえ、UIデザインの世界はそれだけにはとどまりません。
今回私たちは、手元にあるデバイスから離れて街へ飛び出し、人々の生活の中にあるさまざまなUIを観察してみました。街に出て視線をぐいっと上げてみると、飲食店での注文、買い物、荷物を預けるといった何気ない行為の裏にも、その体験を支えるために設計されたUIがあることに気付きました。
スマホやPCから離れて外の世界で見つけたUIには、UIのスタンダードを超えた面白いアイディアがあったり、ユーザーの特定の状況に合わせた作り手の工夫が溢れていました。今回はそんな「外の世界のイカしたUI」を見てみましょう。きっと、UIデザインの面白さを再発見するヒントが隠れているはず。
1. デジロー
役割を棲み分けた3つのレイヤー
「デジロー」は、回転寿司チェーンであるスシローが店舗で提供する、大型ディスプレイに映し出される注文システムです。「回転レーン×デジタルビジョン」をコンセプトに、ただ注文するだけでなく、回転寿司らしいエンターテインメントを体験できるよう工夫されています。
デジローには大きく3つの基本画面があります。回転寿司の世界観を映す「回転寿司モード」、お寿司やドリンクを選ぶための「注文パネル」と、すべてのメニューをタイル状に並べて探索できる「すしナビ（探索モード）」です。
こちらがメインとなる回転寿司モード。大画面ならではの奥行きを利用した三層構造の設計がイカしているなと思いました。
- 奥のレイヤー：
寿司屋を連想させる暖簾や障子の背景レイヤー。操作はできませんが、キャンペーン情報などが映し出され、世界観の演出と宣伝効果を両立しています。 - 中央のレイヤー：
寿司が流れる回転レーン。これによって「回転寿司に来ている」という臨場感が再現されます。タップして直接注文することもできます。 - 手前のレイヤー：
注文パネル。奥の回転寿司ビューを完全には隠さず、手前にパネルが立ち上がるので、まるで本物の回転寿司レーンを前にタブレットを操作しているような感覚になります。
効率ではなく「思い出になるか」を考えられた注文体験
注文パネルは画面上に2つ表示でき、テーブルを挟んで左右両方から操作できるのが特徴です。一般的な注文画面では、左上からメニューが並んで右下に注文ボタンが配置されますが、デジローではその動線が左右対称に設置されています。
つまり、左右どちらの席に座っていても、パネルの近い方から自然にメニューを探し、最後に遠い方へ指を伸ばして注文するという流れになっているのです。
このパネルはサイズ感も絶妙だなと思いました。並んでいる商品画像が少し大きく、席の一番遠いところからもしっかり見えるサイズになっています。手前の人が「これ頼む？」と声をかけながらみんなで注文できるので、パネルを触っていない人にも体験を共有できます。
もう一つユニークなのが「すしナビ」と呼ばれる探索モード。ここでは商品がランダムにタイル状で並びます。検索性は高くなく、食べたいものが決まっているときには正直不便です。
しかし、あえて無秩序に見せることで「こんなメニューがあるんだ」という偶然の発見が生まれやすくなります。効率的でなくとも、体験としては新しい価値を提供しているのが面白いところです。
デジローの3つの基本画面は一貫して「メニューを選んで注文する」という目的に向かって、モードやレイヤーを切り替えながら多様な注文体験を提供しています。効率的に注文を選ぶだけでなく、「スシローでの時間を楽しい思い出にしてもらう」ことを大事にしているのだと感じさせられます。
そしてそのテーマを達成する上でも非常に自然かつユニークなイカしたUIを提供しているように思います。スシローに来ているという没入感の演出、誰かとメニューを選ぶことの楽しさ、出会ったことのないお寿司を食べるワクワク感など、ただ無機質に注文するのではなく、操作体験の中でどう世界観や付加価値を作るかを考えるための好例だと感じました。
利便性だけ追求してもたどりつかない、「作り手の『Humanity（人間性）』が感じられる」デザインです。
2. レジゴー
カートから始まる導入設計
「レジゴー」は、イオンのお買い物専用アプリです。来店客自身がレジゴーアプリのカメラで商品のバーコードをスキャンし、専用レジで会計できます。
レジゴーを取り上げたのは、お買い物の体験全体の工夫がデジタルUIに閉じたものではなく、実空間に染み出している点がイカしているなと思ったからです。お買い物の最初から最後まで、ていねいに設計されています。
レジゴーがインストールされたスマホが実店舗の一角にケース付きでスマホごと置かれており、カートにもレジゴー用のスマホホルダーがついています。棚からスマホを取り、カートにセットして使用します。
カートのホルダーは明らかにスマホがセットできる見た目で、レジゴーのロゴと共に簡単な説明が書いてあり、初来店のユーザーでも分かりやすくなっています。このようにカートに工夫を施すことで、カートを使う時にレジゴーを使うきっかけを生み出しています。
売り場で商品をスキャンする体験
基本的な使い方は、商品のバーコードをレジゴーのカメラでスキャンしてカートに入れるだけです。通常の購入体験では、商品のスキャンはお会計時にまとめて行いますが、レジゴーではその手間を商品を取る時にシフトさせることで、会計時の混雑緩和に効果が期待できます。
またその場で値段が集計されるため、ユーザーは予算をいつもより意識した買い物ができ、節約家の人にもピッタリです。
デジタルUIはシンプルにまとまっていて、分かりやすいです。いつも何かとアプリの使い方を聞いてくる母も迷わず使うことができています。割引価格にも対応したUIになっており、対象商品は二重赤線で訂正されています。割引後の値段がすぐ分かるのでお得感が増しているようにも感じました。
画面下部にはスキャンボタンなどの基本的な操作対象が集まっており、購入点数や合計金額は上側に表示されています。ホルダーに設置したまま操作する都合上、カメラが出ているスマホ上部にホルダーの支えがないため、下側にボタンを配置した方が操作が安定するのでしょう。
お会計レジに行くと、足元にレジゴーのマークが目に入ってきます。さまざまなタイプのレジがある中で迷うことなく該当のレジにたどり着けました。看板にもレジゴーのマークが大きく配置されており一目瞭然です。
このように、店内回遊時にスキャンできたり、レジ位置の把握がしやすくなっているなど、レジゴーは一貫してスーパーでの購入体験の負を解消しています。こうした全体の購入体験がデザインされているていねいさをユーザーが感じることで、2回目以降も使ってみようと価値を感じてもらえるのかもしれません。
改札のメンタルモデルを使ったお会計プロセス
レジに近づくとその手前に、レジゴー専用の駅の改札のようなゲートがあります。改札機にICカードをかざすように、アプリでお支払いコードをスキャンすると、スマホにレジ番号が表示されました。スマホで読み取った商品情報を会計機に送信するために必要なステップだろうと推測しますが、改札のモチーフを使って分かりにくさを最大限減らしているのでしょう。
やっていることはカメラを起動してQRコードを読み込むという動作ですが、いつも自然に行っている「改札にタッチ」という動作のメンタルモデルを利用している点が面白いと思いました。あとはゲートの先にあるレジの端末でお会計を済まして、スマートフォンを返せば終わりです！
UIデザインというとデジタル空間の使いやすさを設計するものと捉えられがちですが、あくまでもユーザーのリアルな利用シーンと切り離せないものであることが分かります。
お買い物アプリを作ろうとして生まれたのではなく、お買い物体験のさまざまな課題の解決策としてスマホの使用が選ばれたように思います。どんな課題を解決するのか、どんな体験を提供するのかについて、お買い物の体験全体を通してしっかり考えられていると感じました。
3. UNIQLO セルフレジ
近年、多くの店舗でセルフレジが普及し、「商品をスキャンして支払う」という体験はもはや当たり前の光景になりました。しかし注意深く観察してみると、店舗ごとにフローやステップは異なり、その違いが快適さや使いやすさに直結していることが分かります。
筆者がさまざまなセルフレジを利用する中で、最も快適で、いや、もはや意識すらしないほど自然に決済が完了したのはUNIQLOでした。その理由としてよく語られるのは、「カゴを置くだけで一括読み取りができる」RFIDチップの仕組みです。
この技術は非常に便利ですが、UNIQLOのセルフレジの真価はそこにとどまりません。注目すべきは、RFIDによる自動認識を前提に、ユーザーが迷わず自然に購入を終えられるよう、UI/UXの細部まで設計されていることです。以下では、実際の会計プロセスを追いながら、UNIQLOのセルフレジがどのようにして「自然な購買体験」を生み出しているのかを見ていきます。
カゴを置く体験すら計算されたレジ
まず、ユーザーはカゴ（もしくは商品）を持ちながら店内を回った後、会計時にレジの右側にある窪んだ場所へカゴを置きます。このエリアは、スーパーのレジのような平坦な板ではなく、すっぽりとカゴが入りそうな形になっていることで、自然と「ここに持っているものを置けそうだ」と思わせる仕掛けになっています。
UNIQLOのセルフレジでは、商品タグを正確に読み取れるよう、指定の場所へ商品を置いてもらう必要がありますが、このくぼみはユーザーの動作を自然に誘導していると思います。このようにタブレット以外の場所にも工夫が散りばめられています。
不要な選択肢をユーザーに提示しない、削ぎ落とされた体験
カゴを置いた後の操作は、基本的にタブレット上で完結します。中央の「お会計をはじめる」を押すと、すぐに会員証のスキャン画面へ遷移します。
一般的なレジ体験では「ポイントカード／会員証はお持ちですか？」と確認した上で、「持っている／持っていない」を選択させるプロセスが挟まることが多いです。対してUNIQLOのレジ体験では、会員証を持っていることを前提に、即座にスキャン画面を提示します。これは「宣言 → スキャン」という冗長な流れを省き、「持っている＝スキャンする」というシンプルな行動モデルをそのままUIに落とし込んでいると言えます。
もちろん、会員証を持っていないユーザーも想定されています。画面右下の「スキップ」を押せばそのまま次へ進めますし、スキャン画面が一瞬表示されても不快感は少ないでしょう。
むしろUNIQLOのように日常的に使用することの多いブランドであれば、「せっかくだから登録してみよう」と考えるきっかけになる可能性すらあります。ここには、ユーザー体験と店舗メリットの双方に寄与する“良いデフォルト”設計が見て取れます。
さらにスキャン画面自体も工夫されています。単にカメラを起動するだけでなく、画面左にイメージ図、スキャンエリアの下にイラストを配置することで、初めてのユーザーでも直感的に操作方法を理解できるようになっています。こうした補助情報が「誰でも迷わず使える体験」を支えています。
人間がやらなくてもいいことは徹底してさせない設計思想
次のステップは商品の読み取りです。先ほど述べたRFIDチップのおかげで、ユーザーは自分で商品のスキャンを行う必要はなく、システムが読み取った商品リストに誤りがないかを確認するだけで済みます。
私が特に優れていると感じたのは、この徹底した簡潔さです。一般的には「靴下を3点購入したのに2点しか読み取られなかった場合」に備えて、ユーザー自身が数量を修正できる画面を用意するなど、“柔軟性”を重視した設計が検討や意思決定がされがちです。
しかしUNIQLOはそのような機能を一切設けていません。その代わりに、スキャン精度を高めることで、ユーザーに調整を強いない体験を成立させています。これは「人間がやらなくてもいいことは徹底してさせない」という強い設計思想が感じられる部分です。「ソフトウェアで補う」のではなく「技術の質で解決する」視座の高さは参考になります。
また、ナビゲーションに関わるUIもていねいです。ステップを進む・戻るボタンは矢印型で「時間軸の流れ」が視覚的に伝わりやすくなっています。さらに「やり直し」は過去に戻るのではなく“現在を繰り返す”操作であることを示すためにフラットな形状で表現されています。こうした細部へのこだわりによって、自然とユーザーが行動できるようになっています。
ユーザーの心理を深掘りした選択肢の提示方法
次はショッピングバッグの購入選択画面です。ここでの選択肢設計とアイコンの工夫も非常に秀逸です。
一般的なUI設計では、肯定的なアクションは右、否定的なアクションは左に配置されますが、UNIQLOは逆に「いいえ」を右側に配置し、合わせて矢印のアイコンを使って「次へ進む」ことを示唆しています。
試しに、基本設計に従い「はい」を右に、「いいえ」を左に配置し、アイコンも「バッグ不要」にしたUIを作ってみました。一見問題なさそうですが、マイバッグを持つユーザーにとっては、そこで一瞬の思考コストが発生します。
なぜなら、「いいえ」というラベルは否定を意味する一方、実際の行動は“購買フローを継続する”という肯定的な意味も含むからです。つまりラベルはネガティブ、でも本来の行動はポジティブという非対称性があり、ユーザーは「これで進んでいいのだろうか」と一瞬ボタンを押すのをためらってしまう恐れがあります。
さらに多くのユーザーは「右＝進む／肯定」と学習しているため、「いいえ＝左」を押して次に進むという操作では、期待とUIの挙動にズレが生じます。この齟齬が“迷い”を生み、結果的に体験をわずかに停滞させてしまいます。
そもそも「ショッピングバッグを購入する」という行為は購買体験のメインではなく、あくまでオプションです。マイバッグを持参している人にとっては「買わない」＝「この工程は自分に不要、早く次へ進みたい」という心理状態が自然でしょう。つまり、本当に提供すべき体験は「バッグは要らない」ことの明示ではなく、「要らないなら次に進める」ことを直感的に理解させるUIなのです。
そのため、UNIQLOは「いいえ」を右に配置し、矢印アイコンで「先に進む」動きを強調しました。結果としてユーザーは「不要なら進むだけ」と自然に理解できます。さらに配色も巧みです。プライマリーカラーの赤は「はい＝購入」にのみ使われ、UNIQLOで商品を買うというポジティブなニュアンスに結びつけられています。
この設計は、単なるUIルールの適用ではなく、「早く会計を済ませたい」というユーザー心理と購買体験の本質に寄り添った意思決定の表れだと言えるでしょう。
レジ会計は「お客様への最後の接客」
最後のステップは支払い方法の選択です。すべてプライマリーカラーである赤いボタンで構成されていますが、支払い手段ごとにグルーピングされているため、視覚的な混乱はありません。むしろ「この中から選べばよい」とユーザーが瞬時に理解できる明快なUIになっています。
また、画面左側に金額を常に表示し続けている点も秀逸です。セルフレジは誤操作やスキャン漏れが起こりやすい環境ですが、金額を隠さず提示し続けることで、ユーザーは自然と確認を繰り返し、違和感があればすぐに取引を中止できます。短時間の体験に“心理的安全性”を埋め込んでいる好例です。
UNIQLOのセルフレジ体験全体を通しても、所要時間はおよそ30秒ほど。しかしUNIQLOレジのイカしたポイントは速さそのものではなく、「細かな不自然や迷いを生まない」という点にあります。誰もレジ会計を長く続けたいとは思いません。いかにスムーズに、迷うことなく完了できるか。その思想はタブレットUIに限らず、カゴの置き場や案内POPまで含めたレジ全体に貫かれています。
レジ会計は「お客様への最後の接客」と言われます。UNIQLOのセルフレジは、効率性と安心感を両立させることで、“UNIQLOらしいホスピタリティ”を体現しているのかもしれません。
4. ANA Baggage Drop
物理作業とUI操作をシームレスに行き来する工夫
「ANA Baggage Drop」は、航空会社のANAが提供する自動手荷物預けサービスです。これによって、手荷物預けを含むチェックイン手続きのすべてをカウンターに並ぶことなく完了できます。
このUIでイカしているなと思ったのは、荷物を置くといった物理的な動作と、画面上での操作をシームレスに行き来できるよう誘導している点です。
まず機械の前に立つと、床に大きく「荷物を壁の前につけてください」と書かれたメッセージが目に入ります。ディスプレイにも同じ指示が表示されるため、画面に従って進めばよいことが自然と分かります。 
機械に荷物を入れるとセンサーが反応して自動的に次のステップへ移行します。カメラ部に搭乗券をスキャンすると、今回の便は強風の影響で天候調査中だったため、「それでも荷物を預けますか？」と確認ダイアログが表示されました。
「荷物を置く」といったセンサーで検知できるステップは自動で次へ進む一方、「天候調査中だが手続きを進めるか」といったユーザーに判断を求めるステップは、UI上で明確に意思を確認されました。自動と手動の役割分担の具合がスマートな設計だなと感じました。
画面の下半分で操作手順を示すアニメーションは、色をなくしたスケルトン表現になっています。あくまでも上部のテキストを操作誘導のメインに据え、下部のアニメーションは目立ちすぎないようにデザインされているのだと感じました。
全体の色を控えることで自然とテキストに視線が集まる一方、アニメーションは、3Dのていねいな描画と自然なカメラワークによって、分かりやすさもしっかり担保しています。
「スムーズな簡潔さ」と「誤解を生まないていねいさ」を両立するには？
よく見ると、テキスト表現も特徴的です。一般的な誘導テキストでは「大きなタイトル＋小さな補足」と強弱をつけてメッセージを伝えることが多いですが、ここではすべて同じ文字サイズで統一されています。読む人によって誤解を生まないよう、全文を通しで読んでもらうためのレイアウトだと思いました。
画面上部には1〜5の段階を示すステッパー（ウィザード）が配置されています。飛行機に乗る前に時間を気にしているユーザーにとって「あとどれくらいで終わるか」を見通せることは大きな安心につながります。
また、地味なところですが、テキストの左にある矢印アイコンが、下を見てほしいときには下向きに、左下を見て欲しい時には斜めに向きが変わっており、自然な視線誘導を助けているのにもグッときます。
「ANA Baggage Drop」を利用する人は、搭乗時間という明確なゴールに向かっている最中であり、多くは急いでいたり、余計な時間をかけたくないと思っています。また、自分の大切な荷物を預けるという重要度の高い行為を自力で完了しなくてはいけません。
だからこそ、UIはシンプルで簡潔であることが求められますが、一方で誤解を生まないていねいなコミュニケーションも欠かせません。このUIには、その両方を実現するための細やかな工夫が随所に盛り込まれていると感じました。
さいごに
私たちは、普段あらゆるUIを無意識に使いこなしています。ですが、そうした「無意識の操作や、考えずに読み解いている情報」の伝え方にこそ、イカしたUIのヒントが隠れています。今回紹介した中で気になるUIがあったら、ぜひ実際に店舗や施設で触れてみてください。日常に潜む「伝え方」を注意深く観察し、体験を通じてこそ、デザインの工夫や面白さがぐっと身近に感じられるはずです。
それでは、次回もお楽しみに！
執筆者紹介
