チェックボックス
フォームの入力部品の一つで、複数の選択肢から「あてはまるものをいくつでも」選ばせる四角い(☑)部品のことです。「興味のあるジャンル」のように同時に複数選べるのが特徴で、利用規約への同意のような「1 つだけのオン / オフ」を表す際にも使われます。
設計の勘所：選択肢の性質に合わせて使い分ける
部品の使い分けは、ユーザーの入力のしやすさ(EFO:入力フォーム最適化 ＝ 途中で離脱させない工夫)に直結します。
実務でのチェックポイント
- 文字のタップ対応(ラベル付け)：四角いボックスだけでなく、「横に書いてある文字」をタップしてもチェックが入るように設定する。
- 余白の確保：スマホで操作する際、指でタップしやすいように選択肢の間に十分な余白を設ける。
- 必須制御：「規約に同意する」にチェックを入れないと、送信ボタンを押せない(グレーアウトする)ような制御を合わせて設計する。
よくある落とし穴(注意点)
- 部品の選択ミス：本来は複数選べる項目なのに「ラジオボタン」で作ってしまい、1 つしか選べずユーザーを困らせてしまう(またはその逆)。
- 初期チェックの罠：メルマガ登録や規約同意のチェックボックスに最初からチェックを入れておくのは、ユーザーの意図しない同意を取ることになるため NG(原則は初期オフ)。
- タップ範囲が狭い：文字をタップしても反応せず、小さな四角をピンポイントで狙わなければならないためストレスを与える。
言葉をよく利用する人
- Web 担当者(発注側)
- デザイナー
- コーダー / フロントエンドエンジニア
- マーケター
- 法務 / 契約担当
会話上での使用例
複数選択の入力部品をデザイナーと相談する場面
-
Web 担当者
興味のあるジャンルを複数選んでもらいたいのですが、どの部品が良いですか。
-
デザイナー
複数選べるならチェックボックスが向いています。1 つだけ選ぶラジオボタンだと足りません。ラベルの文字をタップしても切り替わるようにして、押しやすい余白も取っておきますね。
規約同意の初期状態を確認する場面
-
コーダー
利用規約への同意のチェックボックス、最初からオンにしておきますか。
-
Web 担当者
同意は必ずユーザー自身に選んでもらう必要があるので、初期はオフでお願いします。チェックが入っていないと送信できないようにして、必須だと分かる見せ方にしましょう。