UXやアクセシビリティ視点で「ボタンは小さすぎないように」というアドバイスをよく見かけます。
ボタンの重要度
画面に表示するボタンは目的の重要性によってデザインを組み分けます。
重要度別のボタン例です。
プライマリーボタンはお問い合わせや資料請求などサイトの目的に直結するボタン、セカンダリーボタンはお問い合わせ内容の再確認など、ターシャリーボタンはキャンセルや画面を戻る目的などで使われます。
ボタン表示例
重要度を3段階設計したとしても必ずしも全てのボタンを使わなければいけないことはありません。
お問い合わせのような送信が主目的の場合は目立つようなデザインを採用するのが良いでしょう。
カートの商品購入のような購入に関係する重要なオプションがある場合はセカンダリーボタンを採用してユーザーがオプションを見逃さないように設定することが多いです。
プログラム更新通知のような主目的以外のボタンの優先度が離れていない場合は目立たないターシャリーボタンを使う必要がないこともあるでしょう。
テキストボタンのターゲット領域
この記事の本題のボタンのクリックできる範囲についてです。クリックできる範囲はターゲット領域と呼ばれます。
ターゲット領域は幅/高さが、44px/44px以上が良いとされています。
これはスマホ操作時のタップ位置の荒さをカバーするために重要です。
次に、背景や枠線がないボタンです。先述の例のターシャリーボタンのように初期状態がテキストのみの場合やアイコンのみのボタンの場合は透明のターゲット領域を用意しておくことでカバーすることができます。
例に挙げたターシャリーボタンもテキストの周りに他のボタンと同等の大きさのターゲット領域を用意しています。
ターゲット領域を広げる豆知識
ボタンの配置する位置によってはpaddingやwidth/heightでターゲット領域を確保できないことがあります。
例えば、「詳しく見る」のようなセクション中のリンクボタンでpaddingによって位置をずらしてくない場合や、ヘッダーに新しくボタンを配置する場合でよく遭遇する問題です。
そんな時は擬似要素を使ってその要素の大きさを親DOMに依存させることなくターゲット領域を確保しています。
擬似要素にabsoluteを設定してボタン範囲の外側まで広げています。
.target-button {
text-align: right;
}
.target-button::before {
content: '';
position: absolute;
inset: -12px -24px; // top・right・bottom・leftを1ラインでかけるショートハンド
}これでデザインルールや崩れに対応したままターゲット領域を確保することができます。
参照
デジタル庁デザインシステムβ版 (https://design.digital.go.jp/components/button/)
7 Basic Rules for Button Design. by Nick Babich | by Nick Babich | UX Planet (https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4)
達成基準 2.5.5: ターゲットのサイズを理解する(https://waic.jp/translations/WCAG21/Understanding/target-size.html)
