バッジ・タグシステム は何をしますか？
目的
バッジ・タグシステムは、コンテキスト、ステータス、カテゴリを素早く伝える小さな情報コンポーネントを設計・実装するための方法論を提供します。このスキルにより、これらの要素がプライマリコンテンツに対して二次的な役割を保ちつつ、一目で認識でき、アクセシブルで、Webサイト全体で論理的に整理されることを保証します。
ユースケース
- ステータス表示: オブジェクトの状態（例：「アクティブ」「保留中」「売り切れ」）の表示。
- カテゴリ分類: トピック、タイプ、コレクションによるコンテンツのラベリング（例：「仕事効率化」「チュートリアル」「新着」）。
- 数量/カウント: アイテムに関連する数値の表示（例：「12件の通知」「カートに5個のアイテム」）。
- フィルター表示: 現在アクティブなフィルターを表示し、ユーザーが削除できるようにする。
- 優先度シグナリング: 「ベストセラー」「緊急」などの特定の属性を強調表示。
使用すべきでないケース
- プライマリアクション: バッジやタグをメインのコールトゥアクション（CTA）として使用しないでください。
interactive-state-systemのボタンを使用してください。 - 大きなコンテンツブロック: 2〜3語以上の情報が必要な場合は、
card-ui-systemまたは標準のタイポグラフィを使用してください。 - ナビゲーション: タグはフィルタリングビューにリンクすることはできますが、プライマリの
site-navigation-systemを置き換えるものではありません。 - 装飾専用アイコン: 要素に意味がない場合は、
iconography-systemに属します。
入力
- コンテンツの意図: ステータス（状態）、カテゴリ（メタデータ）、またはカウント（数値）のいずれか？
- インタラクティブ要件: 要素は静的か、それとも削除可能/クリック可能か？
- 階層コンテキスト: 親要素は何か？（例：カード、ヘッダー、テーブル行）。
- カラートークン: 既存のセマンティックカラースケール（成功、警告、エラー、情報）。
出力
- ビジュアルアナトミー仕様: ボーダー半径（ピル vs. 角丸）、パディング、タイポグラフィの定義。
- セマンティックカラーマトリックス: 特定の意味への色のマッピング（例：緑 = 成功）。
- インタラクティブ仕様: ホバー、フォーカス、「削除」（X）アクションのビジュアル表現。
- 配置ルール: タイトルや画像に対するこれらの要素の相対的な位置のガイドライン。
ワークフロー
1. バッジとタグの区別
まず機能的な役割を定義します。
- バッジ: 一般的にステータス（例：「ライブ」）やカウント（例：「3」）を示します。通常は非インタラクティブであるか、単一の状態にリンクします。
- タグ: 一般的にカテゴリ分類（例：「SaaS」）を示します。多くの場合インタラクティブで、ユーザーがコンテンツをフィルタリングしたり、タグを削除したりできます。
2. ビジュアルアナトミーの確立
ボタンのように見えないベーススタイルを定義します。
- タイポグラフィ: 小さめで、多くの場合はオールキャップスまたはセミボールドフォントを使用します（例：12px/0.75rem）。
- ボーダー半径:
- ピル（完全な丸み）: ステータスやカウントに最適です。
- 角丸（4〜8px）: カテゴリ分類や削除可能なタグに最適です。
- サイズ: 高さを一定に保ちます（例：20px〜24px）。これにより、テキストと適切に揃うようになります。
3. セマンティックロジックの割り当て（色とアイコン）
ユーザーが読まなくても意味が伝わるように色を使用します。
- 成功（緑）: 「完了」「アクティブ」「確認済み」。
- 警告（黄/オレンジ）: 「保留中」「在庫僅少」「下書き」。
- エラー（赤）: 「失敗」「重大」「在庫切れ」。
- 情報/ニュートラル（青/グレー）: 「新着」「カテゴリ」「メタデータ」。
ルール: 色覚異常のユーザーへのアクセシビリティを確保するため、常に色をテキストまたはアイコンと組み合わせて使用します。
4. インタラクティブ状態の定義
タグがインタラクティブな場合：
- ホバー/フォーカス: 微妙な背景シフトまたは境界線の変更を適用します。
- 削除可能: 明確な「X」アイコンを含め、最小ヒット領域は24x24px（WCAG 2.2 SC 2.5.8）とし、レイアウトが許せば44x44pxまで拡大して快適なタッチ操作を実現します。
5. 配置と階層の決定
- オーバーレイ: 画像の上部コーナーに「新着」バッジを配置する。
- インライン:
page-header-system内のタイトルの直後にステータスバッジを配置する。 - グループ化:
card-ui-system内の説明の下に複数のタグを積み重ねる。
決定ルール
- 「Squint Test（細目テスト）」: バッジが明るすぎてH1から注意をそらす場合は、彩度を下げるかアウトラインスタイルを使用します。
- カウント制限: 視覚的な乱雑さを防ぐため、1つのカードに3つ以上のタグを使用しないでください。
- テキスト長: ラベルは1〜2語に抑えてください。データが動的で予測不可能な場合は、切り詰めるかツールチップを使用してください。
- ボタンとの区別: バッジには、「送信」や「購入」などのプライマリボタンとは異なるビジュアル表現（例：小さいサイズ、異なる半径）を与えてください。
制約条件
- アクセシビリティ: バッジ/タグ内のテキストはWCAG AA（4.5:1コントラスト）を満たす必要があります。インタラクティブなタグはキーボードで操作可能でなければなりません。
- レスポンシブ対応: グループ内のタグは、コンテナからはみ出さずに次の行に折り返す必要があります（
flex-wrap: wrap）。 - タッチターゲット: 削除可能なタグは、「閉じる」アクションのための十分な大きさのターゲットサイズ（WCAG 2.2 SC 2.5.8に準拠した最小24x24px、推奨44x44px）を持つ必要があります。
よくある失敗パターン
- 「ボタンの模倣」: タグをボタンとまったく同じに見せることで、ユーザーにプライマリアクションを期待させてしまう。
- 色への過度な依存: テキストラベルなしで赤・緑・黄のみを使用し、色覚異常者やスクリーンリーダーユーザーがステータスを理解できないようにしてしまう。
- タグの乱用: 1枚のカードに10個以上のタグを詰め込み、どれも役に立たなくしてしまう。
- 不統一な半径: 同じUI内でピル型のバッジと角の四角いタグが混在してしまう。
検証基準
- バッジとタグがボタンと視覚的に区別されていること。
- セマンティックカラーが一貫して使用されていること（例：緑は常に成功を意味する）。
- すべての色のバリエーションでコントラスト比がWCAG AA（4.5:1）を満たしていること。
- インタラクティブなタグにフォーカス状態と少なくとも24x24px（WCAG 2.2 SC 2.5.8）のタッチターゲットが含まれていること。
- モバイルビューポートで要素が適切に折り返されること。
- 重要なステータスインジケーターには、色と一緒にアイコンが使用されていること。