Design Pattern
チェックボックスグループ
チェックボックスグループは、複数の項目を同時に選べるフォームパターンです。単体のチェックボックスとは違い、グループ全体の質問文、選択ルール、エラー表示をまとめて設計する必要があります。
いつ使う / 使わない
使うべきとき
- 複数の項目を同時に選択できる必要がある場合
- 選択肢を一覧で比較しながら選ばせたい場合
- 項目数がそれほど多くなく、画面内に収まる場合
使わないべきとき
- 1 つしか選べない場合 → ラジオボタンを使う
- 候補が大量にある場合 → 別 UI で絞り込みを検討する
- オン / オフ設定の場合 → スイッチの方が意味に合う
構造（Anatomy）
1 fieldset
2 legend（グループの質問）
3 各チェックボックス + ラベル
4 補足説明 / エラー
- fieldset — 関連する選択肢を 1 つのグループとしてまとめる
- legend — グループ全体が何を問うているのかを示す
- 各選択肢 — クリック対象を広げるため、ラベル全体を押せるようにする
- 説明文 — 「複数選択可」や必須条件をグループ単位で伝える
HTML 構造
重要なポイント
- 単なる div の並びではなく、fieldset と legend を使う
- 「1つ以上選択してください」のような条件はグループ全体に紐付ける
- 各チェックボックスは個別ラベルを持たせる
- 必須エラーは項目ごとではなく、質問単位で示す
CSS 実装
見た目で補助すべき点
- グルーピング — 枠や背景で 1 つの質問であることを示す
- 選択領域 — 行全体でタップしやすくする
- エラー — 枠線とテキストの両方で知らせる
- 余白 — 選択肢が詰まりすぎると誤操作しやすい
アクセシビリティ
WCAG 1.3.1 情報及び関係性
質問文と各選択肢の関係を fieldset / legend で構造化します。
WCAG 3.3.1 エラーの特定
必須なのに未選択の場合、グループ全体のエラーとして明示します。
WCAG 2.5.8 ターゲットのサイズ
各行のクリック領域を十分に確保し、押しやすくします。
キーボード操作
- Tab で各チェックボックスへ移動
- Space で選択 / 解除
- グループの説明やエラーは、最初の項目に到達した時点で把握できるとよい
ライブデモ
基本のグループ
fieldset と legend で質問単位をまとめた、標準的な複数選択パターンです。
必須選択とエラー表示
グループ単位で選択ルールとエラーを伝えるパターンです。
カード型レイアウト
設定や配信チャネル選択で使いやすい、面を持たせたカード型のバリエーションです。
よくある間違い
legend を省略する
何についての複数選択なのかが支援技術にも視覚的にも伝わりにくくなります。
必須条件を最後にしか書かない
選択前にルールが分からないと、無駄な操作が増えます。
選択肢を密集させる
モバイルや手指操作で誤タップが起きやすくなります。