チェックボックス
フォームの入力部品の一つで、複数の選択肢から「あてはまるものをいくつでも」選ばせる四角い部品。「興味のあるジャンル」「希望する連絡方法」のように、同時に複数を選べる点が特徴。1 つだけ選ばせるラジオボタンとは役割が異なり、選択肢の性質に応じて使い分ける。
押さえておきたいのは「選択肢の性質に部品を合わせる」こと。複数選べるならチェックボックス、1 つだけ選ぶならラジオボタン、選択肢が多いならプルダウン(ドロップダウン)、という使い分けが、入力のしやすさ=フォーム最適化(EFO)に直結する。利用規約への同意のように「1 つだけのオン / オフ」もチェックボックスで表す。
実務で押さえる点はラベルとボックスの関連付け(ラベルの文字をタップしても切り替わる)・初期状態のオン / オフの検討・指でタップしやすい余白の確保・アクセシビリティ対応(キーボード操作や読み上げ)。メールフォームでは、必須の同意項目をチェックしないと送信できない制御も合わせて設計する。
陥りやすいのは、本来は複数選べる項目なのにラジオボタンで作ってしまい、1 つしか選べず不便になること。逆に、1 つだけ選ぶべき項目をチェックボックスにして複数選択を許してしまう、初期チェックを入れたまま意図しない同意を取る(規約同意は初期オフが原則)、タップ範囲が狭く押しにくい、といった点にも注意する。
言葉をよく利用する人
- Web 担当者(発注側)
- デザイナー
- コーダー / フロントエンドエンジニア
- マーケター
- 法務 / 契約担当
会話上での使用例
複数選択の入力部品をデザイナーと相談する場面
-
Web 担当者
興味のあるジャンルを複数選んでもらいたいのですが、どの部品が良いですか。
-
デザイナー
複数選べるならチェックボックスが向いています。1 つだけ選ぶラジオボタンだと足りません。ラベルの文字をタップしても切り替わるようにして、押しやすい余白も取っておきますね。
規約同意の初期状態を確認する場面
-
コーダー
利用規約への同意のチェックボックス、最初からオンにしておきますか。
-
Web 担当者
同意は必ずユーザー自身に選んでもらう必要があるので、初期はオフでお願いします。チェックが入っていないと送信できないようにして、必須だと分かる見せ方にしましょう。