ボタン

Button

クリックやタップ一つでその場のアクションを実行させる基本のUI要素で、視覚的な強弱によってプライマリ・セカンダリ・CTAなどの役割を使い分ける。

○ 使う場面

ページ内で単一の主要アクションを目立たせたいとき（プライマリボタン）
主アクションと並べて、キャンセルや戻るなど従属的な操作も置きたいとき（セカンダリボタン）
コンバージョンに直結する行動を強く誘導したいランディングページのとき（CTAボタン）

× 避ける場面

同じ画面に「最重要」を主張するボタンが何個もあるとき（強弱が崩れて全部が目立たなくなる）
実行結果がその場での状態変化にとどまるとき（→コピーボタンやいいねボタンのような特化型を検討）

別名

プライマリボタン、セカンダリボタン、CTAボタン、アクションボタン

近縁種との比較

「ボタン」はプライマリボタン・セカンダリボタン・CTAボタンという、実務でよく分けて語られる3つの呼称を、同一UI要素の視覚的な強弱バリエーションとして1枚に統合したエントリーである。プライマリは画面内で最も推奨する行動、セカンダリはキャンセルや戻るなど従属的な行動、CTAボタンはランディングページなどコンバージョンに直結する行動を指す通称で、実装上はいずれも同じbutton要素に配色・彩度の強弱をつけたものにすぎない。「ボタン」という呼び名自体、衣服の留め具や機械式の押しボタンを指すことばをそのまま転用したもので、「押す」という物理的な操作感覚をUI上でも直感的に想起させる語として定着したとされる。

近縁種	違い・使い分け
フローティングアクションボタン（FAB）	FABは同じ「単一の主要アクション」という役割を、画面に固定表示される円形ボタンとして持たせたバリエーションで、常時スクロールに追従する点が通常のボタンと異なる。
スプリットボタン	スプリットボタンは主操作に加えて副次的な選択肢をメニューとして持つ点で、単一の役割しか持たないボタンより複雑である。
コピーボタン	コピーボタンはクリックの結果が画面遷移や送信ではなく「その場での状態変化・副作用」である点で、通常のボタンより結果の粒度が小さい特化型と位置づけられる。
いいねボタン	いいねボタンもコピーボタンと同様、クリックの結果が「その場での状態変化・副作用」にとどまる点で、通常のボタンより結果の粒度が小さい特化型と位置づけられる。

○ 使う場面

× 避ける場面

別名

近縁種との比較

分類