CVボタンは基準を満たしているか？Material Design・Apple HIG・WCAGで見る設計チェックリスト

2026年 9月16日

なぜボタン・リンクの「基準準拠」がCVに影響するのか

CVボタンの改善というと、色やサイズ、配置といった個別のノウハウに目が向きがちです。しかし、その前に確認すべきことがあります。それは「そもそも公的なUIガイドラインの基準を満たしているか」という点です。

Material DesignやApple Human Interface Guidelines（HIG）、WCAGといったガイドラインは、多くのユーザーが快適に操作できるよう、長年の知見に基づいて策定されています。これらの基準から外れた実装は、タップミスや誤操作、操作対象が認識できないといった問題を引き起こし、結果としてCV機会の損失につながります。

また、WCAGはアクセシビリティのための規格ですが、その多くの基準は「誰にとっても操作しやすいUI」を目指すものであり、一般的なユーザーの使いやすさにも直結します。アクセシビリティ対応とCV改善は、切り離して考えるものではなく、同じ課題の両輪として捉えることが重要です。

主要ガイドラインの比較：Material Design・Apple HIG・WCAG 2.2

ボタン・リンクの実装基準は、プラットフォームや規格によって定められています。ここでは代表的な3つのガイドラインにおける「タップ領域・クリック領域」の基準を整理します。

Material Designのタップ領域基準

Googleが提唱するMaterial Designでは、タッチターゲットの最小サイズを48×48dp（density-independent pixels）としています。これは指でのタップ操作を想定した基準であり、これより小さいと誤タップが発生しやすくなるとされています。

Apple Human Interface Guidelinesの基準

AppleのHIGでは、タップ可能な要素の最小サイズを44×44ptとしています。Material Designよりやや小さい数値ですが、いずれも「指での操作に十分な余裕を持たせる」という考え方は共通しています。

WCAG 2.2で追加された操作性関連の基準

WCAG 2.2では、成功基準2.5.8「Target Size（Minimum）」が新たに追加されました。これはレベルAAの基準で、操作対象のサイズを少なくとも24×24 CSSピクセル確保することを求めるものです（インライン要素や十分な余白がある場合など、一部例外あり）。

Material DesignやHIGと比べると数値は小さく見えますが、WCAG 2.2はあくまで「最低限満たすべきライン」であり、Material DesignやHIGの基準はそれよりも余裕を持たせた推奨値と捉えると理解しやすくなります。WCAG 2.2で追加されたその他の基準については、以下の記事で詳しく解説しています。

・WCAG 2.2で追加された新基準：今すぐ対応すべきポイント解説

サイズ以外にも、ボタンの配置や余白の取り方によって使いやすさは大きく変わります。基準値を満たすだけでなく、実際の操作感まで含めて確認したい場合は、以下の記事も参考になります。

・ボタンは大きければ良い？UXが劇的に変わる適切なサイズと配置

自社のボタン・リンクをセルフチェックするリスト

複数のガイドラインを踏まえ、自社サイトのボタン・リンクを見直す際のチェックポイントを整理します。

サイズ・余白の基準確認

  • タップ領域が最低でも24×24 CSSピクセル（WCAG 2.2基準）を満たしているか
  • 可能であればMaterial Design（48×48dp）やApple HIG（44×44pt）の基準に近づけられているか
  • ボタン同士やリンク同士の間隔が狭すぎて誤操作を誘発していないか

役割（role）や名前が適切に伝わるか

  • スクリーンリーダーなどの支援技術で、ボタンやリンクの役割・目的が正しく読み上げられるか
  • 「こちら」「詳しくはこちら」など、文脈がないと意味が分からないリンク文言になっていないか

リンクの文言設計については、以下の記事で具体的なNGパターンを紹介しています。

・音声読み上げで“リンクが何だか分からない”問題：実務で避けるべき文言一覧

リンクとボタンの視覚的区別ができているか

  • ユーザーが見た瞬間に「クリック（タップ）できる要素」だと認識できるデザインになっているか
  • リンクとボタンの役割が混在し、ユーザーの期待する挙動とズレが生じていないか

この点については、以下の記事で詳しく取り上げています。

・“リンクなのかボタンなのか”迷わせないUI設計のコツ

また、独自にカスタマイズしたUIコンポーネントを使っている場合、標準的なHTML要素では自動的に満たされる基準が抜け落ちてしまうことがあります。カスタムUI部品を採用している場合は、以下の記事もあわせて確認することをおすすめします。

・「カスタムUI部品」がA11y崩壊しやすい：実務で避ける設計

基準を満たしていても押されない場合の追加観点

ここまで紹介したガイドライン基準は、いずれも「操作できる状態」を保証するための前提条件です。しかし、基準を満たしているからといって、必ずしもボタンが押されるとは限りません。

サイズや配置、視覚的な識別性といった基準を満たした上で、それでもクリック率が伸び悩む場合は、「なぜこのボタンを押すべきか」というユーザーの動機づけ、つまり心理的な要因に課題があるケースが少なくありません。これは基準準拠のチェックとは別の観点であり、コピーライティングや文脈設計、周辺情報の見せ方といった要素が関わってきます。

このテーマについては、以下の記事で詳しく解説しています。

・ボタンが押されない原因はサイズではない：「押す理由」が弱い

基準準拠のチェックと心理的要因の見直しは、どちらか一方ではなく、両方を組み合わせて初めてCV改善の効果が見えてきます。

専門家による診断のすすめ

ここまで紹介したチェックリストは、自社である程度実施できる内容です。しかし、実際のサイトでは以下のような理由から、社内チェックだけでは見落としが生じやすいのも事実です。

  • ガイドラインの解釈が担当者によって異なり、判断基準がぶれてしまう
  • スクリーンリーダーなど支援技術での実際の挙動まで検証しきれていない
  • カスタムコンポーネントが多く、標準的なチェック手法が当てはまらない箇所がある

こうした見落としを防ぐには、第三者による客観的な診断が有効です。UI/UXリサーチやWebアクセシビリティ診断の専門的な知見を活用することで、自社だけでは気づきにくい問題点を洗い出し、ガイドラインへの準拠状況を体系的に把握できます。

ボタン・リンクの実装がガイドライン基準を満たしているか不安がある場合、また基準準拠を前提とした上でCV改善の次の一手を検討したい場合は、専門家による診断・改善支援の活用をご検討ください。

コラム一覧