ux-buttons

ボタンスキル

このスキルの動作(最初に読んでください)

これは生成的スキルです。デフォルトの失敗モードは正反対の2つです。平坦な画一性(すべてのアクションに同じ汎用ボタンが割り当てられ、階層がなく、曖昧な「送信/OK」ラベル、状態の欠落)と、装飾過多(すべてのボタンが浮き上がり、影が付き、ブランド色に染まり、アイコンで埋め尽くされる)です。チェックリストは命令ではないため、このスキルでは次のようにゲートします。

1. コンテキストを確立する — プラットフォーム、画面のアクション階層、ブランドの個性、および破壊的なアクションがあるかどうか。
2. 常に当てはまる核心を適用する — 階層に基づくタイプ選択、アクション動詞のラベル、すべての状態の網羅、アクセシブルなサイズとコントラスト。
3. スタイル上のレバー(形状、高さ、アイコンのみ、FAB、幅の戦略)を、デフォルトではなくトレードオフを伴う意思決定として提示する。

その後、検証のために ux-heuristics-audit、ux-accessibility-audit、ux-aesthetics-audit、ux-microcopy-audit に引き継ぎます。

---

ステップ0 — 設計前にコンテキストを確立する

不明な場合は質問し、回答なしで進める場合は前提を明示します。

• プラットフォーム — モバイルではすべてが厳しくなります。タッチターゲット(≥48×48px)、隣接するボタン間のスペース、積み重ねたボタンの固定幅、触覚フィードバック。デスクトップは代わりにホバー/カーソルの手がかりに頼ります。
• この画面のアクション階層 — ユーザーが行いに来た1つのことは何か? そのアクションだけが唯一のプライマリボタンになり、それ以外はすべてセカンダリまたはターシャリになります。
• ブランドの個性 — 真面目/信頼できる vs. 親しみやすい/遊び心がある、が形状(角ばった ↔ 丸みのある ↔ ピル型)と、スタイルがどこまで表現豊かになれるかを決めます。
• 破壊的または不可逆的なアクション? — これらはデフォルトを反転させます。明示的な動詞ラベル(「プロジェクトを削除」、決して「はい」ではない)、セマンティックな色(赤系)、決して FAB にしない、デフォルトで視覚的に最も目立つボタンにしない。

---

常に適用する核心(ほぼすべてのケースで正しい)

見た目ではなく、アクションの重要度からタイプを選ぶ

• プライマリ — インターフェースがユーザーに取ってほしいアクション。1ビューにつき1つ、視覚的に最も目立つ(彩度が高く、コントラストのある塗り)。すべてが目立てば、何も目立ちません。
• セカンダリ — 代替(送信の隣のキャンセル)。控えめ: アウトライン/ゴーストがよく機能しますが、アウトラインは見え続けるのに十分なコントラストが必要です。
• ターシャリ — まれな、または優先度の低いアクション。テキストボタン、落ち着いた色、より軽いウェイト。誤タップを防ぐため、プライマリから離して配置します。
• グルーピングのタイプ: メニュー/ドロップダウンボタンは、同等の重要度を持つ関連アクションをリストにまとめます。スプリットボタンは、デフォルトのワンクリックアクションに加えてドロップダウンを追加します。ユーザーがボタン全体がメニューを開くと思うことがないよう、視覚的な区切りを保ちます。トグルグループは、2〜3個の相互排他的な選択肢を、1つを選択した状態で見えるように保ちます。
  • ❌ 無関係なアクションの何でも詰め込みバケットとしてのドロップダウン ✅ 意思決定を簡素化するためにグループ化された、関連するアクションのみ

ラベルはコマンドである

• 結果を明示する具体的なアクション動詞: ❌「はい」/「いいえ」/「OK」/「進む」 ✅「プロジェクトを削除」/「変更を保存」/「購読する」
• 2〜3語、1行。 2行のラベルは誤った選択を引き起こします。イタリック、下線、文末の句読点はなし。本文コピーより重いウェイトで十分です。
• ラベルの最小サイズは16px、水平方向と垂直方向の中央揃え。
• アイコンは左側に(LTR 言語の場合)、認識を助ける場所に置きます。末尾のアイコンは装飾です。ただしドロップダウンの矢印は例外で、先頭のアイコンがそのためのスペースを空けます。
• アイコン+ラベルはどちらか単独よりも優れています。 フロッピーディスクは聴衆の一部には何の意味も持ちません。ラベルがあればそれが明示され、スクリーンリーダーが読み上げるものも与えられます。

静止状態だけでなく、すべての状態を設計する

有効、ホバー、押下(タップが登録されたという短いが決定的なフィードバック)、フォーカス(目に見えるリング/ボーダー — キーボードおよび支援技術のユーザーにとって不可欠。他の状態と区別がつかなくなるほど近いスタイルにしないこと)、および無効(グレーアウトし、明らかに不活性)。何かをオン/オフするボタンは、現在の方向を明示しなければなりません。

サイズ、余白、コントラストは譲れない

• モバイルでのタッチターゲットは 48×48px 以上（WCAG/Material のガイドラインに基づく指のパッド約 9mm）を確保します。デスクトップでは、十分なパディングによってクリック領域が確実に保たれます。
• パディングの目安: 水平パディング ≈ 垂直の 2 倍。最低でも、ラベルと端の間に大文字の「W」が収まるようにします。
• 最小幅を設定する — コンテンツに合わせて縮むボタンは、狭すぎるとターゲットサイズを満たさず、ボタンらしく見えなくなります。
• 隣接するボタンの間には十分な間隔を — 指が誤ったアクションに滑り込まないようにします。
• コントラスト: ボタンと背景、ラベルとボタンの両方が WCAG を満たすようにします（通常テキスト 4.5:1、大きなテキスト 3:1）。画像の背景の上では、半透明のレイヤーを追加します。正確な比率については → accessibility 監査に委ねます。

一貫性と予測可能性を保つ

• 製品全体で 1 つのボタンスタイルシステム — 同じアクションには、どこでも同じ色、形、タイポグラフィ、配置を使用します（最小驚きの原則）。
• ボタンらしく見えること。 アフォーダンスは創造性に勝ります。ユーザーが何がクリックできるかを推測しなければならない状況は避けます。
• ユーザーが期待する場所にボタンを配置する — 読書の流れの自然な終わり（Gutenberg/Z パターン: 主要アクションは、それが締めくくるコンテンツの右下）に置き、決して隠しません。
• 色は意味を担います: 破壊的なアクションには赤、主要アクションにはアクセントカラー。慣習に合わせ、ユーザーに独自の色言語を覚えさせないようにします。

---

文脈に依存する判断（表面化させ、自動適用しない）

それぞれについてトレードオフと、ステップ 0 に結びついた推奨事項を提示します。これらすべてをデフォルトで適用することは、装飾過多という失敗モードです。

判断	適用する場面	避ける / 適応させる場面	デフォルトの推奨
形状: シャープ ↔ 角丸 ↔ ピル	シャープ = 真剣、堅実（金融、保険）。角丸 = 親しみやすい、安全。ピル = 遊び心、カジュアル	温かみのあるコンシューマーブランドにシャープな角。フォーマル/エンタープライズ UI にピル	少し角丸の長方形 — 親しみやすく信頼される中間。ピル半径 = 高さの ½ + 追加の水平パディング
高さ / 影	主要アクションを持ち上げるための浮き上がったボタン。それ以外はすべてフラット	透明なボタンやラベルの近くの影（可読性を損なう）。デフォルトの黒い大きな影	ボタンの色に近い色合いの影、不透明度 40% 未満、ボタンより小さく — 奥行きの手がかりであり、装飾ではない
アイコンのみのボタン	限られたスペースでの、普遍的なアイコン（編集、削除、検索、ホーム）を使った定型的なアクション	ユーザーが解読しなければならないアイコン。アクセシブルな名前がない場所	アイコン + ラベル。アイコンのみの場合は、普遍的な記号 + アクセシブルな名前
FAB	アプリ内の 1 つの固定された、建設的な、最も使われるアクション（作成、追加）	破壊的なアクション。1 ページに複数。それが覆い隠すコンテンツ	最大 1 つ、アプリに単一の dominant な作成アクションがある場合のみ
ブランドボタン（「Google でサインイン」）	サードパーティの認証/連携ポイント	自社 UI に合わせてスタイルを変更すること — 信頼とブランドガイドラインを損なう	ブランドの公式アセットをそのまま使用し、アクションが発生する場所に配置
カスタム形状	形状が機能を増幅する場合（矢印型の「次へ」）	クリック可能性を曖昧にする新奇さ	慣習に従う。カスタムの場合は、コントラスト/サイズ/影でアフォーダンスを補強
幅: コンテンツに合わせる vs. 固定	モバイルで積み重ねた主要/二次ボタンには固定幅 — バランスが良く、スキャンしやすい	長いラベルを切り捨てる固定幅（i18n）	Web では最小幅付きでコンテンツに合わせる。モバイルの積み重ねペアには固定
触覚フィードバック	モバイル: タップ時の微妙な振動が登録を確認	すべての視覚効果 + 触覚効果を一度に重ねること（圧倒的）	視覚的な状態変化は常に。触覚はモバイルの軽い補強として

---

結果を検証する（オーケストレーション）

引き継ぎでは、各レンズをインストール可能なスキルの name で指定します。呼び出せるのは、そのスキルがインストールされている場合のみです。インストールされていない場合でも、このスキル自体のコアにこれらのルールがすでに含まれているため、ブロックせずにそのまま進めてください。

生成または修正を行った後は、完了と宣言するのではなく、結果を監査レンズに引き継いでください。これらは 候補 レンズです。姿勢は docs/orchestration-policy.md によって設定されるか、全体を ux-design-review 経由でルーティングします。ここでは、heuristics と microcopy は Tier A（自動実行）、accessibility、aesthetics、mobile-responsiveness は Tier B（オファー） です。既存のデザインシステムがある場合、aesthetics は抑制され、accessibility は使用状況に絞られます。mobile-responsiveness はモバイルにのみ適用されます。ユーザーがこのスキルを特定の目的で呼び出した場合は、そのスコープを尊重してください。

• ux-heuristics-audit (Tier A) — システム状態の可視性（状態/フィードバック）、一貫性、破壊的なボタン周りのエラー防止。
• ux-accessibility-audit (Tier B — オファー。デザインシステムがある場合は絞る) — コントラスト比、タッチターゲットのサイズ、フォーカスの可視性、アイコンのみのボタンのアクセシブルな名前。
• ux-aesthetics-audit (Tier B — オファー。デザインシステムがある場合は抑制) — 階層の明瞭さ、およびスタイリングが装飾過多（競合するプライマリ、シャドウの乱用）に傾いていないか。
• ux-microcopy-audit (Tier A) — ラベルの明瞭さ、アクション動詞の表現、製品全体でのコマンド言語の一貫性。
• ux-mobile-responsiveness-audit (Tier B — オファー。モバイルにのみ適用) — コンテキストがモバイルの場合：ターゲットサイズ、スペーシング、積み重ねボタンのレイアウト。

監査によって競合が浮上した場合（例：ブランドの表現力とアフォーダンス）、プライマリタスクに立ち返って解決してください。ユーザーが正しいアクションを即座に認識し、確実に実行できる必要があります。

---

よくある do/don't パターン

❌ しない	✅ する
1 つの画面に同じくらい目立つボタンが 3 つ	プライマリを 1 つ。セカンダリ/ターシャリは目に見えて従属させる
「はい」/「いいえ」/「OK」というラベル	結果を示すアクション動詞：「プロジェクトを削除」「変更を保存」
巧妙だが分かりにくい記号のアイコンのみのボタン	普遍的なアイコン + ラベル（最低でもアクセシブルな名前）
静止状態だけをデザインする	有効、ホバー、押下、フォーカス、無効 — すべてを区別する
モバイルで高さ 32px のタップ領域	ボタン間に余裕を持たせた ≥48×48px のタッチターゲット
「アカウントを削除」のための FAB	FAB はアプリの主要な建設的なアクションにのみ — または FAB を置かない
「Google でサインイン」をあなたのパレットに合わせてスタイル変更	公式ブランドアセットをそのまま使用
「深み」のためにすべてのボタンに影を付ける	優先度を示す場所にのみエレベーション。色付きで控えめ、ボタンより小さく
画面ごとに同じアクションで異なるスタイル	製品全体で一貫したボタンシステムを 1 つ
確認せずに出荷する	heuristics + accessibility + aesthetics + microcopy に引き継ぐ

---

ソースレッスン（Uxcel）

• UI Buttons & When to Use Them
• Types of UI Buttons
• Best Practices for Designing UI Buttons
• Best Practices for Writing Button Labels
• 11 Tips on Designing Mobile Buttons
• UI Component States