Bible Network Crypto DeFi Onchain RWA AI Agent Stablecoin Chain SAFU CryptoTax DeFAI AGI Claude Me Claude Skill Claude Design Claude Cowork
独立メディア
いかなるプロジェクトとも無提携
Claude Designで、アイデアをインタラクティブなビジュアルに変える
claudedesign-me.com
最新
FigmaがAIエージェント向けにデザインルールを書けるように:SpecsとCode layersの後、デザインシステムの文書は誰が保守するのか  ·  「うちのデザインシステムで」だけでは足りない:AIが18pxや48pxに走らないための、貼り付けて使えるプライマー  ·  画面一つにいくらかかるのか?ほとんどのAIデザインツールは答えられない:比べられない六つの利用量単位  ·  デザイナーの43.8%が制作時間の半分以上をAIコードに:役割間の差と7.39点の満足度  ·  Claude Design単体版は12月14日に終了、Docs・Slides・Designはすべての会話に統合  ·  デザイナーの91%が毎週AIを使い、62%が出力の不安定さを挙げる——採用率の裏に隠れた検証コスト
用語解説 · ビジュアルデザイン

Touch Target Size

タッチターゲットサイズ
ビジュアルデザイン intermediate

30秒バージョン · 忙しい方へ
ボタン、リンク、フォームコントロールなど、タップやクリックできる要素が画面上で反応する領域の大きさ。WCAG 2.2の達成基準2.5.8(レベルAA)は、特定の例外を除き、ポインター入力の対象を24×24 CSSピクセル以上にすることを求める。
詳しく読む +
01 · これは何?

タッチターゲットサイズとは何か、WCAGはどれくらいの大きさを求めるのか?

タッチターゲットサイズとは、ボタン、リンク、フォームコントロールのタップやクリックが実際に反応する範囲の大きさだ。アイコンがどう見えるかではなく、反応する領域を指す。16ピクセルのアイコンを24ピクセルの反応領域で包んでいれば、24ピクセルと数える。

WCAG 2.2で追加された達成基準2.5.8「ターゲットのサイズ(最低限)」はレベルAAで、ポインター入力の対象を24×24 CSSピクセル以上にすることを求める。より厳しい2.5.5「ターゲットのサイズ(強化)」はレベルAAAで、基準は44×44ピクセルだ。

02 · なぜ存在する?

なぜこの要件が必要なのか?

小さなターゲットは多くの人にとって障壁になる。手に震えがある人や運動制御が弱い人は誤タップしやすく、片手でスマートフォンを使う人や移動中の人も同じだ。誤タップは不便なだけでなく、隣が「削除」や「支払い」のような操作なら、実際の誤りにつながる。

2.5.8の考え方は、すべての要素を大きくすることを強制せずに、達成可能な最低ラインとして24ピクセルを定めることだ。より高い保証を求める場合は、2.5.5の44ピクセルを目指せる。

03 · 意思決定にどう影響する?

実際に、ある要素が基準を満たしているかどうかはどう判断するのか?

反応領域の幅と高さを測り、どちらも24 CSSピクセル以上なら合格だ。それより小さいターゲットでも、次の例外に当てはまれば合格になりうる。間隔(隣接するすべてのターゲットから24ピクセル以上離れている)、同等(同じページに基準を満たす別のコントロールが同じ機能を果たす)、インライン(ターゲットが文や文章ブロックの中にある)、ユーザーエージェントコントロール(サイズがブラウザで決まり、作者が変更していない)、本質的(特定の表示が不可欠、または法的に要求される)だ。

間隔の例外の確認方法は、小さいターゲットそれぞれの外接矩形の中心に直径24ピクセルの円を置き、その円が他のターゲットや他の小さいターゲットの円と交わらないことだ。

04 · どうすればいい?

デザイナーやAIでUIを生成する人にとって何を意味するか?

デザインファイルのアイコンボタンが最も失敗しやすい。見た目では16ピクセルがすっきりしていても、反応領域も16ピクセルで他のボタンに密着していれば、サイズと間隔の両方の基準を満たさない。解決策は通常、アイコンを大きくすることではなく、パディングで反応領域を広げるか、間隔を空けることだ。

AIツールでUIを生成するときも、このチェックは受け入れ基準に入れる価値がある。第三者のレビューによれば、生成結果が色のコントラストとタッチターゲットの大きさで基本的なアクセシビリティ要件を満たさない例があった(このレビューは競合のサイトのもので、自分で確認が必要)。「すべての操作要素の反応領域を24×24ピクセル以上にする」とプロンプトに書き、納品前に実測するほうが、後から直すより安い。

出典:W3C WAI — Understanding Success Criterion 2.5.8: Target Size (Minimum)、AllAccessible — WCAG 2.5.8 Target Size (Minimum): Complete Implementation Guide
具体例 +

W3Cによる「間隔」の例外の説明が最も分かりやすい実例だ。16ピクセルの小さなアイコンボタンは、それ自体が24ピクセル未満でも、その中心に置いた直径24ピクセルの円が、隣のボタンや他の小さなターゲットの円と交わらなければ、2.5.8を満たす。16ピクセルのボタン二つが密着していれば円が重なり、不合格になる。文中のインラインリンクは「インライン」の例外が直接適用され、24ピクセルの制限を受けない。

よくある誤解 +
✕ 誤解 1
× 誤解:アイコンを24ピクセルで描かないと合格にならない、実際は:判定の基準は反応領域であり、アイコンの見た目の大きさではない——16ピクセルのアイコンにパディングを加えて反応領域が24ピクセルになれば合格で、逆にアイコンが大きく見えても反応領域が小さければ不合格だ
✕ 誤解 2
× 誤解:24ピクセル未満なら必ず不適合になる、実際は:2.5.8には間隔、同等、インライン、ユーザーエージェントコントロール、本質的の五つの例外があり、間隔が十分な場合や同じページに同等のコントロールがある場合は、小さなターゲットでも合格しうる
The Missing Link +
直接的な影響

利点は、測定可能な最低ラインで誤タップを減らせることで、運動制御が弱い人にもモバイル利用者にも役立つ。欠点は、密度の高いUI(ツールバーや表の操作列)ではサイズと間隔を満たすのに余白が必要になり、情報密度とのトレードオフが生じること、そして24ピクセルはあくまで最低ラインであり、実際に押しやすいことまでは保証しないことだ。

質問する
10文字以上入力してください
関連トピック