画面にボタンをいくつか置こうとしたとき、「全部同じ見た目でいいのかな」「どれを目立たせればいいんだろう」と迷ったことはありませんか。
UIのボタンには、重要度や役割に合わせたいくつかの種類があり、それを使い分けることで、ユーザーは迷わず次の操作を選べるようになります。
この記事では、UIボタンの代表的な種類(プライマリー・セカンダリー・テキストボタン・アイコンボタンなど)と、1つの画面での使い分け方を、見本を使って初心者向けに解説します。
この記事の見本は、サイトの配色ではなく、架空のサービスの配色(青系)で描いています。見本の部品は押しても動きません。
UIボタンの種類
まずは、ボタンとはどんな部品なのかを確認し、重要度や役割で分けた代表的な種類を見ていきましょう。
ボタンとは
ボタンとは、押すと「送信する」「保存する」「カートに入れる」などの操作が実行される部品です。
似た部品にリンクがありますが、リンクは主に別のページへ「移動」するためのもので、ボタンはその場で何かを「実行」するためのもの、という違いがあります(ただし、申し込みページへ進む入り口のように、移動のためのリンクをボタンの見た目にすることもよくあります)。
「申し込みページへ進む」「レジに進む」のように、ユーザーに必ず通ってほしい入り口は、文字のリンクのままだとほかの文章に埋もれて見落とされやすくなります。
そのため、移動であっても大事な一歩は、目に留まりやすいボタンの見た目にするのです。
1つの画面には、「購入する」「キャンセル」「詳しく見る」のように、大事さの違うボタンが一緒に並ぶことがよくあります。
そこでボタンは、重要度に合わせて見た目の強さを変えた、いくつかの種類を用意して使い分けます。
重要度で分ける3つの種類
ボタンは、重要度の高い順に「プライマリー」「セカンダリー」「ターシャリー」の3段階に分けるのが基本です。
プライマリー(primary)は「第一の」、セカンダリー(secondary)は「第二の」、ターシャリー(tertiary)は「第三の」という意味です。
劇の配役にたとえると、プライマリーは画面でいちばん押してほしい「主役」、セカンダリーは主役の次に選ばれる「助演」、ターシャリーは目立たなくてよい「脇役」です。
デジタル庁デザインシステムでは、塗りボタンをプライマリー、枠線だけのアウトラインボタンをセカンダリー、文字だけのテキストボタンをターシャリーにすると、重要度の違いが最も分かりやすくなると説明しています(ボタン 使い方 – デジタル庁デザインシステム)。
| 種類 | 見た目 | 重要度 | 使う場面の例 |
|---|---|---|---|
| プライマリーボタン | 背景を色で塗りつぶす | 高 | 「購入する」「申し込む」「保存する」 |
| セカンダリーボタン | 枠線だけ、または控えめな塗り | 中 | 「資料を見る」「下書き保存」 |
| テキストボタン(ターシャリー) | 枠も塗りもなく文字だけ | 低 | 「キャンセル」「スキップ」「詳しく見る」 |
見た目の強さに差があると、ユーザーは説明を読まなくても、どれがいちばん大事な操作なのかを一瞬で判断できます。
なお、呼び方はデザインシステム(サービス全体の部品やルールをまとめたもの)によって少しずつ違います。
たとえばGoogleのMaterial Designでは、塗りつぶし(filled)・控えめな塗り(tonal)・影付き(elevated)・枠線(outlined)・テキスト(text)のように、さらに細かく分けています(Buttons – Material Design 3(英語))。
初めのうちは、「塗り・枠線・文字だけ」の3つを押さえておけば十分です。
アイコンボタン
アイコンボタンとは、文字を使わず、アイコン(小さな絵記号)だけで操作を表すボタンです。
閉じる「×」や検索の虫眼鏡、お気に入りのハートのように、場所を取らずに置けるので、ヘッダーやカードの隅などの狭い場所でよく使われます。
ただし、アイコンだけで意味が伝わるのは、多くの人が見慣れた記号に限られます。
AppleのデザインガイドラインHuman Interface Guidelinesでも、よく知られた操作にはよく知られたアイコンを使い、短い文字のほうがはっきり伝わる場合は文字を使うよう勧めています(ボタン – Human Interface Guidelines)。
NGの見本の記号は、作った人には意味があっても、初めて見る人には何のボタンか分かりません。
OKの見本のように、見慣れた記号はアイコンだけでよく、意味が伝わりにくい操作にはアイコンに文字を添えると、迷わず押せます。
また、アイコンは小さいぶん押せる範囲も小さくなりがちなので、見た目のアイコンが小さくても、押せる範囲は44px四方程度まで広げておきましょう(ボタンの内側の余白とは?で解説しています)。
スマホでは指先で押すため、小さな虫眼鏡のマークだけをぴったり押すのは意外と難しいものです。
マークの見た目は小さいままでも、その周りの見えない部分まで含めて「ここを押せば反応する」範囲(タッチ領域)にしておくと、少しずれても押せるようになります。
そのほかのボタン
3つの種類とアイコンボタンのほかに、役割の決まったボタンもあります。
- 危険な操作のボタン
「削除する」「解約する」のように、取り消せない操作のボタンです。
メインのボタンとは見た目を変え、エラーなどの注意に使う赤系の色で区別するのが一般的です。 - フローティングアクションボタン(FAB)
Material Designで使われる、画面の隅に浮かぶように表示される丸や角丸四角のボタンです。
「新しく作成する」のような、その画面でいちばん大事な操作を、いつでも押しやすい位置に置くために使います。
危険な操作のボタンは、うっかり押されないことが大切です。
Appleのガイドラインでも、削除のような取り消せない操作のボタンは、たとえいちばん選ばれそうな操作であっても、メインの(最も目立つ)ボタンにしないよう勧めています。
このメモを削除しますか?
削除したメモは元に戻せません。
このメモを削除しますか?
削除したメモは元に戻せません。
NGの見本では、「削除する」がいつもの「保存する」などと同じ見た目なので、よく読まずに押してしまうおそれがあります。
OKの見本では、赤系の色で「いつもと違う、注意が必要な操作」だと伝わり、「元に戻せません」という説明とあわせて、押す前に立ち止まれます。
赤い色だけに頼らず、「削除する」のように操作がはっきり分かる文言にしておくことも大切です。
1画面でのボタンの使い分け
ボタンの種類が分かったら、次は1つの画面の中でどう組み合わせるかを考えます。
ポイントは、メインのボタンを絞ること、並べ方と文言をそろえること、大きさを役割に合わせることの3つです。
プライマリーボタンは1画面に原則1つ
いちばん目立つプライマリーボタンは、1つの画面に原則1つだけにします。
目立つボタンがいくつも並ぶと、どれも同じくらい大事に見えて、ユーザーはどれを押せばいいか迷ってしまうからです。
デジタル庁デザインシステムでも、プライマリーのボタンは「ひとつの画面につき、原則1つまで」とされています(ボタン 使い方 – デジタル庁デザインシステム)。
Appleのガイドラインでも、目立つスタイルのボタンは1つの画面に1つか2つまでにし、多すぎると選ぶ前に考える負担が増えると説明しています(ボタン – Human Interface Guidelines)。
プレミアムプランを始めますか?
プレミアムプランを始めますか?
NGの見本では、3つのボタンが同じ強さで主張し合い、視線が定まりません。
OKの見本では、「申し込む」だけが塗りつぶされているので、まず目が行き、ほかの2つは「別の選択肢」として落ち着いて見比べられます。
なお、「1画面に1つ」は、スクロールせずに見える範囲での話です。
このルールの目的は、同時に目に入る範囲に目立つボタンを並べて、「どれを押せばいいの?」と迷わせないことにあります。
縦に長いページで、同じ「申し込む」ボタンを途中と最後に置くのは問題ありません。同時には目に入らず、どれも同じ操作なので、迷わせることがないからです(CTAボタンの置き方はCTAボタンとは?で解説しています)。
並べ方と文言をそろえる
複数のボタンを並べるときは、サイトの中で並べる順番と文言の付け方をそろえます。
画面によって「キャンセル」と「保存する」の位置が入れ替わると、慣れたユーザーほど、いつもの位置にあるボタンを押して間違えてしまうからです。
メインのボタンを右に置くか左に置くかは、OSやデザインシステムによって考え方が分かれるので、「どちらが正解」というより、自分のサイトの中で一度決めたら守ることが大切です。
文言は、「OK」「はい」のようなあいまいな言葉より、「保存する」「削除する」のように押すと何が起きるかが分かる動詞にします。
Appleのガイドラインでも、ボタンの文字は「カートに追加」のように動詞で始めると、操作の内容が伝わりやすいとしています。
押してもらいたいボタンの文言の工夫は、CTAボタンの文字デザインとはで解説しています。
大きさは役割と画面に合わせる
ボタンの大きさも、重要度や使う場所に合わせて何段階か用意しておくと便利です。
デジタル庁デザインシステムでは、ボタンの高さをLarge(56px)・Medium(48px)・Small(36px)・X-Small(28px)の4段階で用意したうえで、押せる範囲は44 CSS px以上を保つよう定めています。
スマホで指で押すボタンは、高さ44〜48px程度を目安にすると押しやすくなります。
高さと内側の余白の決め方はボタンの内側の余白とは?、ボタン同士や周りとの間隔はUIコンポーネントの間隔とは?で解説しています。
ボタンの色の決め方(アクセントカラーの使い方など)は、リンク・ボタンなどのUIカラーとは?を参考にしてください。
実践のポイント
ボタンの種類を使い分けるときに陥りやすい失敗と、よくある疑問をまとめます。
注意点・よくある間違い
- 押してほしい気持ちが強くて、すべてのボタンをプライマリーにしてしまうことがあります。
全部が目立つと、結局どれも目立たなくなります。
1つの画面でいちばん大事な操作を1つ決め、それ以外は控えめな種類にしましょう。 - テキストボタンを本文の文字と同じ色にしてしまうことがあります。
押せることに気づいてもらえません。
テキストボタンも、リンクと同じように本文とはっきり違う色にしておきましょう。 - 「削除する」などの危険な操作を、いつものメインボタンと同じ見た目にしてしまうことがあります。
よく読まずに押されてしまうおそれがあるので、色と文言で区別しましょう。 - 画面ごとにボタンの角の丸みや大きさを少しずつ変えてしまうことがあります。
同じ種類のボタンは、サイトの中でいつも同じ見た目にしておきましょう。
よくある質問
- Q. 押せないボタン(無効状態)は、グレーにして置いておけばいい?
A. グレーにして押せない状態を示す方法は一般的ですが、なぜ押せないのかが分からないと、ユーザーは困ってしまいます。
たとえば、利用規約に同意するチェックを入れ忘れていても、グレーのボタンを見ただけでは、何が足りないのかに気づけません。
デジタル庁デザインシステムでも、ボタンを無効にする設計にする前に、そもそも無効にする必要があるかを注意深く確認するよう呼びかけています。
押せない理由(「必須項目を入力してください」など)を近くに表示するか、押したときに何が足りないかを伝える方法も検討しましょう。 - Q. セカンダリーボタンとテキストボタンは、どう使い分ける?
A. メインと並ぶ「もう1つの選択肢」として見比べてほしいものはセカンダリー、キャンセルやスキップのように目立たなくてよいものはテキストボタンにすると分かりやすくなります。 - Q. アイコンボタンには、必ず文字を添えたほうがいい?
A. 「×(閉じる)」や虫眼鏡(検索)のように見慣れた記号なら、アイコンだけでも構いません。
意味が伝わるか自信がないときは、文字を添えましょう。
また、画面の読み上げ機能を使う人のために、コードでは「閉じる」のような名前をボタンに付けておく必要があります。
まとめ
UIボタンには、重要度の順にプライマリー(塗り)・セカンダリー(枠線)・テキストボタンの3つの種類があり、ほかにアイコンボタンや危険な操作のボタンなどがあります。
1つの画面ではプライマリーボタンを原則1つに絞り、並べ方と文言、大きさをサイトの中でそろえると、ユーザーは迷わず操作を選べます。
まずは自分が作った画面を1つ開き、塗りつぶしたボタンがいくつあるかを数えて、2つ以上あれば1つに絞れないか考えてみてください。
