クリック領域が小さく感じたときのコーディングルール

デザインを見ていて「クリックできる要素が小さいな」と感じたとき、実装側でどこまで踏み込むかは案件ごとにぶれやすい。資料をあたったうえで、レビューと実装のときに使う自分用のルールとして書き留めておく。

調べた公開ガイドライン

Google（Material やユーザー補助・Web 向けの解説など）と デジタル庁デザインシステムのそれぞれに、操作しやすいターゲットサイズをめぐる記述がある。どちらも「押しやすさ」を考えるときの出発点になった。

この記事では、両者の主張の違いを整理したり優劣を論じたりはしない。実務では「公開されている説明を読み、自分の案件でどう割り切るか」を決めるほうが向いている、という前提に立つ。

以下は、公式な適合表明や監査の根拠にはせず、コーディングやレビューで「ここまでやるか」を決める実務上の目安として手元に置く。

原則、デザインどおりにコーディングする。 見た目の前提はデザイン準拠を維持する。
周囲の余白をクリック領域に含められる場合はそうする。 <a> や <button> に padding で当たり判定を広げるのが典型だ。視覚上のボックスは据え置きでもよい。
そのときのサイズは 48×48 px を目標にする。 上記の「余白を含めたクリック領域」の広さのひとつの据えどころとして置く。
デザインを再現した結果として「小さすぎる」と感じたときも、レイアウトに許される範囲で同じ目標に寄せてサイズを大きくする提案をする。 実装だけでデザインカンプを変えるのではなく、関係者への確認・見直し依頼として扱う。

margin だけではヒット領域が広がらないので、「見た目の間隔」と「実際に押せる領域」は別のチェック項目として扱う。

数値は参照資料や環境で異なる説明もある。プロジェクトの正本をどこに置くかを決めておくと、指さしレビューが楽になる。この記事のルールは、当面それを 48 px を目標にした余白込みの拡張と読み替えるためのメモとして残す。