この技術・考え方で達成できること
- 確実な操作（誤クリックの防止）: タップ領域が広がることで、意図しない隣のボタンを押してしまうイライラが減る
- 認知負荷の低減: 行間や文字間が適切に設定されていると、読字障害などの特性があっても「文字の塊」で迷子にならずスムーズに読解できる
- 柔軟なサイズ変更への対応: 文字サイズを大きくしてもレイアウトが破綻せず、誰もが自分に合った文字の大きさで情報を閲覧できる
例: この対応は、パーキンソン病や加齢による手の震えを持つユーザー（運動障害）だけでなく、「揺れる電車内で吊り革に掴まりながら片手でスマホを操作している人（状況的な障害）」にとって、ボタンを正確に押せるかどうかを左右する絶大な効果があります。
なぜ対応が難しいか（または後回しにされるか）
「1画面に表示できる情報密度を上げたい（スクロールさせたくない）」というビジネス側の要望と、「誤操作を防ぐための十分な余白と文字サイズを確保したい」というアクセシビリティ要件が、真っ向から衝突しやすいためです。
また、「ピクセルパーフェクト」という絶対値（px）でガチガチにレイアウトを固定する風習が残っていると、ユーザーがOSやブラウザ側で文字サイズを大きくした瞬間に、文字が見切れたり、重なったりして表示が崩壊してしまうという技術的な壁もあります。
デザイン時に配慮すべき障壁（バリア）
タイポグラフィとマージン（余白）の設計において、以下のミスマッチ（障壁）を取り除く必要があります。
- 恒常的な障害（運動障害）: 筋肉の衰えや震えにより、ミリ単位の精緻なポインティング（マウス操作やタップ）が困難な状態。
- 恒常的な障害（ディスレクシア・読字障害）: 行間が狭すぎると、視線が次の行にスムーズに移動できず、文字が黒い塊（ノイズ）に見えてしまう状態。
- 一時的・状況的な障害（デバイス環境）: 歩きスマホや揺れる乗り物の中での操作、または画面が極端に小さい古い端末を使っている状態。
解決パターン（Before/After）
❌ Before: 密集したリンクと絶対指定のピクセル
- スマホ画面で、複数のハッシュタグ（リンク）が隙間なく並んでいる。
- 文字サイズや要素の高さが
12pxなどの絶対値で固定されており、OS設定で「文字を大きくする」を選んでも画面上の文字の大きさが一切変わらない。
なぜ問題か: 精緻なタップができず、隣のリンクを誤爆しやすくなります。文字が読めないロービジョンのユーザーは、ズーム機能を使わない限りお手上げになります。
✅ After: 十分なタップ領域（Touch Target）と相対単位（rem）
- ハッシュタグの間隔を空け、各リンクが最低
44×44px（または24×24pxの例外基準クリア）のタップ領域を持つようにする。 - 文字サイズと
line-heightをrem（ルート要素のフォントサイズに対する倍率）で指定し、ユーザーのブラウザ設定に追従するようにする。
なぜ改善されるか: タップ領域が親指の腹でも十分に押しやすい広さになり、すべてのユーザーの操作ミスを減らします。また、OS設定に従ってレイアウトが「しなやかに」伸び縮みするため、強制される「見えにくさ」を排除できます。
見た目と機能性の両立（デザイナー × エンジニア）
❌ 「見た目の密度」 vs 「タップ領域の広さ」
デザイナーの視点: 「このリストアイテムやアイコンは、UIとしてスタイリッシュに見せたいから要素をギュッと詰めたい。アイコン自体は 16x16px で十分美しい」
エンジニアの視点: 「AppleのHIGやWCAGでは、タップ領域は最低 44x44 px（WCAG 2.1 AAA）または 24x24 px（WCAG 2.2 AA）が推奨されている。このまま実装すると小さすぎて押せないクレームが来る」
なぜ衝突するか: デザイナーが考える「Visual Size（視覚的な大きさ）」と、エンジニアが心配する「Touch Target（物理的なタップ領域の大きさ）」が同一であると思い込んでいるためです。
どう合意するか:
CSSの padding を活用した「透明な余白」の実装テクニックを共有します。
見た目のアイコンサイズ（Visual Size）は 16x16px のまま維持しつつ、エンジニアが周囲に余白（Padding）をもたせて button 要素の全体サイズを 44x44px に拡張します。これによって「デザイナーの求めるスタイリッシュな見た目」と「アクセシビリティが求める広いタップ領域」の両立が可能です。
実践チェックリスト
最低ライン（Must）
[ ] 独立したUIコンポーネント（ボタンやリンク）の操作領域が最低でも 24 x 24 CSSピクセル を確保している（WCAG 2.2 AAのターゲットサイズ要件）
[ ] 本文の font-size を px ではなく、 rem や % などの相対単位で指定し、ブラウザの標準文字サイズ変更に追従できるようにしている
[ ] テキストを含むコンテナの高さを固定（絶対値指定）しておらず、文字が200%に拡大されたり、テキストが折り返されたりしても内容が見切れない設計になっている
理想ライン（Better）
[ ] モバイル端末の主要な操作要素のタップ領域は 44 x 44 CSSピクセル を確保している
[ ] 段落内のテキストの行送りの高さ（line-height）が、少なくとも文字サイズの 1.5倍 ある
[ ] 段落と段落の間隔が、行送りの高さの少なくとも 2倍 ある
まとめ
- この記事の本質: 優れたタイポグラフィと余白は、美しさのためだけでなく「ミスのない読解」と「ミスのない操作」を担保する機能設計である。
- 誰のどんな課題を解決するか: 運動障害を持つ人や揺れる電車にいる人の「誤タップ」、読字障害やロービジョンの人の「読めなさ」。
- 実務での判断軸: 「もし文字サイズ設定を強制的に2倍にしたら、この画面は壊れるだろうか？」
- 次に学ぶべき知識: フォーカスインジケーター（キーボード操作時の「現在地」を視覚化する技術）
目的別のおすすめ:
- コントラスト比との組み合わせを確認するなら → 色彩とコントラスト比
- コードでの実装例（Touch Targetの広げ方）なら → UIXHEROのボタンコンポーネント
