ボタン
Button
別名: プライマリボタン、セカンダリボタン、CTAボタン、アクションボタン、Primary button、Secondary button、CTA button、Call to action button
生態(さわってみる)
一言定義
クリックやタップ一つでその場のアクションを実行させる基本のUI要素で、視覚的な強弱によってプライマリ・セカンダリ・CTAなどの役割を使い分ける。
分類
使う場面
- ページ内で単一の主要アクションを目立たせたいとき(プライマリボタン)
- 主アクションと並べて、キャンセルや戻るなど従属的な操作も置きたいとき(セカンダリボタン)
- コンバージョンに直結する行動を強く誘導したいランディングページのとき(CTAボタン)
避ける場面
- 同じ画面に「最重要」を主張するボタンが何個もあるとき(強弱が崩れて全部が目立たなくなる)
- 実行結果がその場での状態変化にとどまるとき(→コピーボタンやいいねボタンのような特化型を検討)
近縁種との比較
「ボタン」はプライマリボタン・セカンダリボタン・CTAボタンという、実務でよく分けて語られる3つの 呼称を、同一UI要素の視覚的な強弱バリエーションとして1枚に統合したエントリーである。プライマリは 画面内で最も推奨する行動、セカンダリはキャンセルや戻るなど従属的な行動、CTAボタンはランディング ページなどコンバージョンに直結する行動を指す通称で、実装上はいずれも同じbutton要素に配色・彩度の 強弱をつけたものにすぎない。FABは同じ「単一の主要アクション」という役割を、画面に固定表示さ れる円形ボタンとして持たせたバリエーションで、常時スクロールに追従する点が通常のボタンと異なる。 スプリットボタンは主操作に加えて副次的な選択肢をメニューとして持つ点で、単一の役割しか持たな いボタンより複雑である。コピーボタンといいねボタンは、クリックの結果が画面遷移や送信では なく「その場での状態変化・副作用」である点で、通常のボタンより結果の粒度が小さい特化型と位置づ けられる。
実例リンク
アクセシビリティ
- role
- button(ネイティブ<button>要素。リンク遷移が目的ならaではなくbuttonを使うのが原則)
- キーボード操作
- Tabで到達、Enter/Spaceで実行
- 補足
- プライマリ/セカンダリ/CTAという呼び分けは視覚的な強弱のバリエーションであり、role等の実装上の違いはない。無効化はネイティブのdisabled属性を優先し、独自にaria-disabledを使う場合はフォーカス可能なままにするか検討する