• コーディング ファクトリーHOME
  • Coding Methodology
  • 第132回 UI/UX改善!タップエリアを拡げるCSSテクニック

コーディングメソドロジー

第132回 UI/UX改善!タップエリアを拡げるCSSテクニック

Webサイトのレスポンシブ対応が当たり前になっている昨今、デバイスの日本市場シェアはスマホ・タブレットを合わせると4割を超えます。
そんな中、UI/UX、アクセシビリティといった様々な観点からも、充分なタップエリアの確保が推奨されています。しかし、必ずしもコーディングするコントロール要素が充分なタップエリアを確保しているデザインとは限りません。
そこで今回はタップエリアをデザインに影響を与えることなく拡げるCSSのテクニックをご紹介します。

Statcounter 2019年4月〜2020年4月調べ。


充分なタップエリアとは

UI/UXの観点

Appleが公開しているユーザーインターフェイスガイドライン「Human Interface Guidelines」によると、タップが必要なコントロール要素は44 x 44pt以上を維持するよう推奨しています。
また、Googleの「Material Design」では48 x 48dpとされています。

アクセシビリティの観点

ウェブコンテンツのアクセシビリティガイドライン、WCGA(Web Content Accessibility Guidelines) 2.1の達成基準「2.5.5 Target Size」によると、少なくとも44 x 44pxが必要とされています。

これら複数のガイドラインの観点から考えられる充分なタップエリアとは、最低でも44 x 44px以上を維持するということになります。

実装例

例えば、下記のようなリンクボタンがあった場合、通常タップエリアはテキストの幅・高さと同じ範囲(ピンクのエリア)になります。

タップエリアがテキストの幅・高さと同じ範囲の画像

この場合、幅は44px以上になっているかもしれませんが、高さは44pxを確保できていないでしょう。aタグにpaddingを設定してタップエリアを確保することは簡単ですが、要素の間の余白に大きく影響が出てしまいます。

そこでコード1:HTMLコード2:CSSのように記述することで、余白を変えずにタップエリアを拡げることが可能です。aタグの中に擬似要素を配置することで表示に影響なく、タップエリアを維持することができます。min-widthとmin-heightで44pxを確保しつつ、中央配置になるように設定しています。(は、タップエリアを可視化。確認後、削除)

タップエリアが44 x 44px以上確保されている画像

コード1:HTML

<a href="#">次の記事へ</a>

コード2:CSS

a {
  position: relative;
  display: inline-block;
}
a::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 44px;
  min-height: 44px;
  transform: translate(-50%, -50%);
  background: rgba(255, 0, 0, 0.3); ―①
} 
  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム