ボタン・アクションシステム は何をしますか？
目的
ボタン・アクションシステムは、ユーザーインタラクションの主要なドライバーを設計するための方法論を提供します。ボタンは、ユーザーの意図とシステムの応答を結びつける基本的な要素です。このシステムは、すべてのアクションが視覚的に優先順位付けされ（階層）、一貫したスタイルが適用され（統一性）、すべてのデバイスで操作しやすい（ユーザビリティ）ことを保証します。「ボタンを作る」という行為を超えて、レイアウト内で異なる種類のアクションが互いにどのように関連するかという論理的なフレームワークを定義します。
ユースケース
- デザインシステムのボタンコンポーネントライブラリを定義する。
- ヒーローセクションやページヘッダーにおけるアクションの階層を確立する。
- 関連するアクションのグループ（例：保存、キャンセル、削除）を整理する。
- アイコンのみのボタンやフローティングアクションボタン（FAB）などの特殊なトリガーを設計する。
- ボタンサイズとレイアウト密度の関係を標準化する。
使用すべきでない場合
- グローバルナビゲーションリンク: 主要なサイトセクション間を移動する場合は、
site-navigation-systemを使用してください。 - テキスト内ハイパーリンク: 段落テキスト内に埋め込まれ、詳細情報にリンクする場合は、標準のタイポグラフィ処理を使用してください。
- 純粋に装飾的な要素: クリックやタップができない要素にボタンスタイルを使用しないでください。
- 複雑なフォーム入力: オプションを選択する場合（チェックボックス、ラジオボタン、セレクト）は、
form-design-systemを使用してください。
入力
- アクションの優先度: タスクはプライマリ（レベル1）、セカンダリ（レベル2）、またはターシャリ（レベル3）ですか？
- アクションの性質: アクションは「ポジティブ」（送信）、「ニュートラル」（キャンセル）、または「破壊的」（削除）ですか？
- コンテキスト密度: ボタンはどこに配置されますか？（例：広々としたヒーロー vs. コンパクトなデータテーブル行）
- ブランドトークン: カラーパレット、タイポグラフィスケール、角丸の設定。
出力
- ボタンバリアントマトリックス: プライマリ、セカンダリ、ゴースト、デンジャーの各バリアントに定義されたスタイル。
- サイズスケール: 高さとパディングの範囲（例：Small、Medium、Large）。
- アノテーション仕様: テキスト、アイコン、コンテナの内部スペーシングルール。
- アクショングループ化ルール: 複数のボタン間の配置、順序、間隔に関するガイドライン。
ワークフロー
1. バリアント階層の確立
ユーザーゴールに対する重要度に基づいて、ボタンに視覚的な重みを割り当てます。
- プライマリ（レベル1）: 高コントラスト、塗りつぶし背景。通常はページの「メイン」ゴール。1ビューにつき1つのみ。
- セカンダリ（レベル2）: アウトラインまたは低コントラスト背景。代替アクションや補助アクションに使用。
- ターシャリ/ゴースト（レベル3）: デフォルト状態では背景や枠線なし。優先度の低いタスクや高密度UI（テーブルなど）で使用。
- デンジャー: 高コントラスト色（通常は赤）。破壊的で元に戻せないアクションに厳格に使用。
2. サイズスケールの定義
レイアウトコンテキストに合わせてボタンの寸法をマッピングします（fluid-spacing-system を使用）。
- Large（ヒーロー/ランディング）: 最大の存在感。高い垂直パディング。
- Medium（デフォルト）: フォーム、モーダル、ヘッダーの標準サイズ。
- Small（コンパクト）: サイドバー、カード、データテーブルなど、スペースが限られている場所で使用。
3. 内部アノテーションの設計
ボタンコンテナの構造を標準化します。
- パディング: 水平方向と垂直方向の比率を一定に保つ（通常、水平 = 垂直の1.5～2倍）。
- アイコン統合: アイコンとテキストの間のギャップを定義する（例：
--space-xs）。 - 角丸: 「丸み」の度合い（Sharp、Rounded、Pill）をブランドのビジュアルトーンに合わせて決定する。
4. ボタングループの作成
複数のアクションを一緒に配置する場合、論理的な順序に従います。
- 順序: プライマリアクションを「結論」の位置に配置する（デスクトップでは右、モバイルの垂直スタックでは上）。
- 間隔: グループ内のボタン間に一貫したギャップを使用する（例：
--space-s）。 - 配置: モーダル/ヘッダーでは右揃え、フォームでは左揃え、ヒーローでは中央揃え。
5. レスポンシブ動作の定義
すべてのビューポートでアクションが使用可能であることを確認します。
- 全幅（ブロック）ボタン: モバイルでは、小さなボタンがコンテナの幅いっぱいに拡張され、親指でタップしやすくなることが多い。
- アイコンのみの代替: 極度に狭いヘッダーでは、テキストラベルを非表示にしてアイコンのみにする場合がある（
aria-labelが存在することを確認）。
決定ルール
- 「プライマリは1つ」ルール: 1つのビューポート/コンテキストで表示されるプライマリ（レベル1）ボタンは1つのみとし、「選択の麻痺」を避ける。
- ゴースト vs. リンク: アクションが機能的な場合（例：「閉じる」「キャンセル」）はゴーストボタンを使用し、アクションがナビゲーションの場合（例：「ポリシーの詳細はこちら」）はテキストリンクを使用する。
- アイコン配置: リーディングアイコン（左） はアクションを明確にするために（例：検索アイコン）、トレーリングアイコン（右） は方向を示すために使用する（例：「次のステップ」への矢印）。
- デンジャーのコントラスト: 破壊的なボタンは、誤クリックを防ぐためにプライマリボタンと明確に異なる見た目にする必要がある。
制約
- アクセシビリティ: テキストはWCAG AAコントラスト（4.5:1）を満たす必要がある。インタラクティブ要素には明確な
focus状態が必須（interactive-state-systemを参照）。 - タッチターゲット: すべてのボタンは、最小インタラクティブ領域として24x24px（WCAG 2.2 SC 2.5.8）を確保する必要がある（視覚要素がそれより小さい場合でも）。プライマリアクションとモバイルレイアウトでは44x44pxを快適なデフォルトとして使用する。
- テキストの切捨て: ボタンテキストは決して切り捨ててはならない。ラベルが長すぎる場合は、文言を見直すか、ボタンが折り返し/拡張できるようにする。
よくある失敗パターン
- ボタンスープ: 1ページに3～4つのプライマリボタンを使用すると、メインCTAの重要性が薄れる。
- 「グレーゾーン」: コントラストや色が不十分なため、ボタンが無効要素のように見えてしまう。
- インタラクションの欠如:
hoverやactive状態が定義されておらず、ユーザーがクリックが認識されたかどうか分からなくなる。 - 小さなターゲット: 小さなテキストのみのゴーストボタンを設計すると、モバイル画面でタップするのがほぼ不可能になる。
- 混乱する配置: 同じフロー内で異なるボタン配置を混在させ、ユーザーが次のアクションを「探す」必要が生じる。
検証基準
- すべてのページ/ビューに明確なプライマリアクションがある。
- ボタンバリアント（プライマリ、セカンダリ、ゴースト、デンジャー）が一貫して使用されている。
- ボタンがWCAG 2.2の最小タッチターゲット24x24px（2.5.8）を満たし、プライマリおよびモバイルアクションでは44x44pxが使用されている。
- ボタンがグループ化されている場合、視覚的階層が維持されている。
- フォーカス状態が明確で高コントラストである。
- ボタンラベルは簡潔で「アクション動詞」（例：「保存」「作成」「参加」）を使用している。
- モバイルビューポートでは、タップしやすさのために必要に応じて全幅ボタンが使用されている。