インタラクティブステートシステム
目的
Interactive State System スキルは、UIコンポーネントがユーザー入力にどのように応答するかを定義するためのフレームワークを提供します。すべてのインタラクティブ要素（ボタン、リンク、入力フィールド、カード）が、すべての操作モード（マウス、キーボード、タッチ）において明確で一貫性のあるアクセシブルな視覚フィードバックを持つことを保証します。このシステムは開発者のあいまいさを排除し、エンドユーザーに高品質で応答性の高い感触を保証します。
使用例
- デザインシステムやUIライブラリのコンポーネントの振る舞いを定義する。
- 既存サイトで「動かない」または応答しないインタラクションを監査する。
- フォーカスインジケーター、ターゲットサイズ、インタラクティブアフォーダンスに関するWCAG 2.2準拠を確保する。
- フィードバックパターンを標準化する（例：すべての破壊的操作が同じように振る舞う）。
使用すべきでない場合
- 静的コンテンツ: クリック、タップ、キーボード操作がまったくない純粋な情報要素。
- 実験的なモーションデザイン: 機能的な状態フィードバックではなく、複雑で標準的でないアニメーションが目的の場合。
- 標準ブラウザデフォルト: プロジェクトがスタイル未設定のネイティブブラウザ要素に厳密に依存する場合（ただし、プロフェッショナルなWebサイトデザインでは稀）。
入力
- コンポーネントインベントリ: デザイン内のすべてのインタラクティブ要素のリスト。
- ブランドカラーシステム: 既存のプライマリ、セカンダリ、セマンティックカラースケール。
- アクセシビリティ目標: （例：WCAGレベルAA）状態のコントラスト比を決定します。
出力
- 状態マトリクス: すべてのコンポーネントのデフォルト、ホバー、フォーカス、アクティブ、無効状態を示す包括的なマップ。
- インタラクションガイドライン: トランジション、持続時間（ms）、イージング関数のルール。
- アクセシビリティ仕様: フォーカスリングとキーボード専用の視覚的手がかりの明確な定義。
ワークフロー
1. インタラクティブ要素の特定
要素をインタラクションタイプごとに分類します：
- アクション: ボタン、リンク、メニュー項目。
- 入力: テキストフィールド、チェックボックス、ラジオボタン、セレクト。
- コンテナ: クリッカブルカード、アコーディオンヘッダー、タブ。
2. 状態パレットの定義
状態ごとに視覚変数がどのように変化するかを決定します：
- ホバー（マウス）: 背景色、境界線、またはエレベーション（シャドウ）の微妙な変化。
- フォーカス（キーボード）: 高コントラストなリングまたはアウトライン。ホバー状態とは明確に区別できること。
- アクティブ/押下: 視覚的な「圧縮」（例：わずかに暗くする、または縮小）により、クリック/タップが成功したことを示す。
- 無効: 不透明度を下げ、インタラクティブな手がかりを削除する（カーソルの変更）。
- 訪問済み（リンク）: 移動済みリンクのための明確な色（コンテンツが多いサイトでは重要）。
3. フォーカスロジックの確立
キーボードユーザーが常に現在位置を把握できる「グローバルフォーカススタイル」を設計します。
- ルール: フォーカスインジケーターは、背景およびコンポーネントの非フォーカス状態に対して、少なくとも3:1のコントラスト比を持つ必要があります。
- ルール（WCAG 2.2 SC 2.4.11）: フォーカスインジケーターは、他のコンテンツによって完全に隠れてはなりません（例：スクロール時にスティッキーヘッダーがフォーカス要素を覆う）。インジケーターの少なくとも一部は常に表示されたままである必要があります。
4. タッチ（モバイル）向けの最適化
タッチデバイスにはホバー状態がないため：
active状態が即座にフィードバックを提供することを確認します。- タッチターゲットがWCAG 2.2 SC 2.5.8（最低24x24px）を満たしていることを確認し、レイアウトが許せば快適な親指操作のために44x44pxを推奨します。
- ホバーに依存した情報は削除します（タップ時や永続ラベルでツールチップを使用）。
5. トランジションの文書化
変化の発生方法を定義します：
- 持続時間: 150ms〜250msが状態変化の標準。
- イージング:
ease-in-outまたはcubic-bezier(0.4, 0, 0.2, 1)。
決定ルール
- 状態の持続性: フォーカスインジケーターは、要素がフォーカスを持っている限り表示され続ける必要があります。
- アフォーダンス優先: インタラクティブ要素は、デフォルト状態で「クリック可能」に見える必要があります（例：ボタンはクリック不可のタグよりも視覚的な重みを持つべき）。
- 色のみの状態禁止: 状態を示すために色だけに依存してはいけません（例：エラー状態にはアイコンや境界線の太さの変更を含めるべき）。
- 即時フィードバック: インタラクティブな応答は瞬時に感じられる必要があります（<100msの開始時間）。
制約事項
- アクセシビリティ: フォーカスインジケーターは、堅牢な代替手段を提供せずにCSSの
outline: noneで「隠す」ことはできません。 - レスポンシブ対応: 状態は、マウスホバーに依存せずに小さな画面でも機能する必要があります。
- パフォーマンス: 頻繁にトリガーされる状態（ホバーなど）で、レイアウトスラッシングを防ぐために、重いボックスシャドウや複雑なフィルターを避けます。
よくある失敗パターン
- 「見えない」フォーカス: ブラウザのデフォルトフォーカスリングを削除し、それを置き換えないこと。これにより、キーボードユーザーにとってサイトが使用不能になります。
- ホバーのみのロジック: 重要な情報やアクションをホバー状態にのみ配置し、モバイルでアクセス不能にする。
- あいまいなアクティブ状態: クリック時に変化しないボタン。ユーザーが複数回クリックしてしまう原因になります。
- 紛らわしい無効状態: 無効に見えるが実際はクリック可能な要素、またはその逆。
検証基準
- すべてのインタラクティブ要素に、ホバー、フォーカス、アクティブ状態が定義されている。
- フォーカスインジケーターが3:1のコントラスト要件を満たし、他のコンテンツによって完全に隠されることがない（WCAG 2.2 SC 2.4.11）。
- タッチターゲットが少なくとも24x24px（WCAG 2.2 SC 2.5.8）、44x44pxを推奨。
- 重要な情報がホバーのみのインタラクションに隠されていない。
- 無効状態が視覚的に明確で、
pointer-events: none（または同等のロジック）が適用されている。 - システムに状態の明確なトランジション/アニメーションガイドラインが含まれている。