ユーザーのアクションをトリガーし、画面内の「次にすべきこと」を視覚的に明確にする部品。
ボタンは見た目の部品であると同時に、フィッツの法則がそのまま効く操作対象です。押しやすさはクリック領域・到達しやすさで、画面内の優先順位は主要導線と視覚的階層で判断します。
この記事を読むと、バリアント選択・状態設計・A11y要件の判断が自分でできるようになります。
1. UI例（Preview / Live）
このボタンは、デザインシステム GUNJO の Button 実装です。バリアント（役割）・サイズ・状態を、実際の設計トークンでそのまま確認できます（右上の Code で編集も可能）。
実装で見る（GunjoUI）
この部品を、デザインシステム GUNJO の実装で確かめられます。
2. 定義（Definition）
ユーザーのアクション（送信・保存・削除など）をトリガーする最も基本的なインタラクション要素。
リンクとの違い：<a> はページ遷移、<button> はシステム状態の変更。役割が異なるため混用しない。
3. 使い分け（When to use / When NOT to use）
3.1 When to use
- フォームの送信やデータの保存・削除など、システムの状態を変更するとき
- ユーザーに特定のアクションを強く促したいとき
- モーダルの開閉など、UIの状態を切り替えるとき
3.2 When NOT to use
- 単純な別ページへの遷移（テキストリンクまたは
<a>を使う） - 文章の中にインラインで埋め込むとき（リンクを使うべき）
- アイコンだけで意味が伝わらない場合（
aria-labelなしのアイコンボタンは不可）
3.3 代替UI（Alternatives）
- ページ遷移 →
Link（<a>） - トグル切替 →
Toggle/Switch - メニュー展開 →
DropdownMenu
4. 設計判断の核（Decision Principles）
アクションの重要度と視覚的重みを必ず一致させる。
判断の優先順位：① 役割（何をする？） → ② 優先度（この画面で何が主役？） → ③ 状態（今使えるか？） → ④ 配置（どこに置く？）
- Primaryは1画面（1セクション）に1つまで
- 複数並ぶ場合は Primary / Secondary / Tertiary で明確なコントラストをつける
- 破壊的操作（削除・リセット）は必ず Destructive スタイルで意味を分離する
- ボタンのラベルは「動詞」で書く（×「設定」→ ○「設定を保存する」）
5. 状態設計（States）
5.1 必須状態（Required）
- Default：操作可能な基本状態。クリッカブルであることが見た目で分かること
- Focus：キーボード操作時にフォーカスリングを表示（省略不可）
- Disabled：透明度を下げ、操作不可を示す。
cursor-not-allowedを付与
5.2 条件付き状態（Conditional）
- Hover：マウスオーバー時に背景色・影を変化させクリッカブルと示す
- Active：クリック・タップの瞬間に押下感を伝える（scale or 色を濃く）
- Loading：処理中にスピナーを表示し、ボタンを同時に disabled にして重複送信を防ぐ
5.3 State Gallery
| 状態 | 必須 | 何を伝えるか |
|---|---|---|
| Default | ✅ | 押せることを示す |
| Focus | ✅ | 今ここにいることをキーボードユーザーに示す |
| Disabled | ✅ | 今は押せないことを示す |
| Hover | — | 押せることをマウスユーザーに強調する |
| Active | — | 押した瞬間の押下感を伝える |
| Loading | — | 処理中であることを伝え、重複操作を防ぐ |
6. バリエーション設計（Variants）
見た目の違いではなく、意味の違いでバリアントを選ぶ。
| バリアント | 目的 | 1画面での上限 |
|---|---|---|
| Primary | 最重要アクション | 1つ |
| Secondary | 補助的なアクション | 複数可 |
| Tertiary | キャンセル・低優先アクション | 複数可 |
| Destructive | 削除など不可逆な破壊的操作 | 文脈で判断 |
禁止パターン：同一画面に Primary が複数 → どれを押すべきか分からなくなる
併用の指針：Primary + Secondary の組み合わせが最も安全。Tertiary は3つ以上並べない。
7. パターン集（Good / Bad / How to fix）
7.0 よく崩れる設計パターン（3つ）
- 優先順位の崩壊：Primaryボタンが複数存在し、どれを押すべきか迷わせる
- 状態の欠落：Hover/Focus/Loadingがなく、押せるのか・押せたのか伝わらない
- リンクとの混同：ページ遷移（
<a>）とアクション実行（<button>）の役割が曖昧になる
7.1 Bad（典型3つ）
- 「保存」「次へ」「キャンセル」が全て同じ青塗りつぶしで並んでいる
- Loadingスピナーを出しているのにボタンが押せるまま → 重複送信が発生する
- アイコンのみのボタンに
aria-labelがない → スクリーンリーダーが読み上げられない
7.2 Good（対になる3つ）
- 「保存」をPrimary、「次へ」をSecondary、「キャンセル」をTertiaryに → 重要度が一目瞭然
- Loading時に
disabledを同時付与 → 重複送信ゼロ - アイコンボタンに
aria-label="閉じる"を付与 → 全ユーザーが操作できる
7.3 How to fix（手順）
- この画面で「最もユーザーに押してほしいアクション」を1つ決める
- そのアクションだけに Primary スタイルを適用する
- 残りのアクションを重要度順に Secondary / Tertiary に降格する
- 削除など破壊的アクションは Destructive スタイルへ変更する
- 各ボタンに Focus / Disabled / Loading の状態が実装されているか確認する
7.4 GUNJO 実装で見る（Bad / Good）
同じ GUNJO の Button を、崩れた使い方と正しい使い方で並べたもの。
8. ルール（Must / Better）
Must（守らないと壊れる）
Better（品質が跳ねる）
9. アクセシビリティ要件（必須）
Keyboard
Tabでフォーカスでき、EnterおよびSpaceでアクションを実行できること
Focus
- フォーカスリングは周囲の要素と4.5:1以上のコントラストを持つこと
Screen Reader
- ラベルは文脈に依存しない明確な動詞にする。アイコンのみのボタンは
aria-label必須
<!-- アイコンのみのボタン例 -->
<button aria-label="閉じる">
<svg aria-hidden="true">...</svg>
</button>
Touch / Pointer
- 最小タップ領域 44×44px 以上を確保する
Contrast / Readability
- ボタンテキストと背景色は4.5:1以上のコントラスト比を確保する
10. 実装メモ（Implementation Notes）
<a>にonClickでアクションを実行するパターンは避ける。必ず<button type="button">を使うtype="submit"は<form>内での送信専用。意図しない送信を防ぐため、アクション専用ボタンにはtype="button"を明示する- Disabled 状態では
pointer-events: noneだけでなくaria-disabled="true"またはdisabled属性を付与してスクリーンリーダーにも伝える - Tailwind の
focus-visible:outlineを使うと、マウス操作時はリングを出さずキーボード操作時だけ表示できる（UXとA11yの両立）
11. 関連リンク
- 関連するUIデザイン原則: 視覚的階層 (Visual Hierarchy), フィードバック (Feedback), アフォーダンス (Affordance), Fittsの法則 (Fitts's Law)
- 用語集（定義）: コールトゥアクション (Call to Action), アクセシビリティ (Accessibility)
まとめ
ボタンの設計は「ユーザーを迷わせない」ことが全てです。迷ったら 4. 設計判断の核 に戻り、アクションの重要度と視覚的重みが一致しているかを確認してください。状態設計（5.）とバリアント選択（6.）が揃えば、UIの品質と安定感は大きく向上します。
