【イカしたUIを見る】Vol.2 これは発明だ！と思ったUIパーツ10選

こんにちは！UIデザイナーのsugasoとharuです。UIデザインの面白さにはまってしまった私たちは、定期的に「イカしたUIを見る会」（以下、イカ会）という課外活動を行っています。

前回の記事はこちら！

知れば知るほど面白くなるUIの世界を皆さんにもチラ見せしたい……ということで、連載の第2弾となる今回は「これは発明だ！」と私たちが感動したUIパーツについてご紹介します。

ミクロな視点でアプリを観察し、UIパーツ一つひとつに注目してみると、普段は気付けない面白い発見がたくさんありますよ。

※各UIパーツの名称は、公式で発表されているものではなく、私たちが便宜的につけた呼称になります。

関連記事：UIデザインとは？ 大切な5つのポイントや取り組み事例を紹介

Apple Booksのセミモーダル

Appleが提供する電子書籍アプリ「Apple Books」では、カルーセル状に並んだ本を押すと、そのままセミモーダルが立ち上がります。前の画面の一覧性を保ちながら、それぞれの本の詳細を見ることができるのが特徴的ですね。さらに下スクロールすることで、全モーダルへと滑らかに変化します。

このUIのポイントは、情報の段階的開示がスムーズに行われていることです。皆さんも、実際の本屋では、気になった本を手にとり、あらすじや価格を見ながら購入するかどうか検討することがあると思います。その動作に近い、一冊の本に意識を向け続けられる動線を違和感なくUIとして設計しながら、隣に置いてある本と簡単に比較ができます。

Aという本を詳しく知りたい人、BとCとで比べながら回遊したい人、それぞれのニーズにうまく応えたUIの表現のように思えました。

「My Nintendo」も、この表現に近いUIをアプリに取り入れています。Apple Booksとの違いは下スクロールによる全モーダルへの遷移をせず、常にカルーセルなセミモーダルを保持し続けていることですね。

おそらく、ブックアプリに比べて1ソフトの詳細情報が少ないことと、この場ですぐ購入できない（My Nintendo Storeへの遷移がゴール）ことから、詳細への遷移よりも一覧性を保つことを重視したのかもしれません。

WEARの検索結果カルーセル

続いて、ファッションコーディネートアプリ「WEAR」で見つけて感動したUIを。

WEAR内で検索を行い、検索結果から気になるコーディネートを選択すると、以下のようなモーダルUIが表示されます。

実はこれ、Instagramのストーリーのような横スワイプ式UIに、上記で紹介したブックアプリのカルーセルのようなUIが合体したものになっています。

この画面を横にスワイプすると、他のコーディネートを見ることができます。また、カードのように見えるこのUIは、下スクロールすることで全モーダル（ページいっぱいに広がるビュー）に滑らかに変化します。

このUIが秀逸だなと思ったのは、ここでどんな操作ができるのかをユーザーにさりげなく示しているところです。横スワイプできることは上部のインジケーターの存在によって、縦方向にスクロールできることは、下側にコンテンツが見切れていることによって表現されています。

スワイプでぱっぱっとコンテンツをめくって気になるものを探すというインタラクションは、TikTokやInstagramに代表される、現代のスタンダードの1つです。WEARはターゲットが若者中心のアプリだからこそ、このようなUIを採用できたのではないかと思います。

 

Amieのグラブハンドル

カレンダーアプリの「Amie」も発明的なUIを生み出していました。ファーストビューで大きく「カレンダー」と「タスク」の2つのビューに分割されているのが特徴です。間にあるグラブハンドル（ボトムシート表現に多用される棒状のUI）を上下に移動することで、より見たい情報をより大きく表示させることができます。

こうしたグラブハンドルは、ボトムシートUIで「ここをつかむことで操作できるとっかかり」としての役割を担っていることが多いです。ですがAmieは、UIとUIの間の余白にグラブハンドルを配置することで、両方のビューを自由に操作できるものとして応用しています。こうすることでSegmented controlsやタブでの移動をせずに、常にどちらも見えた状態で埋まっている予定や取り掛かるべきタスクを確認できるUIを実現しました。

また、グラブハンドルのあるスペースには追加ボタンや検索機能が配置されています。こうした情報の余白にUIをうまく敷き詰め、UIがうまく融けている状態を作り上げているのが、個人的に「やられた！」と思うポイントでした。

Roomsのハニカムレイアウト

3D空間を作ってシェアできるゲームアプリ「Rooms」には、世界中のユーザーが作ったRoomを一覧できるページがあり、これがハニカム状（正六角形を並べた構造）の珍しいレイアウトになっています。

このページを初めて見たとき、パースのかかった3D空間（六角形）が隙間なく並んでいるのが美しく、一瞬で心を掴まれました。

触り心地も非常に気持ちよく、ピンチイン/ピンチアウトで自由に縮尺を調整できるほか、360度どこまでもぐるぐると好きな場所を閲覧できます。また、画面を動かして表示範囲を移動すると、コンテンツ（Room）が少し遅れてポコポコと表示されます。

この表現によって、まるで暗闇の中を回遊しながらRoomを探しているような感覚になり、もっと先も見てみたいという気持ちになります。

もしこの一覧ページが、ただのグリッド状にお行儀よく並ぶレイアウトだったとしたら、Roomというコンテンツの魅力はおそらく半減してしまうでしょう。

このハニカムレイアウトは、ユーザーが作った個性あふれるRoomの魅力を最大限に活かして、楽しく作品を鑑賞してもらえるように、とても力を込めて作られたものだろうなと思います。

GOのピン

タクシー配車アプリの「GO」にも、何気なく使っていると気付かない良いUIがありました。それは、自分の位置からピンを伸ばして乗車位置を指定することができるというもの。自分がいる位置では乗車ができない複雑な地形や状況の際に、「ここで乗りたい！」を直感的に操作できるのがとても良いですね。

他のタクシー配車アプリでは、目的地の入力で乗車位置を指定することがメインの探し方ですが、GOのUIは、文字情報として意識してないもの（＝自分の現在地）は地図上で直感的に操作できるようにし、文字情報や目印となりやすいもの（＝目的地）はテキストで入力できるよう、最適なUIを用意しています。

PayPayの送金フローティングボタン

キャッシュレス決済アプリ「PayPay」の送金画面には、ユーザーの操作ミスを救ってくれるさりげない工夫があり、これも気の利く発明だなと思います。

誰かに送金するつもりで、ついチャット欄に金額を打ち込んでしまった。そんなユーザーの行動をアプリが寛容的に察して、「（チャット欄に入力された金額）を送る」というフローティングボタンを出してくれます。

私は、最近ではこの機能を便利に使っていて、わざと金額をチャットに打ち込んでワンクリックで送金しています。

Spotifyのプレビュー再生

TikTokなどを筆頭に、最近よく見る全画面のプレビュー再生。気付けば「Spotify」にも追加されていましたが、Spotifyの場合は視聴体験を向上させるUIとして名発明になっているなと個人的に感じました。

まず、TikTokを代表とする動画再生のプレビューを見てみましょう。これらはホームでいきなり再生が始まり、「特定の動画を選択せずに眺めていられる」特徴があります。こういった雑多に探す、もしくは情報を浴びるケースとして全画面でのプレビュー体験は有効にはたらくと見受けられます。

Spotifyでは、そういった最短距離で無作為に音楽を浴びる体験ではなく、自身が吟味した上で「まだ聞いたことがない音楽に気軽に出会える」体験としてプレビュー再生を応用しているように思えました。なのでSpotifyのプレビューUIは、アルバムやアーティストの詳細に遷移すると表示されます（ホーム画面でもプレビューが表示されますが、かなり下スクロールしないと表示されません）。

「いきなり上からしっかり聞くのは骨が折れるし、自分が好きそうな曲調かだけ知りたい」と感じるユーザーにとって、数分でアルバムを視聴できるのは心理的にも負担が少ないでしょう。下スクロール形式にしているのも、アルバムを上から下へとディグる様子にも似ているので、Instagramのストーリーのような横スワイプ式UIではないのも設計思想として素晴らしいなと思いました。

Tinderのスワイプ式して振り分け

言うまでもなく有名な事例ですが、Tinderアプリのスワイプ式UIも発明といえるでしょう。

Tinder UIともいわれるこのインタラクションは、左右のスワイプによってコンテンツを2つに振り分けるのが特徴で、マッチング系アプリの定番になっているほか、最近ではさまざまなジャンルのアプリで利用されています。

例えば、ビジネスマッチングアプリの「Yenta」や個人事業主向けの経理アプリ「Taxnap」、休日アイディアアプリ「なにする」などでもTinder UIのインタラクションが採用されています。

確定申告の際に使えるTaxnapでは、Tinderのように「マッチする」「マッチしない」という2択ではなく、支出項目を「これは経費である（ワーク関連の費用）」「これは経費でない（プライベートの費用）」という2択に振り分けることができます。

Tinder UIは、分かりやすい操作性とユーザーをハマらせる仕掛けに加えて、さまざまな用途に転用できるという点でも、やはり画期的なアイディアだなと思います。

Atmos.のヘルプボタン

習慣化アプリの「Atmos.」では、些細だけどこだわりを感じるUIがありました。ホーム画面にて、使い方が分からなくなったユーザー向けに、次に何をすると良いのかを表示する、いわゆるヘルプボタンがありました。Atmos.はヘルプボタンを押すとカードが追加され、読み終わったら表示を消すことができます。

本当に小さいことですが、私は良いなと思いました。他のアプリを触っていると、モーダルが立ち上がったりして、「そこまで大々的に出さなくてもいいんだけどな……」と思うことがよくありました。全部を読ませる必要がない、ある種強制力のないヘルプの使い方をしているので、ユーザーとしても安心してまた押せる感覚があるのは設計として上手だと感じます。

 

CapCutのツールボックス

動画編集アプリの「CapCut」でも、さりげなく気の利く素敵なUIを見つけました。

CapCutの「編集」タブでは、画面上部のアイコンから編集用ツールにアクセスできます（グレーのセルが並ぶ部分）。通常は編集ツールが4つほど並んでいますが、この画面を下向きにドラッグ、または「展開」のアイコンをタップすると、アコーディオン形式ですべての編集ツールが下に展開されます。

さらに、これらのツールは好きな順番に並び替えられるので、お気に入りのツール4つを前に並べて、TOP画面に表示するものを自分でカスタマイズできます。

Capcutは多機能でいろいろできるアプリなので、最初からすべての機能を見せてしまうとユーザーにとっては情報過多になりがちです。

そうではなく、よく使うツールには確実にアクセスしやすく、他のツールを使いたい場合は奥にあるものを取りに行くといった体験がここでは実現されています。Androidのクイック設定などでもみられるこのUIは、まるで自分で使いやすいように整理できる道具箱のよう。

UIデザイナー目線では、こうした段階的開示やカスタマイズ機能を、シートやモーダルを一切使わずモードレスで実現しているところがいいなと思います。モードレスにすることで、ユーザーの自然な行動を邪魔しないUIになっているところが推せるポイントです。

私たちの考えるこれは発明だ！と思ったUIとは

いかがでしたか？私たちは今回、「特定のケース」にのみ輝くUIだけでなく、「これって他の情報でも、表現として応用できるのでは？」と、新しいスタンダードになり得る可能性のあるUIを「発明的なUI」として紹介させていただきました。

皆さんが普段触っているアプリやUIの中にも、よく目を凝らしてみると新しい発見や気付きがあるかもしれません。そんなイカしたUIを、一緒に探していきましょう。それでは次回もお楽しみに！

執筆者紹介