タッチ操作と親指の届く範囲

タッチターゲットは、指で押すボタンやリンクの、反応する範囲のことです。小さすぎると、押し間違いが増えて、使いにくくなります。

このレッスンでは、押しやすい大きさと間隔、親指の届く範囲を学びます。学食の注文アプリを例に使います。

マウスの矢印は、1点を指します。指は、およそ1 cm ほどの幅で画面を押し、しかも指で押した場所は、自分の指に隠れます。

そのため、小さい部品は、狙った場所を押しにくいのです。

よく使われる目安は、押せる範囲を、縦も横も 44 px 以上にすることです。隣の部品との間隔も、8 px ほどは空けます。

見た目の絵が小さくても、余白を足せば、押せる範囲だけを広げられます。

/* 絵は小さくても、押せる範囲は 44 px 以上にする */
.icon-button {
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
}

/* 並んだボタンの間は 8 px 空ける */
.buttons { display: flex; gap: 8px; }

ラボの style.css を読んで、部品の大きさを調べるスクリプトがあります。44 px に届かないと UNDER 44、届けば ok と出ます。

最後の行は、44 px に届かない数です。ここでは数え方を読むだけで、CSS は直しません。

docker exec jupyter python3 steps/touch.py

スクリプトは、height、width、min-height、min-width で、px で書かれた数を探します。クラスのセレクターだけが対象です。

文字や入力欄のように、大きさを書いていない部品は、数に入りません。実際に指で押して確かめることも大切です。

多くの人は、スマホを片手で持ち、親指で操作します。画面の下の中ほどは楽に届き、上の隅は届きにくくなります。

大画面のスマホでは、なおさらです。よく使う操作は、下のほうに置きます。