「ボタン」は非常に便利な装置です。
レバーのように握る必要もなければ、ダイヤルのようにつまみを2つの指でつまんでひねる必要もありません。
指一本で押すことができればいいのです。

Webの世界でも、ハイパーリンクテキストからスタートし、画像、CSSと形を変化させながら、現在も多くの「ボタン」が使われています。

ただ、テクノロジーがさらに進化すると、「ボタンレス」な(物理ボタンのない)ユーザーインターフェイスが登場するのではないかと多くの人々が唱えています。

もしボタンがないユーザーインターフェイスを採用する場合、何に気をつければいいのでしょうか。

今回は、ボタンレスなデザインの概要をご紹介するとともに、ボタンレスなUIを考えるために知っておきたい代替案をご紹介します。

「ボタンレス」なデザインとは?

「ボタンレス」なデザインとは、「ボタンとは無縁なユーザーインターフェイスを兼ね備えたデザイン」ということです。

Microsoftの複合現実ヘッドマウントディスプレイHoloLensやAmazonのスマートスピーカーであるAmazon Echo、そしてAppleのiPhone Xなど、現在登場している最新テクノロジーの多くは、かつての製品よりも圧倒的に物理ボタンが少なくなっています。

物理キーボードのないMacBookが登場するのも、ハンドル以外は音声で操作する自動車が現れるのも時間の問題かもしれません。

「ボタンレス」と聞いた時、上記のようなプロダクトのことをイメージするかもしれませんが、Webデザイン・アプリデザインにおいても「ボタンレス」なデザインはこれから加速すると考えられています。

ボタンレスなUIを考えるために知っておきたい代替案5選

1. 縁のタップやフリック操作

iPhone Xの登場により、これからますます全画面的なアプリケーションが増えてくると予想されます。
全画面に画像や動画のようなコンテンツを配置する場合、ボタンをはじめとするグラフィカルなユーザーインターフェイス(GUI)の配置を最小限に抑えるほうがユーザーコンテンツへの没入度が高まります。

その場合にどのようにすればユーザーの没入体験を妨げることなく操作することができるかを、UXデザイナーは考える必要があるでしょう。


画像引用元:Unity 3D

例えばPlayStation VRなどのVRヘッドセットでは、コントローラーを持たない代わりに、一定時間同じ方向を向くことで、クリックの代わりをするという挙動を実現しています。

画像引用元:YouTube

インスタグラムのショートムービー投稿機能であるストーリーでは、左右の縁にタップで触れることで次のストーリー(あるいは前のストーリー)に進むことができます。

はじめのうちはユーザーはボタンがないことに戸惑うかもしれませんが、オンボーディングで使い方を教育したり、似たような動作のアプリケーションが増えれば、このようなボタンレスなデザインであってもユーザーは使い方を受け入れてくれるでしょう。

2. ジェスチャー認識


画像引用元:Dribbble

文字をカンバスに書くことで文字認識を行うアプリケーションも広く使われています。
スマートフォンをはじめとして、タッチスクリーン式のデバイスはますます多くなっているので、指を使ったジェスチャー認識はこれから主流になっていく可能性すらあります。

ピンチをしてズームしたり、スワイプしてアートワークをスライドさせたりと、ユーザーはさまざまな挙動によってアプリケーションを使いこなしています。
例えば上の画像にあるコンセプトのように、いいねを行うのにハートマークを描けばできるようになれば、非常に便利です。

インスタグラムではまだハートマークを描いたらいいねをするまでにはいたっていませんが、すでにダブルタップでいいねができるようになっています。
これも、ある種のボタンレスなジェスチャー認識だと言えるでしょう。

3. 音声認識


画像引用元:Dribbble

SiriやCortana、AlexaやGoogleアシスタントといった、音声認識システムを使ったスマートスピーカーが人気を博しています。
こうしたデバイスにはほとんどボタンがついておらず、ほぼ全ての挙動を音声だけで済ましてしまいます。

音声もユーザーインターフェイスとして考えると(VUI)、ボタンをあえて置く必要すらなくなってきます。
音声認識を一般開発者でも使えるように、SiriKitやAlexaのSkill Kitなどがすでに公開されているため、ますます多くのアプリ音声認識技術を採用することになるでしょう。

4. 顔認識・視線認識

海外では、「笑顔になることで支払いが完了する」という表情認識システムをAlibabaやKFCが取り入れています。
もちろんそこにはカメラだけがついており、ボタンはどこにもありません。


画像引用元:engadget

また、近年では、FOVEに代表されるように、視線追跡機能つきのVRヘッドセットも登場しています。


画像引用元:talkaboutdesign

iPhoneの顔認証「FaceID」の技術も、ある意味でボタンレスなユーザー体験を実現しています。
こうした顔認識・視線認識の技術とSiriのような音声認識技術が組み合わされば、スマートフォンでもスマートスピーカーでもない、第三のデバイスが登場するかもしれません。

5. フィジカルアクション

2015年に日本のスタートアップRodgerが発売した「Ring Zero」は、指輪型のウェアラブルデバイスを指にはめて動かすことで、さまざまなデバイスを操作することができる画期的なものでした。

また、まだLINEが登場する以前の、iPhone 3GS時代に主流だった連絡先の交換アプリ「Bump」では、iPhone同士を衝突させることで連絡先交換を行うフィジカルアクションを採用していました。

これらは一つのフィジカルアクションの具体例に過ぎませんが、iPhoneを振ったり、特定のアクションを行うことによって、決済が完了したり、ファイルを転送したりという処理を行うアプリは増えてくるかもしれません。

まとめ

ボタンがなければ操作できないというイメージは過去のものになりつつあります。
歴代のiPhoneにあった物理的なホームボタンも、最新機種のiPhone Xでは採用されていません。
ボタンは減らされる方向へとシフトしています。

そうした中で、ボタンを配置するアプリを作成するのか、ボタンレスに挑戦するのかは、デザイナー次第です。
あくまで優先するべきは「自分のサービスのターゲットユーザーにとって使いやすいかどうか」です。

今回ご紹介した代替案はあくまでもケーススタディに過ぎませんが、ぜひこうしたデザインアプローチも選択肢の1つとして持っておくと良いでしょう。