design-button-hierarchy

スキル：ボタンの階層を設計する

目的

プライマリ、セカンダリ、ターシャリのアクションを明確に区別し、ユーザーがどのアクションを選ぶべきか分かるようにします。

種類

生成＋評価

入力

• 必要なアクション／ボタンの一覧
• 各アクションの相対的な重要度（プライマリ、セカンダリ、ターシャリ）
• コンテキスト（フォーム、モーダル、ページ、ツールバー）

出力

• 各レベルのボタンスタイル仕様
• 既存のボタン階層に対する合格／不合格の評価

実行する変換

アクションの重要度を視覚的な表現に対応付けます。プライマリ＝ブランドカラーの塗りつぶし、セカンダリ＝アウトラインまたは控えめなスタイル（グレーの塗りつぶしを含む）、ターシャリ＝テキストのみ、またはリンクスタイルです。

判断基準

合格（適切なボタン階層）

• 画面／セクションごとに、明確なプライマリアクションが1つある（塗りつぶし、高コントラスト、ブランドカラー）
• セカンダリアクションは視覚的に控えめ（アウトライン、ゴースト、またはコントラストを抑えた塗りつぶし。グレーも含む）
• ターシャリアクションは最小限（テキストリンクまたは控えめなスタイル）
• レベル間に明確な視覚的差がある（わずか10％の違いではない）
• 破壊的なアクション（削除）には赤を使いますが、プライマリと競合しません

不合格（不適切なボタン階層）

• 複数のボタンが同等の視覚的な強さを持つ
• プライマリアクションがひと目で分からない
• 非常に薄いグレー（200）のセカンダリが無効状態に見える
• 破壊的なアクションがプライマリより目立つ
• すべてのボタンが同じ色で塗りつぶされている

ボタンスタイルのパターン

レベル	背景	境界線	テキスト	用途
プライマリ	ブランドカラー（塗りつぶし）	なし	白／明るい色	メインのCTA、保存、送信
セカンダリ	グレー（塗りつぶし）または透明	ブランドカラー（アウトラインの場合）	ブランドカラーまたはグレー	代替アクション、キャンセル
ターシャリ	透明	なし	ブランドカラーまたはグレー	任意のアクション、詳細を見る
破壊的	赤	なし	白	削除、取り除く（競合させない）
無効	グレー 200	なし	グレー 400	先に進めない状態

使用する視覚／UXのシグナル

1. 塗りつぶしとアウトライン：塗りつぶし＝プライマリ、アウトライン＝セカンダリ
2. 色の彩度：彩度が高いほど重要
3. サイズ：プライマリは少し大きくしてもかまいません
4. 位置：プライマリは右側または下側に配置されることが多い（読み進めるパターン）

よくある失敗パターン

失敗	説明	修正方法
ボタンの競合	保存とキャンセルの両方がブランドカラーで塗りつぶされている	キャンセルをアウトラインまたはグレーの塗りつぶしにする
グレーボタンの混同	非常に薄いグレー（200）のセカンダリが無効状態に見える	白に近いグレーではなく、グレー 400～500またはアウトラインを使う
赤い警告	削除ボタンがプライマリより目立つ	削除をテキストのみ、または小さくする
プライマリの過剰使用	「プライマリ」ボタンが3つ以上ある	プライマリを1つ選び、ほかはレベルを下げる
見えないターシャリ	テキストリンクが本文と同じ色	ブランドカラーを使うか、下線を付ける

前提条件

• 視覚的階層が確立されている
• カラーパレットが定義されている

依存関係

• build-color-palette（ブランドカラーとセマンティックカラーが必要）
• establish-visual-hierarchy（ボタンは階層の一部）

Refactoring UIの参考項目

• 「プライマリアクションをひと目で分かるようにする」
• 「破壊的なアクションを目立たせすぎない」
• 「セカンダリアクションは明確にしつつ、目立たせすぎないようにします。アウトラインスタイルやコントラストを抑えた背景色が適しています」

評価例

入力：「変更を保存」（青の塗りつぶし）、「キャンセル」（グレーの塗りつぶし）、「削除」（赤の塗りつぶし）があるモーダル

**評価：**部分合格

• キャンセル：グレーの塗りつぶしは、コントラストを抑えた塗りつぶしとして許容できるセカンダリの表現です
• 削除：赤の塗りつぶしが保存と競合しています（赤のテキストにするべきです）
• 問題：塗りつぶしのある2つのアクションが競合しています

推奨事項：

• 保存：青の塗りつぶしを維持する（プライマリ）
• キャンセル：グレーの塗りつぶしでも問題ありませんが、区別を明確にするためにアウトラインにしてもよいでしょう
• 削除：赤のテキストに変更する（破壊的なアクションは競合させない）