本記事はTinderの元リードデザイナーであり、今はGoogleや任天堂をクライアントに持つプロダクトコンサル会社Philosophieに所属するScott Hurff氏のブログエントリーからの翻訳転載です。記事自体はiPhone 6発表時に書かれたものですが、議論自体は現行のものにも適用されますので、時事的な部分は割愛しつつ翻訳してお届けします。
親指のためのデザインとは、親指が自然な動きで弧を描く動作で使えるように、最適な形でインターフェイスを構築することです。
しかしこれは非常に複雑な問題です。私たちは画面上の至るところに点在するUI要素に触れようと、様々なスマホの持ち方を無意識に試しています。それこそ毎日のように、スマホの握り方を変えたり、浅く持ったり、通常触らないような場所では指を伸ばせるようにアングルを変えたりしています。
とはいえ、お手上げのままにしておくわけにもいきません。ある研究では「ほとんどの人がスマホを手の右下の角にあたる部分を支点として、親指の掌の方の側を使って支える」との仮説が立てられています。
この仮説は、モバイルの専門家であるSteve Hoober氏が、昨年の初めに1,333人を対象に行った研究から導き出されています。Hoober氏は、私たちは以下のようにスマホを手で持つことを発見しました。
・片手で持つ：49％
・覆うように持つ：36％
・両手で持つ：15％
操作する指は次のように示されました。
・右の親指をスクリーンにあてる：67％
・左の親指をスクリーンにあてる：33％
Hoober氏は、人口における左利きの割合は約10％だと記しています。よって、左手を使うユーザーの割合の高さは、スマホの操作と同時に別のことをしていることと相関性があるとみられます。タバコを吸っていたり、自転車に乗っていたり、コーヒーを飲んでいたり、フランクフルトを食べていたりするなどです。
Luke Wroblewski氏のサイトより抜粋
親指ゾーンマップ
「親指ゾーンマップ（The Thumb Zone）」は、下の図に示されるような一種のヒートマップで、親指がスクリーンの色々なポジションを、どのようにタッチするかを理解するのに役に立ちます。
ここでHoober氏のリサーチを検証し、最も一般的なユースケースとなる親指ゾーンマップを作ってみましょう。最も多くのユーザーに共通するのは以下です。
・片手での使用
・右手の親指でスクリーンを操作
・親指を画面の右下の角を拠点としている
下の画像は、2007年以降に発売されたiPhoneのディスプレイサイズに対して作成された親指ゾーンのヒートマップです。
この中から、iPhone 6とiPhone 6 Plusを直接比較します。
緑のNaturalゾーン（苦なく触れられるゾーン）が、大体同じなのに気付きますでしょうか（iPhone 6 Plusの緑ゾーンがやや小さい理由は、すぐ後で説明します）。スクリーンの大きさに合わせて、私たちの指は魔法のように伸びたりはしません。私はストリートファイターに出てくるダルシムが大好きだったので、これはとても残念です。
明らかに異なる点は、Owゾーン（指の届かないゾーン）の面積がiPhone 6 Plusでは驚くほど増えていることです。
さらに、Naturalゾーンの形が、iPhone 6 Plusの方とでは変化しているのが分かるでしょうか。これは、スクリーンサイズの変化に応じて握り方を変える必要があるからで、安定させるために小指を使っているからです。私も実際に握ってみたら、驚くほど握り方に違いを感じました。
注：私の手は他の人よりも小さいので、iPhone 6 Plusのスクリーン幅に対して親指の届く領域も狭かったようです。諸々の条件をしっかりと考慮する必要はあります。
持つ場所が変わった場合
握るポジションを変えたときに、親指ゾーンがどう変化するか検証しましょう。スマホを操作する際に、画面の真ん中の方に親指の付け根を移動して、機器を支える方が楽な場合があります。
下の画像はその動作の際の、iPhone 6とiPhone 6 Plusとのヒートマップです。
iPhone 6 Plusの方が明らかにNaturalゾーンが多いのに注目してください。これはスクリーンサイズの大きさによるものです。比較するとiPhone 6の方は、上の部分の可動域が。スクリーン面積分損しているともいえます。
簡易アクセス機能
しかし、真ん中の方でスマホを持ち直す動作は、iOS 8搭載の「簡易アクセス」があれば必要もないのかもしれません（Appleがこの存在を大々的に宣伝することがあればですが）。ホームボタンを２回連続でトントンとタップすると（作動中のアプリを表示するためにクリックすることとは違います）、スクリーン上部に表示されているアイテムを、下の方にスライドするのです。
簡単アクセスのデモはこちらです。
簡単アクセス機能により、iPhone 6 Plusの親指ゾーンがどのように見えるでしょうか。何か気付きますか？
そうです、Appleのデモイメージの動きと照らし合わせると、親指がNaturalゾーンにぴったり収まっています。
簡単アクセス機能に関するその他の検証として、John Gruber氏が指摘したものがあります。
iPhone 6 Plusの簡単アクセス機能では、iPhone 6での同様の動作より、より下にスライドさせています。これらの工夫はディスプレイの上側の部分を、親指の自然な可動域に移動させるための調整です。
下の画像がその動作です：
結論
モバイルのスクリーンサイズは全体として、同じようなものになっており、これはよいことです。その一方で、これらの5.5インチのスクリーンなどは、従来の小さい画面のサイズアップしたバージョンでは対応しきれないことを意味しています。端末の握り方が完全に異なってくるので、それに応じてインターフェイスも変更せねばなりません。
今後は、プロトタイピングの作業がより一層重要になると思います。この流れにまだ乗っていない方がいたら、今すぐ乗っかりましょう。
おまけ：親指ゾーンマップのテンプレート
この記事内で引用した親指ゾーンマップのスクリーンショットのコピーを下のリンクから、それぞれのjpgごとにダウンロードできます。
今あなたが行っているプロジェクトに、きっと役に立つはずです。もしいいものだと思ったら、シェアやフォローしてもらえればうれしいです。
