こんにちは！UIデザイナーのYunyです。
- 画面内にボタンが多くなり、どのボタンを目立たせるべきか優先度に迷っている方
- Primary、Secondary、Tertiaryの適切な使い分け基準をチーム内で統一したい方
- 押せるUIに見えない、または誤タップを防ぐための具体的数値（44pt、コントラスト比等）を知りたい方
Webサイトやアプリの画面をデザインしていると、ボタンの優先順位や配置ルールで迷う場面は少なくありません。「どれも重要な機能だから」と誘目性の高いボタンパーツを配置しすぎると、かえって視線が散らばり、ユーザーがどのアクションを取るべきか迷ってしまいます。
今回は、Material Design 3やApple HIGのガイドラインをベースに、迷いや離脱を防ぐボタンの優先度5階層と、44pt基準をはじめとする「押せるUI」の設計ルールを実務目線で整理しました。
画面内のPrimaryボタン（主アクション）は原則1画面・1コンテナにつき1つに絞り、視覚的な重み（塗り・線・テキスト）でアクションの優先順位を明確にすることが基本です。スマートフォンでは最小タップ領域44×44pt、テキストのコントラスト比4.5:1以上を確保し、押しやすさと認知しやすさを両立させます。
- 1. なぜボタンデザインで迷うのか？現場でありがちな3つの失敗
- 1. 誘目性の高いボタンパーツが多く、視線が散らばる
- 2. 押せる要素に見えない（アフォーダンス不足）
- 3. 破壊的アクションと通常アクションの視覚的重みが同じ
- 2. ボタンの視覚的優先度（Hierarchy）5階層の使い分け
- 1. Primary Button（主アクション）
- 2. Secondary Button（副アクション）
- 3. Tertiary Button（補足・低優先度）
- 4. Destructive Button（破壊的アクション）
- 5. Ghost Button / Icon Button（省スペース用）
- ボタン5種類の比較表
- どのアクションにどのボタンを使う？3秒判定フロー
- 3. 「押せるUI」を作るための4つの設計原則（数値とアクセシビリティ）
- 1. タップ領域は最小44pt / 48pxを死守する
- 2. コントラスト比は4.5:1以上（テキスト）と3:1以上（輪郭）を確保
- 3. 視線誘導に沿った配置順（進むボタンは右、戻るボタンは左）
- 4. 文言は「動詞」で具体的に命名する
- 4. 抜け漏れを防ぐ「状態（States）」設計のチェックリスト
- 5大基本状態の役割と視覚変化
- 注意すべき「Disabled（非活性ボタン）」のユーザビリティ課題
- 5. Figmaでの破綻しないボタンコンポーネント作成手順
- Auto Layoutによるパディング設計
- アイコンとラベルのGap設定とプロパティ連携
- 6. 次のステップ：あわせて深掘りしたい知見
- 終わりに
1. なぜボタンデザインで迷うのか？現場でありがちな3つの失敗
ボタンは、ユーザーが画面上で目的を果たすための重要な操作要素です。しかし実務では、見た目や配置のバランスを崩してしまい、ユーザビリティを損ねてしまうケースがよくあります。
まずは、現場で起こりがちな代表的な3つの失敗パターンを確認しておきましょう。
1. 誘目性の高いボタンパーツが多く、視線が散らばる
自分自身も以前、設定画面や詳細画面をデザインしていた際、各アクションの重要性を意識するあまり、誘目性の高い塗りつぶしボタンを画面内にいくつも並べてしまった経験があります。
デザインレビューの場で「どのボタンが主導線なのか一瞬で判断できない」「視線が分散して認知負荷が高くなっている」と指摘され、ハッとしました。すべてのボタンを目立たせようとすると、結果的に「どれも目立たない画面」になってしまいます。ユーザーは何を優先して操作すべきか判断に迷い、最悪の場合は離脱に繋がります。
2. 押せる要素に見えない（アフォーダンス不足）
近年はフラットで無駄のないミニマルなデザインが好まれる傾向にありますが、削ぎ落としすぎると「それが押せるボタンなのか、ただのラベルなのか」がユーザーに伝わらない問題が生じます。
背景の塗りや枠線がなく、下線もないテキストや、単体で置かれたアイコンなどは、視覚的なアフォーダンス（操作の手がかり）が著しく低下します。「どこを押せば次の画面に進めるのかわからない」という状態は、ユーザーに大きなストレスを与えてしまいます。
3. 破壊的アクションと通常アクションの視覚的重みが同じ
データの完全削除やアカウントの解約など、取り消しができない重大な操作を「破壊的アクション（Destructive Action）」と呼びます。
この破壊的アクションを通常のボタンと同じ青色やグレーで配置したり、逆に「キャンセル」ボタンと同じ重みで並べてしまうと、ユーザーの誤操作を誘発する重大なリスクが生じます。「取り消せない操作」には、視覚的な警告色を用いたり、確認ステップを挟むなど、通常のアクションとは明確に異なる扱いが必要です。
2. ボタンの視覚的優先度（Hierarchy）5階層の使い分け
画面内の視線誘導を整えるためには、ボタンを視覚的な重み（Visual Weight）に応じた5つの階層に分類し、ルールに従って配置することが極めて効果的です。
各階層の役割と適切な見た目を順に解説します。
1. Primary Button（主アクション）
Primaryボタンは、その画面やコンテナでユーザーに最も起こしてほしい「主アクション」を指します。新規登録画面の「登録を完了する」、購入画面の「注文を確定する」などが該当します。
- 見た目: 高彩度の塗りつぶし（Filled）スタイルを採用し、画面内で最も強いコントラストを持たせます。
- 配置ルール: 原則として1画面、または1つのコンテナ内に「1つだけ」配置します。主導線を1本に絞ることで、ユーザーの決定スピードを最大化できます。
2. Secondary Button（副アクション）
Secondaryボタンは、Primaryボタンの対となる「代替アクション」や「副次的な選択肢」を担います。「キャンセル」「戻る」「下書き保存」などが代表例です。
- 見た目: 枠線のみのアウトライン（Outlined）スタイル、またはPrimaryより彩度を落とした淡い背景のトナル（Tonal）スタイルを使用します。
- 配置ルール: Primaryボタンの直前や隣に並べることが多く、Primaryの存在感を邪魔しない程度の視覚的重みに抑えることが重要です。
3. Tertiary Button（補足・低優先度）
Tertiaryボタンは、必須ではない「補助的な導線」や「後回しにできるアクション」に使われます。「詳細を見る」「今はスキップする」「規約を確認する」などです。
- 見た目: 背景も枠線も持たないテキストボタン（Text Button）形式にします。
- 配置ルール: 画面の余白やカードの末尾などに控えめに配置し、主動線を遮らないように配慮します。
4. Destructive Button（破壊的アクション）
Destructiveボタンは、データの完全消去やサブスクリプションの解約など、不可逆な重大操作を実行する専用ボタンです。
- 見た目: 赤系（Error / Danger）の配色を適用し、ユーザーに明確な注意喚起を促します。
- 配置ルール: 通常のPrimaryボタンの横に同列で置くことは避け、確認用のモーダルダイアログ内に隔離して配置するのが定石です。
5. Ghost Button / Icon Button（省スペース用）
GhostボタンやIconボタンは、ツールバー、ヘッダー、カードの右上など、限られたスペースで複数のアクションを提供する場合に適しています。
- 見た目: 通常時はアイコンのみ、またはごく薄い枠線のみで表示し、ホバーやタップ時に背景が現れる設計にします。
- 配置ルール: 検索、共有、お気に入りなど、一般的な記号としてユーザーに広く認知されている機能に限定して利用します。
ボタン5種類の比較表
各ボタンの特徴と使い分けを一覧表にまとめました。
| 階層 | ボタン種別 | 見た目の特徴 | 代表的な用途 | 画面内の出現頻度 |
|---|---|---|---|---|
| 高 | Primary | 塗りつぶし（Filled） | 送信、購入、登録 | 原則1コンテナに1つ |
| 中高 | Secondary | 枠線（Outlined）/ 淡い塗り（Tonal） | キャンセル、戻る、下書き保存 | 1〜2箇所 |
| 中 | Tertiary | テキストのみ（Text） | スキップ、詳細を見る | 必要に応じて配置 |
| 特殊 | Destructive | 赤系警告色（Danger） | 削除、解約、ログアウト | 確認モーダル等に限定 |
| 補助 | Ghost / Icon | アイコン主体 / 薄枠 | 共有、編集、ツールバー操作 | ヘッダーやカード内 |
どのアクションにどのボタンを使う？3秒判定フロー
新しいボタンを配置する際、どの階層を選ぶべきか迷ったら、以下の判定フロー図を活用してスムーズに決定できます。
3. 「押せるUI」を作るための4つの設計原則（数値とアクセシビリティ）
視覚的な優先度を決めたら、次は「物理的な押しやすさ」と「視覚的な認知のしやすさ」を担保します。UIデザインの実務において死守すべき4つの設計原則を解説します。
1. タップ領域は最小44pt / 48pxを死守する
スマートフォン操作において、最も頻発する不満が「意図しない隣のボタンを押してしまう」「小さすぎてタップが反応しない」という押し間違いです。
各プラットフォームの公式ガイドラインでは、以下の最小タップ領域が規定されています。
- Apple HIG（Human Interface Guidelines）: 44 × 44pt 以上
- Google Material Design 3: 48 × 48dp 以上
- WCAG 2.1（Web Content Accessibility Guidelines）: レベルAAAで 44 × 44px 以上
ここで注意すべきなのは、「見た目のボタンサイズ」と「タップ判定領域（Hit Target）」は別物であるという点です。例えば、文字だけのTertiaryボタンや小さなIconボタンであっても、透明なパディングを広げてタップ領域を44×44pt以上確保すれば、操作性は損なわれません。
2. コントラスト比は4.5:1以上（テキスト）と3:1以上（輪郭）を確保
どれほど美しい配色であっても、文字が読めなければボタンとしての機能を果たせません。アクセシビリティの世界基準であるWCAG 2.1 AA規格を満たすコントラスト比を必ず確認しましょう。
- ボタン背景色とラベル文字: 4.5:1 以上（18pt以上の太字なら3:1以上）
- ボタンの枠線・背景と画面背景: 3:1 以上（UIコンポーネントの境界線として認知可能であること）
薄いグレーの背景に白い文字を乗せたり、パステルカラーのボタンに細い白文字を配置すると、コントラスト比が2:1程度まで落ち込み、屋外の直射日光下や視覚特性を持つユーザーにとって非常に見づらくなります。Figmaのプラグイン（Stark等）を用いて、デザイン段階で数値を実測する習慣をつけましょう。
3. 視線誘導に沿った配置順（進むボタンは右、戻るボタンは左）
複数のボタンを横並びに配置する際、「PrimaryとSecondaryのどちらを左右に置くべきか」という議論がよく起こります。
人間の視線は、左から右、上から下へと流れます（グーテンベルク・ダイアグラムやZ型フロー）。そのため、「前進・肯定・完了のアクションは右」「後退・否定・キャンセルのアクションは左」に配置するのが、最も自然で認知負荷が低いレイアウトです。
- Webフォーム・ダイアログの横並び: 左側に「キャンセル（Secondary）」、右側に「登録する（Primary）」
- スマートフォンの下部固定（Bottom CTA）: 片手操作での親指の可動域を考慮し、最も押しやすい画面最下部に全幅（Full Width）でPrimaryボタンを配置
4. 文言は「動詞」で具体的に命名する
ボタン内のマイクロコピー（ラベル文言）に「OK」「送信」「はい」といった曖昧な単語を使用するのは避けるべきです。ユーザーはダイアログや説明文をすべて読まず、ボタンの文字だけを見てタップすることが多いからです。
ラベルには「そのボタンを押すと何が起きるのか」を表す具体的な動詞を配置します。
- ✕「OK」 ➔ ○「変更を保存する」
- ✕「送信」 ➔ ○「メッセージを送信する」
- ✕「削除」 ➔ ○「アカウントを完全に削除する」
動詞を具体化することで、誤操作に対する心理的ブレーキが働き、ユーザーは確信を持ってタップできるようになります。
4. 抜け漏れを防ぐ「状態（States）」設計のチェックリスト
UIデザインの実務において、ワイヤーフレームからデザインカンプへ進む際に最も考慮漏れが起きやすいのが「ボタンの状態（States）」です。静止画のデザインだけでなく、ユーザーの操作に応じて適切なフィードバックを返す必要があります。
5大基本状態の役割と視覚変化
ボタンコンポーネントには、以下の5つの状態を用意します。
| 状態（State） | 役割・発生条件 | 視覚変化・スタイリングの基準 |
|---|---|---|
| Default（通常） | 操作前の基準となる初期状態 | 通常のPrimary / Secondary等のスタイルを適用 |
| Hover（マウス乗せ） | PC環境でカーソルが乗った状態 | 背景の明度を5〜10%変化させ、押せる要素であることを明示 |
| Pressed / Active（押し込み） | クリックまたはタップされた瞬間 | scale: 0.98や背景色の明度低下で、押した手応えを返す |
| Focus（フォーカス） | キーボードのTabキー等で選択された状態 | 輪郭の周囲にアクセントカラーのアウトライン（Focus Ring）を表示 |
| Disabled（非活性） | 条件未達で操作を受け付けない状態 | グレーアウト（※理由の提示やインラインバリデーション推奨） |
注意すべき「Disabled（非活性ボタン）」のユーザビリティ課題
フォームの必須項目が未入力の際、送信ボタンを「Disabled（グレーアウト）」にして押せなくするUIをよく見かけます。しかし、この設計には大きなユーザビリティ上の問題があります。
ユーザー視点では、「なぜボタンが押せないのか、どの項目が不足しているのかが全くわからない」という強いストレスを感じ、離脱の要因になってしまうのです。さらに、Disabledボタンはコントラスト比が低く設定されることが多いため、視認性にも課題があります。
実務では、以下の代替アプローチを検討するのがおすすめです。
- ボタンをDisabledにせず活性化しておく: ボタンを押した瞬間に、未入力のフォーム項目へスムーズにスクロールさせ、赤いインラインエラーを表示する。
- ヒントツールチップを表示する: ホバー時やタップ時に「利用規約に同意すると送信できます」といった未達条件を吹き出しで案内する。
5. Figmaでの破綻しないボタンコンポーネント作成手順
実務でデザインシステムを構築する際、ボタンは最も再利用頻度が高い基礎コンポーネントです。Figmaの機能を活用して、柔軟で保守性の高いボタンを作成する手順を整理します。
Auto Layoutによるパディング設計
テキストの文字数が増減しても、ボタンのバランスが崩れないようにAuto Layoutを適用します。
ここで意識したいのが、「左右パディングは上下パディングの1.5倍〜2倍にする」という比率の設計ルールです。
- 標準ボタンの例: 上下パディング
12px/ 左右パディング20px〜24px/ 角丸8px - コンパクトボタンの例: 上下パディング
8px/ 左右パディング16px/ 角丸6px
上下と左右のパディングを同値（例: 上下16px / 左右16px）に設定してしまうと、正方形に近い不自然なプロポーションになり、テキストの視認性が落ちてしまいます。横方向に適度な広がりを持たせることで、ボタンらしい安定感が生まれます。
アイコンとラベルのGap設定とプロパティ連携
ボタン内にアイコンを配置する場合は、テキストラベルとの間隔（Gap）を8px（小さなボタンなら4px〜6px）に設定します。
さらに、FigmaのComponent Properties（コンポーネントプロパティ）を活用することで、バリアント（Variants）の数を最小限に抑えられます。
- Boolean Property（表示切り替え）:
– 先頭アイコン（leadingIcon）と末尾アイコン（trailingIcon）の表示/非表示を真偽値で切り替えられるように設定します。 - Instance Swap Property（アイコン置換）:
– アイコンのレイヤーにインスタンススワッププロパティを割り当て、右側のプロパティパネルから任意のアイコンに即座に差し替えられるようにします。 - Text Property（ラベルテキスト）:
– ラベルテキストをダブルクリックせず、プロパティパネルから直接打ち替えられるようにします。
このようにプロパティを整理しておけば、「アイコンあり」「アイコンなし」「先頭のみ」「末尾のみ」といった組み合わせごとにVariantsを増やす必要がなくなり、管理が格段にスマートになります。
6. 次のステップ：あわせて深掘りしたい知見
ボタンの優先度設計やFigmaでのコンポーネント作成をさらに深掘りしたい方は、以下の関連記事もぜひ参考にしてみてください。
終わりに
ボタンは、画面のビジュアルを構成する1パーツであると同時に、ユーザーが次のアクションへ進むための決定的な接点です。
「どれも目立たせたい」という気持ちを抑え、Primaryを1つに絞り、SecondaryやTertiaryへと段階的に重みを落としていくことで、画面全体の情報の優先順位が劇的にクリアになります。
今回ご紹介した5つの階層定義や、44pt・コントラスト比の客観的な数値をベースに、ぜひご自身のプロダクトや日々のUIデザインで「迷わず押せるボタン設計」を実践してみてください。
最後までお読みいただき、ありがとうございました。
それでは、良いデザインライフを！
