大きいスクリーンのタッチデザインを考える

タッチは大前提

発表後、発売を待たずに売れ切れ状態になった Surface Book。ノートパソコン並みの大きさを誇る iPad Pro。それぞれコンセプトが異なる製品ですが、スクリーンサイズが従来のタブレットの域を超えたものが注目されているのは、デスクトップパソコン以外で本格的な作業をしたいというニーズが高まりつつあるからでしょう。

Adobe のコアアプリも Windows 向けにタッチフレンドリーに改良が加えられています。

Windows だけでなく、Linux 製の Gnome はバージョン 3 以来、ジェスチャー操作をサポートしています。GUI も大きめのアイコンや操作 UI が実装されているのも印象的です。

今年 Acer がリリースした DCシリーズ は、Chrome OS をベースにしたデスクトップパソコン。マウスとキーボードで操作はできますが、スクリーンに触れて操作もできます。このモデルは 10 本の指をつかったジェスチャーにも対応していて、大型モニターならではの操作を可能にしています。

従来はスマートフォンとタブレットがタッチデバイスので代名詞でしたが、デスクトップを含め、すべてのデバイスでタッチが当たり前になりつつあります。デスクトップ向けでもタッチフレンドリーにするという考え自体は新しくありませんし、Surface が登場した 2012 年から言われていることです。しかし、スクリーンサイズだけで分類がさらに難しくなりつつ今、タッチとデバイスとの関わりを改めて考えてみる必要があります。

ここ 1, 2 年に出回ったタッチデバイスの画素数比較。スマートフォン、タブレット、デスクトップの境界はあやふやです。

持ち方から考えられるUI

タッチ向けに大きめに UI 要素を作るわけですが、どのサイズで作れば良いのでしょうか。幾つかのガイドラインを見ると、だいたい同じ大きさを推奨しています。

• Android デザインガイドラインでは最小サイズは 48px
• iOS デザインガイドライン では 44px 以上を推奨
• Windowsデザインガイドラインでは、最小サイズは 48px
• MIT Touch Lab の調査では 16 – 20 mm を推奨（およそ 45 – 57px）

マイクロソフトが 2006 年に発表した Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices でも、タッチターゲットが大きければミスが少なくなるという調査結果を公開しています。親指になるとさらに大きいサイズのほうが触りやすくなりますが、コンテンツとのバランスをどのように保つかが課題になります。操作性が向上したとしても、肝心のコンテンツのための場所を十分に用意できなければ意味がありません。

また、大きさだけでなく持ち方によって操作のしやすさが変わります。
スマートフォンでは『親指のルール』と呼ばれる、親指でも十分に届く場所が操作 UI を配置するには理想的と言われてきました。これは他のデバイスに対しても無難な配置ですが、両手持ちを前提にした場合新たな可能性が生まれます。

両手で持った際、中央に操作 UI があるより、両側にあったほうが届きやすいでしょう。たとえば、Tweetbot を iPad で利用した場合、2 カラムでタイムラインを観覧できるように設計してあります。これにより、デバイスを両手から離すことなく、左右の親指でタイムラインの操作ができるようになります。このように、両側で異なる操作を手軽にできるのも両手持ちの魅力です。

スクリーンが大きくなると、親指だけでなく、人差し指で操作をすることも増えるでしょう。デバイスをデスクの上やスタンドに置くことで、デバイスを持つことなく操作ができます。大きなスクリーンでも様々な場所へ難なく届きますが、隅にあるものは少し操作が難しくなります。親指操作では『最適』とされていた下部の端は、人差し指では少し使いにくいかもしれません。

まとめ

このように、どの指を使うか、どのようにデバイスを持つのかによって操作しやすい場所が変わることがあります。大きなタッチデバイスが登場すると、両手持ちや人差し指での操作が増える可能性があります。難しいデザインの挑戦であると同時に、新しいナビゲーションや操作性を提案するのに最適な時期に来ています。