iPhone の当たり判定を検証した

スマートフォンやタブレットなどのモバイルデバイス向けにUIをデザインする際には、タッチ操作に適したコントロール表現を追求しなければいけません。

タッチ操作に適したコントロール表現とは、前回書いたジェスチャもありますが、それ以前に、ボタンやリンクなどのUI要素を指で押しやすい大きさにすることが大切です。

パソコン画面のマウスポインターと違って、タッチスクリーンにおいて指でボタンをタップする場合、指がそのボタンを覆い隠してしまうので、意図した場所に正しく触れているのか分かりにくく、またボタン自体の視覚的なフィードバックも確認しづらいという課題があります。

またマウスポインターではピクセルレベルで画面上の座標を指し示すことができますが、指先ではそのような細かい操作はできません。

ですからタッチデバイスでは、ボタンやリンクが細かく密集しているようなデザインは大きなストレスになります。

最低限の大きさ

そこで必然的に、パソコンあるいはフィーチャーフォン向けのアプリやウェブページよりも、タッチ向けのデザインではUI要素を心持ち大きめに作ることになります。

ではどのぐらい大きく作ればよいのでしょうか。

タッチ操作においてユーザーが十分に指でタップできる最小面積のサイズについては、いくつかの研究やガイドラインがあります。結論は少しずつ違うようですが、だいたい 7mm 〜 10mm 四方あればよいとされているようです。

（参考：Touch Target Sizes – Luke Wroblewski）

7mm 〜 10mm をピクセル数にするといくつになるのか。これは一概に答えられません。スマートフォンやタブレットは機種ごとに画面のピクセル密度が大きく異なるので、同じピクセル数のボタンでも実際に画面上に見える大きさはまちまちだからです。

ですからモバイルデバイス向けのUIをデザインする際は、できるだけターゲット機種でプロトタイプを表示してみて、コントロールのサイズ感をよく確認する必要があります。

iOS における44ポイント

現在、様々なモバイルデバイスが出回っているものの、Apple の iPhone と iPad はスクリーンサイズや解像度のバリエーションが比較的限定されており、またユーザーベースも大きいので、UI要素のサイズについて検証する上では手がかりにしやすいと言えます。

iOS ヒューマンインターフェイス ガイドライン（PDF – 27.5MB）では、タッチ対象となるコントロールの最低限のサイズを、44 x 44 ポイントとしています。これは実測にすると、iPhone や iPad mini では約 7mm 四方、iPad では約 9mm 四方となります。

iOS の標準UIコンポーネントはこの指針にもとづき、多くの部品が44ポイントでできているので、これらを使ってアプリを実装する場合、デザイナーはコントロールのサイズについて特に気にしなくても自然にガイドラインにそったものになります。

ヒットエリアの拡張

iOS の標準コンポーネントでは、ところどころに、ヒットエリア（タッチに反応する領域）の拡張も施されています。

今回はそれを検証するために、iOS シミュレーターやスタイラスを使って計測してみました。

例えば、標準的なナビゲーションバーのボタンでは、下の図のように、ボタン自体の大きさよりもかなり広い範囲がヒットエリアになっています。これにより、正確にボタンの上をタップしなくても、だいたいの位置に触れればボタンを押したことになります。

特に左側のボタンのヒットエリアが広くなっているのは、ラベルによってボタンのサイズが変わってもよいように余裕をもたせているのか、それとも頻繁にタップされるので優先度を上げているのか。

また、ナビゲーションバーの下辺を超えてさらに下までヒットエリアが広がっているのも興味深いところです。

なお、自分で単にボタンをビューに置いただけのような場合は、ヒットエリアはボタン自体のサイズのままです。その場合、ヒットエリアを広げたければタッチへの反応処理（hittest）を変更する必要があります。

キーボードの動的なサイズ変化

iPhone のキーボードは、タイピングの途中で、各キーのヒットエリアが変化すると言われています。では実際にどの程度変化するのでしょうか。

iOS は、ユーザーが一文字タイプするたびに、次に来る文字を予測し、キーごとに重み付けをするそうです。そして次に打たれる可能性が高いキーのヒットエリアを広げ、タイプミスが起きにくくしているといいます。

詳しい重み付けの条件は分かりませんが、おおよそ、辞書にある単語にマッチする文字のキーは大きくなり、そうでない文字のキーは通常のまま、あるいは隣接するキーが大きくなっていればその分小さくなるようです。

一般的な英単語の性質上、母音を打った直後は子音のキーが大きく、子音を打った直後は母音のキーが大きくなります。

まず、iPhone をポートレート表示（縦位置）にした場合、QWERTY キーボードのキーの幅は、26ポイントとかなり小さく、ガイドラインの44ポイントを満たしていません。

通常のヒットエリアは、隣のキーとの間の空間も含むので、幅32ポイントです。これでもやはり44ポイントを満たしていません。

そこで、「WORLD」という単語を打つつもりで、W O R L までをタイプします。英単語としては、次に来る文字は「D」である可能性が圧倒的に高いはずで、そして D キーの両脇の S や F が来る可能性はほとんどないでしょう。ということは、D キーのヒットエリアが広くなっているはずです。

その状態で、シミュレーター上で調べたところ、次のようにヒットエリアが広がっているのが分かりました。

通常よりも、左右に6ポイントずつ広がり、隣のキーの途中まで及んでいます。ヒットエリアの幅は44ポイントに達しています。また上下も8ポイントずつ広がっていました。

ブラウザの当たり判定

次に、ブラウザ（Safari / Mobile WebKit）における当たり判定を見てみます。

まず下図のように、30 x 20 px のボタンをいくつか配置したウェブページを initial-scale=1.0（原寸）でブラウザに表示します。

A, B, C, D のボタンはどれも 30 x 20 px なので、ガイドラインの44ポイント（ウェブではピクセル）を満たしておらず、タップするには小さすぎると思われます。

この状態で、ボタンのヒットエリアがどうなっているか調べたところ、次のようになっていました。

A ボタンは、周囲に他にタップ可能な要素がないため、十分にヒットエリアが広がっていました。
上と左に 16px ずつ、右と下に 14px ずつ。ボタン自体の面積と合わせて、60 x 50 px となり、44ポイントを満たしています。

つまり（あくまで目安ではあるものの）ボタン自体が小さくても周囲にタップ可能な要素がなければ、これぐらいのサイズのボタンやリンクはけっこう普通にタップできるということです。

一方、B, C, D は 10px の間隔で隣接しているため、ヒットエリアを広く確保できていません。
特に中央の C ボタンは左右にヒットエリアが広がらず、幅40px分しかありません。

このように、同じサイズのボタンを並べた場合でも、その位置関係によって、タップしやすいものとしにくいものが生まれるということです。

ですから、スマートフォン向けのウェブページをデザインする際には、ボタンやリンクの単体のサイズだけでなく、並べ方や配置位置についても注意して、重要度の高いものが意図せずタップしにくくなってしまうことがないように気をつけなければいけません。

では次に、同じページを initial-scale=0.5 で表示してみます。
するとこのように見えます。

原寸の半分のサイズでページが表示されるため、A, B, C, D のボタンは 15 x 10 px になります。
この状態でのヒットエリアはどうなっているでしょうか。

面白いことに、表示サイズが半分になっても、ヒットエリアの拡張サイズは変わりませんでした。
ボタンの上と左に 16px ずつ、右と下に 14px ずつヒットエリアが拡張されています。ヒットエリアの拡張サイズは表示スケールに関係ないようです。

つまり、A ボタンについては、表示サイズはわずか 15 x 10 px でありながら、実際には 45 x 40 px のヒットエリアがあるため、だいたいガイドラインを満たしたサイズであり、意外と普通にタップできます。

しかし C に関してはヒットエリアの幅が 20px しかなく、かなりタップしずらくなっています。

タッチポイントのシフト

ここまでは、ヒットエリアについてでしたが、iOS の内部ではもうひとつ、タッチポイントのシフトが行われていると言われています。

タッチポイントのシフトとは、スクリーンに触れた指の実際の場所よりも、少しずらした座標を入力値として受け取るという工夫です。

ユーザーが画面上のターゲットにタッチする時、多くの場合、ターゲットの実際の座標よりも少し下に指の接触点がくるという傾向から、その分タッチポイントを上にずらして認識することで、ユーザーは自分が意図したとおりにオブジェクトにタッチできたと感じるということのようです。

（参考：iPhone/iPadに込められた「見えないデザイン」 – 日経BPネット）

ではどのぐらいタッチポイントはシフトしているのでしょうか。

この検証は次のように行いました。

1. まず、32ポイント間隔のグリッドを敷いた画像を用意する。
2. それを iPhone 5 に入れて、お絵描きアプリ（Adobe Ideas）で背景画像として開く。
3. 先端の細いスタイラス（Jot Pro）を使って、できるだけ正確に、グリッドの交差点の上をタッチして赤いマーカーを付ける。

これで、画面にタッチした座標（グリッドの交差点）と、入力値として受け取られた座標（赤いマーカー）とのギャップを見ることができます。

すると結果は次の図のようになりました。

面白いのは、スクリーン上の場所によって、シフトの量や方向が違う点です。
下部中央を中心に、そこから離れるほど、放射状にシフトが大きくなっていくのが分かります。
スクリーンの最上部では、16ポイントほども上方向にシフトしています。

iPhone を操作するユーザーは、スクリーンを正面から見ているのではなく、下の方から斜めに見ている、という前提でチューニングされているのでしょう。

これは、例えばスタイラスを使ってイラストを描くような作業では、かなりおかしなことになりそうです。
やはり指で操作することが前提になっているようです。

このタッチポイントのシフトを実感できるのは、人と対面で話している時などに自分の iPhone を相手に向けて置いて操作をする時です。
そういう状況では、タッチポイントのシフトが逆方向に効いてしまうので、思った場所をなかなかタップできないということになります。

今回は iPhone で検証しましたが、スクリーンの大きい iPad ではシフトの度合いが異なるかもしれません。
また、Android の各機種でこのあたりがどのようにチューニングされているのかも知りたいところです。

以上、iPhone の当たり判定に関する検証でした。

モバイルデバイスの操作性を高める上では、タッチに対するUIの反応を慎重にデザインする必要があります。
その際、OS や標準コンポーネントの特性を知っておくことで、アプリやウェブを一層洗練させることができると考えています。