web design uiNovember 5, 20268 min read

タップターゲットのサイズ:24pxが小さすぎる理由と、使うべき44pt・48dpのルール

24pxのアイコンはOK。でも24pxのタップ領域はダメ。Appleは44pt、Androidは48dp、WCAGの24pxはあくまで最低ラインです。4つの修正を並べて作り直し、開発者に渡せるコードも付けました。

By Boone

Tap Target Size: Why 24px Is Too Small and the 44pt and 48dp Rule to Use

24 pxのアイコンは問題ありません。でも、24 pxのタップ領域は問題だらけです。人は指先で操作します。しかも片手で、移動しながらのことも多い。それほど小さいターゲットは外すし、隣を押してしまいます。アイコンは小さく、ターゲットは大きく描く。以下の数字に従ってください。

なぜ誰もが24 pxで描くのか

アイコンは24で描かれます。たとえばMaterial Symbolsは、推奨サイズが24 pxで提供されています。だからデザイナーは24 pxのアイコンを渡し、開発者はボタンをアイコンと同じ大きさにし、ヒット領域は切手サイズになります。

この数字のもう一つの出どころはアクセシビリティです。WCAG 2.2は、レベルAAでポインターターゲットを24×24 CSSピクセル以上にすることを求めています。これは最低ラインで、例外もあります。最低ラインを目標と読み違えやすいのですが、ぎりぎりのラインに乗せたデザインはチェッカーを通っても、人をイライラさせます。

知っておくべき4つの数字

同じ縮尺で描いた24、28、44、48の4つの正方形。それぞれ同じシェブロンアイコンが入っている。24と28の正方形は小さすぎるため赤、44と48の正方形は緑で示されている — 各ヒット領域の中に同じ24 pxのアイコンを、同じ縮尺で描いたもの。赤が最低ライン、緑が目標です。

出典	サイズ	内容
Apple、iOSとiPadOS	44×44 pt	コントロールのデフォルトサイズ
Apple、iOSとiPadOS	28×28 pt	コントロールの最小サイズ
Android、Material	48×48 dp	推奨されるタッチターゲット
WCAG 2.2、2.5.8 (AA)	24×24 CSS px	最小値(例外あり)
WCAG 2.2、2.5.5 (AAA)	44×44 CSS px	強化されたターゲット

Appleのガイダンスは明快です。ボタンには44×44ポイント以上のヒット領域が必要。ポイント、dp、CSSピクセルはいずれも密度非依存の単位なので、デザイナーは図のように同じグリッドの上で並べて使います。

WCAGの例外のひとつは覚えておく価値があります。小さすぎるターゲットが2つあっても、それぞれの中心に置いた24 pxの円が他方のターゲットに触れなければ許されます。これは間隔のルールで、小さなアイコンが離れて並んでいれば通り、同じアイコンが詰まっていれば落ちる理由です。

修正1:アイコンに余白を足して44にする

Workoutというタイトルのナビゲーションバー。戻るシェブロン、共有アイコン、三点アイコンが、それぞれ赤い破線の小さな24×24の枠で囲まれている

同じナビゲーションバーで、各アイコンが隣と接する緑の破線の44×44の枠で囲まれている

ヒット領域は、中の絵ではなくボタンのフレームです。だから直すのはアイコンではなくボタンのサイズ。グリフは24のまま、ボタンを縦横とも44以上にします。単独で置かれる小さなコントロールすべてに当てはまります。戻る矢印、ツールバーの共有ボタンやその他ボタン、行の情報ボタン、お気に入りの星、チェックボックス、ステッパーのプラスとマイナスなど。

2つが並ぶとき、枠同士が接してもかまいません。接していれば、外す隙間がないからです。

修正2:行全体をタップ可能にする

Wi-Fi、Bluetooth、機内モードが並ぶ設定リスト。Bluetoothのスイッチだけが赤い破線の枠で示されている

行はすでにそこにあり、読みやすく、44よりはるかに大きい。ラベルとコントロールをひとつのタップ可能な要素で包めば、行全体が切り替わります。スクリーンリーダーやスイッチアクセスを使う人にも役立ちます。ラベルと孤立したスイッチではなく、名前のあるコントロールがひとつになるからです。

修正3:閉じるボタンにまともなターゲットを与える

バナーの閉じるボタン、検索フィールド内のクリアボタン、タグの小さな削除アイコンも同じです。印は軽く、ターゲットは重く描きます。

修正4:主要なアクションを下に置く

右上に小さな「保存」リンクがあるNew workout画面。赤い破線の枠で示されている

同じ画面で、下部に全幅の黒い「ワークアウトを保存」ボタンがあり、緑の破線の枠で示されている

これは計測された統計ではなく設計ルールです。要点は、コントロールの置き場所が大きさと同じくらい重要だということ。主要なアクションは低く、広く。キャンセルなどの副次的なアクションは上のバーに残して構いません。

実装方法

Webでは、アイコンではなくボタンのサイズを指定します。

css

.icon-button {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
}
.icon-button svg { width: 24px; height: 24px; }

/* one tappable row: label and switch together */
.row { display: flex; align-items: center; min-height: 44px; }

Androidでは、コントロールが内容から自分のサイズを決める場合、Googleのガイダンスに従い、android:minWidth と android:minHeight で下限を設定します。

xml

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minWidth="48dp"
    android:minHeight="48dp" />

iOSのSwiftUIでは、コントロールにフレームを与え、フレーム全体が反応するようにします。

swift

Button(action: close) { Image(systemName: "xmark") }
    .frame(minWidth: 44, minHeight: 44)
    .contentShape(Rectangle())

この3つのスニペットは、ルールを示す私たち自身の例であり、プラットフォームからコピーしたコードではありません。

5分で自分の画面をチェック

デザインファイルで、タップできるものすべてをアイコンの上に44×44のボックスとして描く。収まらないボックスは、拡大すべきターゲットです。
リスト行、タブ、チップ、ページネーション:項目全体がタップできますか、それとも言葉がある部分だけですか?
閉じる、クリア、削除のコントロールをすべて探す。それぞれに専用の44が必要です。
画面ごとにひとつの主要アクションを見つける。それは親指のある場所にありますか?
実機で、片手で、メインのフローを通してみる。2回外したものは小さすぎます。

FAQ

タップターゲットの最小サイズは?

iPhoneでは、Appleのデフォルトは44×44ポイントで、コントロールの最小サイズは28×28です。Androidの推奨は48×48 dp。Webでは、WCAG 2.2がレベルAAで24×24 CSSピクセルを最小値としており、例外があります。

モバイルでボタンはどのくらい大きくすべき?

幅も高さも、iOSでは44×44ポイント以上、Androidでは48×48 dp以上。画面下部の全幅のプライマリボタンなら、すでにどちらも十分に超えています。

アイコン自体が44 pxである必要はある?

いいえ。アイコンは24 px以下のままで構いません。44でなければならないのはタップに反応する領域、つまりアイコンを囲むボタンです。ボタンにパディングか最小の幅と高さを足してください。

24×24 pxのターゲットでWCAGは十分?

レベルAAなら、たいていの場合は十分です。基準は24×24 CSSピクセル以上を求めており、間隔、インラインリンクなどには例外があります。強化レベルのAAAは44×44を求めます。AAAではなくAAに通ることは、準拠のための最小限であり、設計に向いたサイズではありません。

pt、dp、pxの違いは?

どれも密度非依存の単位です。ポイントはiOS、dpはAndroid、CSSピクセルはWebの単位。物理的に同一ではありませんが、デザイナーは同じグリッドに配置するので、44 ptと48 dpはほぼ同じサイズとして扱われます。

スマホでメインのボタンはどこに置くべき?

画面の下部、親指が置かれる場所に全幅で。キャンセルなどの副次的なアクションは上のバーに。これは計測された数値ではなく、レイアウトの経験則です。

出典

Apple Human Interface Guidelines、Accessibility:iOSとiPadOSのデフォルトのコントロールサイズは44×44ポイント、最小のコントロールサイズは28×28ポイント。
Apple Human Interface Guidelines、Buttons:ボタンには44×44ポイント以上のヒット領域が必要。
Android Accessibility Help、Touch target size:幅と高さは48dp以上。内容に応じてサイズが決まるコントロールの下限として android:minWidth と android:minHeight。
W3C、WCAG 2.2、2.5.8 Target Size (Minimum):AAで24×24 CSSピクセル以上(間隔の例外を含む)。および2.5.5 Target Size (Enhanced):AAAで44×44。
Google Fonts、Material Symbols guide:推奨アイコンサイズは24 px。
上の画面は私たち自身の例です。下部配置のアドバイスは統計ではなく設計ルールです。
このような「ひとつのルール」系の投稿はUX Brainyでもっと見られます。