ボタン

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を使う場合はフォーカス可能なままにするか検討する