INDEX of This Page
手段が変われば、UIも変わる。

皆さん、今日は「入力手段」をテーマにお話を伺います。よろしくお願いします。

よろしくお願いします。入力手段が変わると、ユーザーインターフェースも変わるんですよ。

確かに、普段は意識しませんが、いろいろな操作方法がありますね。

そうですね。人に何かを伝えるとき、話したり文字を書いたりしますよね。人ではない「システム」に対してユーザーの意思を伝える方法が、まさに入力手段なんです。
私たちの生活には多種多様なシステムが存在し、それぞれ異なる入力手段を備えています。例えば、電気をつけるスイッチやエレベーターのボタン、ガスコンロの火力調整などですね。

なるほど、身の回りには本当に多くの入力手段がありますね。

デジタルデバイス、例えばスマートフォンやPCは複雑ですよね。そこで、WindowsやAndroidといったOSが、少ない入力手段でも多くのことができるようにサポートしてくれています。
それでも、大きく分類すると入力手段は少なくとも3つあります。入力手段が変われば、それにふさわしいインターフェースデザインも変わります。それぞれの特徴を理解すれば、最適なデザインを検討できますよ。
3つの入力手段(操作方法)

その3つの入力手段とは何でしょうか?

音声入力を除けば、日常的に使われる入力手段は大きく分けて3種類しかありません。そして、その入力手段が何であるかによって、画面のデザインは大きく変わります。
ポインティング操作

一つ目のポインティング操作について詳しく教えてください。

はい。ポインティング操作とは、マウスやトラックパッドのように、画面内のカーソルを動かして操作する方法です。トラックポイントやトラックボールなど、ポインティングデバイスにはいろいろなバリエーションがあります。
これらは画面内のカーソルを間接的に操作します。そのため、細かい操作に向いていて、多機能なデザインでも問題なく扱えます。

確かに、マウスだと小さなボタンでもクリックできますね。

そうなんです。また、マウスのホイールやトラックパッドの2本指スクロールなど、縦スクロール操作にも特化しています。だから、長いページを縦にスクロールするデザインにも適しています。
直接接触

二つ目の直接接触についてはいかがですか?

直接接触は、スマートフォンやタブレットのタッチパネルを通して、画面に直接触れることで操作する方法です。基本的には指を使いますが、タッチペンを使うこともあります。
切符券売機や自動販売機などでも見かけますよね。直接触れるので、操作対象にはある程度の大きさが必要になります。

だからスマホのボタンは大きめなんですね。

そうですね。細かい操作には向いていませんし、画面が入力と出力を兼ねているため、全体的に大きめのデザインになりがちです。
その反面、スワイプやピンチなど、タッチパネル独自の操作が可能です。指でなぞればその通りに動くので、直感的で分かりやすいですね。
フォーカス操作

三つ目のフォーカス操作とは何でしょうか?

フォーカス操作は、TVのリモコンやゲームコントローラーなどで、画面内のフォーカスを移動して操作する方法です。自動車のナビゲーションシステムなど、意外なところでも使われています。
画面内にカーソルではなくフォーカスがあり、フォーカスできる対象にしか移動できません。上下左右のボタンで操作するため、現在の位置を明確に示す必要があります。

なるほど、だからフォーカスが強調されているんですね。

その通りです。ただ、ボタンを何度も押す必要があるので、他の操作方法と比べて身体的な負担は大きくなりがちです。簡易的な移動とフォーカスの位置を明示することが重要になります。
入力手段により異なる適したUI

入力手段が違えば、適したUIも変わるんですね。

そうなんです。標準的なパーツでも、ポインティング操作と直接接触では細かな違いがあります。
新しい環境のインターフェースを検討するときは、その環境がどういったものか、特に入力手段は何かを考えることから始めます。
インターフェースデザインの収束

同じ入力手段なら、デザインも似てくるんですか?

はい、入力手段などの制約条件が同じであれば、インターフェースはある程度、同じようなデザインに収束していきます。
スマートフォンとタブレットが似たデザインになるのはそのためです。
PCで使われるマウスやトラックパッドは細かい操作に向いているので、デザインのバリエーションに幅を持たせることができます。

ホバーもポインティングデバイスならではですね。

おっしゃる通りです。ホバーによって選択可否が容易に判別できるため、見ただけでは判断しにくいデザインでも許容されます。
しかし、タッチパネルではホバーが存在しないので、見ただけで選択可能かどうか明瞭に示す必要があります。
直接接触(スマートフォン・タブレット)

タッチパネルのデザインで気をつけるべき点は何ですか?

指やタッチペンで操作するため、選択できる対象はある程度の大きさが必要です。過密にならないようにレイアウトし、アイコンも多く用いられます。
また、直接接触ではホバーがないので、見ただけで操作可能かどうかを判断できるように明確なデザインが求められます。
フォーカス操作(TV・ゲーム)

フォーカス操作のデザインはどうすれば良いですか?

フォーカス操作はできることが限定的なので、フォーカスの特性に注力したデザインになります。
フォーカスできる要素は連続的に配置し、過度に離れすぎないようにします。また、フォーカスしている場所は縁取りや拡大、色の変化、動きなどで明示的に強調します。
実例1 入力手段による使いやすさの違いを確かめる

具体的な例でその違いを見てみたいです。

では、Sonyが提供していた「トルネ(Torne)」を例に挙げましょう。TV録画アプリとして最も使いやすいと言われています。
その使いやすさがどこから来るのか、探ってみましょう。
トルネにはいくつかのバリエーションがあります。それらを比較することで、使いやすさの要因を見つけられるかもしれません。

どんなバリエーションがあるんですか?

まず、本家本元のトルネはPS3やPS4で使われ、ゲーム機ならではのスピードと操作性の良さが特徴です。
次に、スマートフォン向けに「Torne Mobile」があります。タッチパネル用にインターフェースがアレンジされ、装飾や動きが省かれていますが、基本的な機能は同等です。
さらに、「Torne Mobile」をAndroid TVでも動くようにしたものがあります。操作はTV付属のリモコンが前提となっています。

使いやすさに違いはありますか?

主観ですが、本家トルネは圧倒的に使いやすく、スマートフォン版はそれなりに、Android TV版は使いやすいとは言い切れませんでした。
そこで、Android TVにBluetooth接続できるゲームコントローラーをつないでみました。すると、操作性が格段に良くなりました。

それは興味深いですね。

このことから、トルネの使いやすさはコントローラーの操作性に支えられている側面が大きいと言えます。つまり、インターフェースの良し悪しは、画面レイアウトだけでは決まらないのです。

なるほど、入力手段が重要なんですね。

その通りです。デザインを考えるときは、まず入力手段を理解することが大切です。それによって最適なインターフェースが設計できますからね。

本日はとても勉強になりました。ありがとうございました!