coastdigitalgroup/coastai-skills

セグメントコントロールシステム

目的

Segmented Control Systemは、コンパクトで排他的なセレクター（ボタングループ、スライディングトグル、セグメントボタンとも呼ばれる）のためのデザイン方法論を提供します。ナビゲーションメニューやコンテンツパネルタブとは異なり、セグメントコントロールは単一のコンテキストやフォーム内でインライン修飾子として機能します。ユーザーは、限られた空間フットプリント内で、表示形式を即座に変更したり、単一のデータセットをフィルタリングしたり、入力オプションを選択したりできます。

体系的なアプローチにより、これらのコントロールは一貫性のある視覚的関係、明確なインタラクティブアフォーダンス、シームレスなレイアウトスケーリング、そして適切なセマンティックアクセシビリティパターンを備え、汎用ボタンやタブナビゲーションと誤認されるのを防ぎます。

ユースケース

• ビューの切り替え: 同一コンテンツの表示形式を切り替える（例：「グリッド vs. リスト vs. マップ」または「ボード vs. カレンダー」）。
• 料金・請求トグル: 請求頻度を選択する（例：「月額 vs. 年額」）。価格表示が直接変更されます。
• マイクロフィルタリング/サブセグメント化: アクティブなリストを特定のサブカテゴリ内でフィルタリングする（例：メッセージの「すべて vs. 未読 vs. スター付き」）。
• インラインオプション選択: フォーム内で嵩張るドロップダウンセレクトメニューを、2〜5つの優先度の高い選択肢に置き換える（例：「小 vs. 中 vs. 大」）。
• インタラクティブ状態スイッチャー: ライブチャート内のアクティブなメトリクスパラメータを変更する（例：「7日 vs. 30日 vs. 1年」の期間）。

使用すべきでないケース

• フルページナビゲーション: アイテムをクリックするとページURLが変更されたり、現在のビューコンテキストからユーザーが移動する場合は、site-navigation-system を使用します。
• 大規模コンテンツパネル切り替え: オプションの切り替えによって、複雑なレイアウトのまったく異なるコンテンツブロック（設定パネルやドキュメントタブなど）が表示される場合は、tab-ui-system を使用します。
• 多数のオプション: オプションが5つを超える場合は、視覚的な混雑やテキストの水平方向のはみ出しを防ぐために、ドロップダウン選択またはフィルタードロワーを使用します。
• 複数選択設定: ユーザーが同時に複数のアクティブオプションを選択できる場合は、グループ化されたチェックボックスまたはタグ（badge-and-tag-system）を使用します。
• バイナリ動的トグル: 即座にバックグラウンドプロセスをトリガーするオン/オフ設定（例：「通知を有効にする」）の場合は、標準のトグルスイッチ（accessible-switch-implementation）を使用します。

入力

1. オプションインベントリ: 排他的なラベル、アイコン、または値のリスト（通常2〜5項目）。
2. コントロールスコープ: コントロールがフォーム入力、レイアウトビューモディファイア、メトリクススイッチャーのいずれとして機能するか。
3. コンテナ制約: 正確な幅とレイアウト環境（例：検索の隣にインライン、価格カード内で中央揃え、モバイルでは全幅）。
4. スタイルトークン: タイポグラフィスケール、スペーシング変数（fluid-spacing-system）、インタラクティブ状態（interactive-state-system）、およびカラートークン。

出力

1. コントロールアナトミー仕様: Track（背景コンテナ）、Segments（個々のボタン）、Active Indicator（スライドまたはハイライトされた背景）の視覚的定義。
2. 行動ARIAマッピング: 正しいARIAロール（role="radiogroup" と role="tablist" のどちらか）とキーボードナビゲーションルールの選択。
3. 状態遷移マトリックス: Default、Hover、Active/Selected、Focus、Disabled各状態のスタイル定義。
4. レスポンシブフロールール: 水平スケーリング、全幅フルード動作、モバイルでのリフローまたは <select> へのフォールバックの仕様。

ワークフロー

1. セマンティックな意図を特定する

コントロールが値を変更するのか、表示ビューを変更するのかを判断します。

• フォーム入力またはマイクロフィルター: 意味的にラジオグループとして機能します。送信時に保存または送信される値を変更するか、インラインリストを即座に再フィルタリングします。
• ビューコントローラー: 意味的にタブリストとして機能します。同じコンテナ内でアクティブな可視パネルまたはプレゼンテーションを切り替えます。

2. ビジュアルアナトミーを設計する

高度に洗練された統一されたビジュアルコンポーネントを構築します。デザインは3つのコアレイヤーで構成されます。

• Track: 微妙な背景色（例：低コントラストのグレー）、小さなパディング（通常2px〜4px）、角丸（半角丸またはピル型）を持つ単一の水平コンテナ。
• Segments: Track内に肩を並べて配置されたボタン。均等幅（両端揃え）であるか、一貫したパディングでコンテンツ幅に適応する必要があります。
• Active Indicator: アクティブなテキストの下に配置され、視覚的に浮き上がらせる、明確な背景（多くの場合白またはプライマリテーマカラー）と微妙なシャドウ（elevation-and-depth-system）を持つスライドする物理的なカードまたはハイライト。

3. 状態とモーションのコレオグラフィを確立する

すべてのインタラクションフェーズに対して個別の視覚的フィードバックを設定します。

• Default状態: 非アクティブなテキストは、少なくとも4.5:1の十分なコントラスト比を持つセカンダリニュートラルカラーを使用します。
• Hover状態: ターゲットセグメントに微妙なホバー背景ハイライトを表示し、クリック可能であることを示します。
• Selected状態: テキストがプライマリ/太字スタイルに変わり、Active Indicatorがその後ろにスライドします。
• Focus状態: キーボードナビゲート時、アクティブセグメントの周りに明確で高コントラストなフォーカスアウトラインを描画します。フォーカスインジケーターがTrack境界の外にはみ出さないようにします。
• Disabled状態: 透明度を下げ（通常40%）、カーソルポインターを無効にします。

4. コードとハンドオフの注釈

実装のための構造的要件を注釈します。

• 等幅分布: 必要に応じてセグメントを均等に配置するためのフレックスボックス配置（flex: 1 1 0%）を指定します。
• スライディングインジケーターのトランジション: スライディングアクティブインジケーターカードにCSSトランジションルール（transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)）を指定します。left/widthプロパティを直接変更する代わりに、ハードウェアアクセラレーションされるプロパティ（transform と opacity）を使用して、Cumulative Layout Shift（CLS）をトリガーしないようにします。

5. レスポンシブ動作を計画する

小さなビューポートでセグメントコントロールがどのように縮小するかを定義します。

• フルード両端揃え: モバイル画面ではTrackとSegmentsを100%幅に拡張し、全幅のボトムバーまたはヘッダーコンポーネントとして動作させます。
• ラベル切り詰めと最小幅: セグメントの最小幅を厳格に適用し、テキストの折り返しによってボタン内で複数行にならないようにします。
• オーバーフロードロップダウンフォールバック: 320pxビューポート内でオプションが視覚的に崩れずに収まらない場合は、レスポンシブCSSメディアクエリを使用して、セグメントコントロールのレイアウトをネイティブの <select> ドロップダウンに切り替えます。

決定ルール

ラジオグループ vs. タブリストパターン

基準	ラジオグループパターンを使用（role="radiogroup"）	タブリストパターンを使用（role="tablist"）
主要機能	データプロパティを編集するか、リストをインラインでフィルタリングします。	異なるレイアウトビューまたはパネルを切り替えます。
フォーム統合	<form>内に統合されるか、入力として機能します。	標準フォームの外側。レイアウトビューモードを管理します。
ARIAロール	親: role="radiogroup"、子: role="radio"、aria-checked="true/false" を使用。	親: role="tablist"、子: role="tab"、aria-selected="true/false" を使用。
キーボードナビゲーション	矢印キーで選択が即座に移動。Tabでグループを終了。	矢印キーでフォーカスが即座に移動。Space/Enterでアクティブ化。

ビジュアルレイアウト: 固定等幅 vs. 自動フルード幅

• 固定等幅: 短く均一なラベル（例：「7D」「30D」「90D」または「グリッド」「リスト」）に最適。すべてのセグメントが同じ幅で、視覚的対称性を提供します。
• 自動フルード幅: ラベルの文字長が大きく異なる場合（例：「すべてのアイテム」と「保留中の確認」）に最適。各セグメントは、一貫したパディング（例：12px 16px）でテキストを包み込みます。

制約

• コントラスト比: アクティブおよび非アクティブなテキストセグメントは、背景に対してWCAG AA最低コントラスト比 4.5:1 を満たす必要があります。
• タッチターゲット寸法: 個々のセグメントは、最小インタラクティブ領域 24x24px（WCAG 2.2 SC 2.5.8）を提供する必要がありますが、モバイルでのシームレスなフィンガータップのために、40px〜44pxの最小高さを強く推奨します。
• フォーカスインジケーター: キーボードフォーカスは、現在選択されているセグメントまたはアクティブなフォーカスターゲットに明確に表示される必要があります。フォーカスリングが隣接するセグメントにクリップされたり隠れたりしないようにします。
• テキストの折り返し禁止: セグメントテキストは単一行である必要があり、ボタン内で複数行に折り返してはなりません。これは垂直リズムを崩し、視覚的な重なりを引き起こします。
• モーションの低減: アニメーション化されたスライディングインジケーターが実装されている場合は、@media (prefers-reduced-motion: reduce) を介してユーザーのOS設定を尊重し、スライディング効果を無効にして、代わりに透明度またはアウトラインハイライトを即座に切り替えます。

よくある失敗パターン

• レイアウトシフト（CLS）: アクティブセグメントを変更するとアクティブボタンの幅が変わり、隣接する要素が左右に移動します。
• ナビゲーションの誤認識: 主要なグローバルページナビゲーションをセグメントコントロールのようにスタイリングし、ユーザーがページ内で即座にコンテンツが変更されることを期待させて混乱させます。
• 選択状態のアフォーダンス欠如: 微妙なフォントウェイト変更や低コントラストのインジケーターのみを使用し、ロービジョンユーザーがどのオプションが選択されているかを識別するのを困難にします。
• キーボードトラップ: コントロール内に標準のキーボード矢印キーをバインドせず、キーボードのみのユーザーがすべてのオプションを個別に Tab で移動することを強制します。
• モバイルでの潰れ: 4セグメントのコントロールがモバイルで縮小し、ラベルが重なったり、判読できないほど切り詰められたり、Trackの境界外にクリップされたりすることを許容します。

検証基準

• コントロールの機能に基づいて、明確なセマンティックARIAパターン（ラジオグループ vs. タブリスト）が選択されている。
• 個々のセグメントが最小24x24pxのタッチターゲットサイズを満たしている（モバイルでは44pxを推奨）。
• 非アクティブおよびアクティブなテキストのコントラストがWCAG AA準拠（>= 4.5:1比）である。
• アクティブインジケーターは、スライディングトランジション中にハードウェアアクセラレーションCSSプロパティ（transform）を使用して、Cumulative Layout Shift（CLS）を防止している。
• レスポンシブ動作が定義されている（フルード両端揃え、最小幅、またはドロップダウンセレクトフォールバック）。
• セグメント内のテキストは単一行のままで、垂直方向の折り返しやクリッピングがない。
• @media (prefers-reduced-motion: reduce) トランジションフォールバックが明示的に処理されている。