第14章 人間は、小さく遠いものを狙うのに時間がかかる
小さな閉じるアイコンを「見えるから押せる」と判断してはいけません。見た目の 16px、実際にポインターイベントを受け取る範囲、キーボードフォーカスの範囲は別です。さらにマウス、タッチ、キーボードでは操作が違います。
本章では Fitts’s Law を、ボタン寸法の正解ではなく、距離と進行方向の幾何学的な幅から、狙った移動を考えるモデルとして扱います。到達点の分布から推定する実効幅 Wₑ は、実測後の別指標です。
この章の必修は三つです。
- 見た目、操作領域、フォーカス範囲を分ける
- 距離、幅、入力方式、姿勢、隣接する対象を記録する
- 推奨数字の出自と例外を確認し、実機で行うタスクで確かめる
判断は、入力方式とタスクを決め、見える範囲／操作領域／フォーカス範囲の三範囲を測り、開始点・距離・進行方向の幾何学幅・隣接する対象を記録し、一軸だけ変え、運動時間とエラーを確認する順で行います。探索やアイコン理解にかかった時間は運動時間と分けます。
14.1 指先とマウスポインターの違い
マウスは画面上のポインターを間接的に動かします。タッチは指で直接触れ、接触点を指が覆います。キーボードは空間を狙わずフォーカス順を移動します。
同じボタンでも、机上のマウス、移動中の片手タッチ、キーボードでは問題が違います。ポインター移動時間、遮蔽、手の届き方、フォーカス順を一つのスコアにしません。
14.2 Fitts’s Law がモデル化した運動
簡単に言えば、対象が遠く、進行方向の幅が小さいほど、正確に到達する時間が長くなりやすい関係です。
HCI では MT = a + b log₂(D/W + 1) の形がよく使われます。D は開始点から対象までの距離、W は接近方向の幾何学的な幅です。観測された到達点の分布から求める実効幅 Wₑ は別の量で、CSS 幅と同一視しません。a と b は参加者、デバイス、タスク等から推定します。
Fitts の 1954 年研究は反復する狙った移動です。初めて見るアイコンの意味理解、対象発見、危険な操作の確認時間まで一式で予測する式ではありません。
14.3 小さな閉じるボタンを狙う
16px の×アイコンでも、上下左右に 14px の padding を加えれば 44px のボタン領域を作れます。この方法はレイアウトを変えます。図 F03-B ではレイアウトを固定するため、絶対配置した透明の重なりで操作領域だけを 44px へ広げ、padding 案は F05-A で別に扱います。
ただし、透明な操作領域が隣の操作へ重なると、どちらがイベントを受けるか不明瞭になります。広げた範囲がカード全体のクリック、テキスト選択、スクロールと競合する場合もあります。
DevTools で getBoundingClientRect() を見ても、疑似要素、イベント委譲、重ねた透明領域、transform が関わることがあります。実際のイベント対象とフォーカス枠も確認します。
14.4 画面端と角が持つ特殊な幅
デスクトップ環境のポインターは画面端を越えないため、端に密着した対象は接近方向の許容範囲が境界により拡張されると説明されます。これは到達点から推定する Wₑ と同じ意味で「実効幅」と呼ばず、境界条件として記述します。
しかしウェブページの表示領域の端が、常に物理的な画面端とは限りません。ブラウザの外枠、ウィンドウ、スクロールバー、複数ディスプレイがあります。タッチでは指が端を越え、OS ジェスチャーやケース形状と競合します。「角は無限大」をすべてのデバイスへ適用しません。
14.5 padding と min-width／min-height
padding は内容の周囲を広げ、レイアウトにも影響します。min-width と min-height は最小の箱を確保します。疑似要素で透明領域を広げる案はレイアウトを変えませんが、重なり、重なり順、フォーカス枠、イベント対象を別に確認します。
小画面で対象を大きくすると、ツールバーが折り返し、内容を覆うかもしれません。対象サイズだけ合格させず、折り返し後のレイアウトと読む順序へ戻ります。
14.6 対象を大きくする以外の改善
- 頻繁に行う操作を作業対象へ近づける
- 隣接する危険な操作との間隔を広げる
- キーボードショートカットを用意する
- コンテキストメニューや行操作で移動を短くする
- 誤操作を取り消せるようにする
- 低頻度の操作を消すのではなく取得可能にする
距離を短くすると画面が重複操作だらけになる副作用もあります。ショートカットは発見可能性、取り消しは回復可能性を別に確認します。
14.7 推奨サイズの数字を絶対ルールにしない
WCAG 2.2 SC 2.5.8 は Level AA で 24×24 CSS px または間隔等の例外を定めます。Android 資料には 48dp という案内があります。これらは単位、目的、範囲、例外が違います。
24 CSS px は物理的な 24px とは限りません。dp、pt、CSS px を相互に数字だけ換算して唯一の安全値にしません。適合基準を満たすことと、特定利用状況で十分に操作できることも分けます。
14.8 問い――このアイコンは本当に押しにくいか
問い
- 見える範囲、操作領域、フォーカス範囲は何 px ですか。
- 開始位置からの距離と接近方向の幅はどこですか。
- マウス、タッチ、キーボードで何が変わりますか。
- 隣接する対象、ジェスチャー、誤操作の重大さはどうですか。
- 大きくする以外に何を変えられますか。
- どのタスクと指標で確かめますか。
答えの例
アイコン自体は 16px ですが、ボタンの操作領域は 44×44 CSS px です。見た目だけから「小さく押せない」とは言えません。一方、隣の削除ボタンまで 4px で、透明領域が重なっています。アイコンを拡大する前に重なりをなくし、同じタッチ操作のタスクで誤った隣接対象、完了時間、修正を記録します。
六問への回答では、三つの範囲、D と W、入力方式別のタスク、隣接リスク、選んだ一軸、運動時間／エラー／回復を対応させます。キーボードでは D と W を測らず、フォーカス移動回数、順序、表示、実行エラーを記録します。
別の答え方
キーボードでは操作領域よりフォーカス順とフォーカス表示が問題かもしれません。スクリーンリーダーでは、読み上げられる名前と対象の範囲を確認します。
よくある考え方
44px にすれば安全です。
注意点
単位、プラットフォーム、入力方式、間隔、例外、利用状況がありません。数字は確認の入口であり、人の行動の保証ではありません。
セルフチェック
- 見た目と操作領域を区別できる
- Fitts’s Law の D、W、タスク条件を説明できる
- ガイドラインの数字と実機タスクを別の根拠として扱える
参考
- Fitts (1954), DOI: 10.1037/h0055392 — 原典。装置、反復タスク、速度―正確性のトレードオフを読みます。
- MacKenzie (1992), DOI: 10.1207/s15327051hci0701_3 — HCI でのモデル、式、比較方法のレビューです。
- WCAG 2.2 SC 2.5.8 Target Size (Minimum) — 公式基準。例外と CSS px を含めて読みます。
- Android Accessibility Help, Touch target size — 48dp 案内の目的とプラットフォームを確認します。
- Microsoft, Guidelines for targeting — タッチ対象、間隔、デバイス差の公式入口です。