UIのさわりごこち

触って、なるほどと思うためのサイト

第02室

チェックボックス

選んだかどうかを小さな四角の印で見せる部品です。

操作

触る

触るとどうなるか

まだ何も選んでいません

操作のしかた

マウス
  • 乗せると行が色づく
  • 四角か文字を押して切り替える
  • いちばん上を押してまとめて切り替える
キー
  • Tab次の行へ動く
  • Space切り替える
タッチ
  • 四角か文字をタップして切り替える

解説

読む・見比べる

なぜ気持ちいいと感じるのか

押したらすぐにチェックが付く

部屋の照明スイッチは押せばすぐに明かりがつきます。ペンで用紙の欄にレ点を書けば、その場で印が残ります。チェックボックスも同じで、押したとたんに印が付くと自分の手で付けたと感じられます。人が「すぐ」と感じる時間はほんのわずかだと言われています。印が付くか付かないかという単純な変化なので、すこし遅れるだけでも効いていないように見えてしまいます。

押したとたんに四角に印が付きます。

文字を押してもチェックできる

エレベーターのボタンは数字だけでなく、まわりの枠全体を押せます。チェックボックスの四角はとても小さいので、となりの文字まで押せるようにしておけば、ねらう的が大きくなります。とくにスマートフォンのような小さな画面で助かります。四角と文字のどちらを押しても選べるようにすることは昔から勧められてきました。的が大きいほどねらいやすいという考え方にも沿っています。

受け取れる時間帯を選んでください

四角と文字のどちらを押してもチェックが切り替わります。

四角い形はいくつでも選べる合図

アンケート用紙の「□」の欄には当てはまるものすべてに印を付けます。画面のチェックボックスもこの形を見ただけで「ここに印を付ける」「いくつ付けてもよい」とわかります。丸い形はひとつだけ選ぶ部品の約束です。そのため四角か丸かで、選び方の違いが伝わります。ひとつしか選べない場面では、チェックボックスを使わないようにする指針もあります。

受け取れる時間帯を選んでください

いくつでも選べる部品だとすぐにわかります。

印を付けると「はい」になる言葉

「お知らせを受け取らない」という欄に印を付けるとき、一度読み返して、付けると受け取らないのだなと考え直すことがあります。印を付けることはそれ自体が「そうする」という意味を持ちます。そのためラベルは「受け取る」のように、そうする言い方にしておくと、付いていれば「する」、外れていれば「しない」とそのまま読めます。

付ければ受け取る、外せば受け取らない、と迷わず読めます。

色がわからなくても印でわかる

用紙のレ点は黒一色でも付いているかどうかがわかります。画面のチェックボックスも塗りの色だけでなく、印の形で状態を伝えています。色の違いがわかりにくい人にも、選んだかどうかが伝わります。印や四角の線が背景とはっきり見分けられることも大切です。

受け取れる時間帯を選んでください

選んだ四角に白い印が出ます。色が見分けにくくても印でわかります。

名前の由来

紙の欄から画面の四角へ

チェックボックスは英語の「チェック(たしかめた印)」と「ボックス(四角い枠)」を合わせた言葉です。辞書には紙の書類で印を付ける欄という意味と、画面の上で設定を切り替える四角という意味の両方が載っています。紙の欄の呼び名がそのまま画面の部品にも使われたのかもしれません。

2人の候補者の名前が並ぶ投票用紙の見本。下の名前の右の欄に X が書かれている。
図1880年、ウェールズの選挙で配られた刷り物です。名前の向かいの欄に×を書くよう案内しています。

1981年に発表されたゼロックスのスターにはすでにオンとオフを切り替える設定がありました。ただ、オンのときは白黒を反転させて示していて、四角に印を付ける形ではありませんでした。アップルのリサの1983年の設計資料には「チェックボックス」という言葉が出てきます。初期のマッキントッシュでは四角の中にレ点ではなく「×」を描いていました。ウェブでは1995年の規格で、はいかいいえを選ぶ部品として定められています。

印の意味は国によっても違います。日本ではテストの答えに「○」を付けて正解、「×」で不正解を表します。レ点を不正解の印に使うこともあるので、ほかの国の人が戸惑うことがあると言われています。

脚注

  1. 1

    W3C「Understanding WCAG 2.2: 1.4.11 Non-text Contrast」。部品とその状態を見分けるのに必要な見た目は、となりの色と3:1以上のコントラストにするよう求めています(レベルAA)。チェックボックスの中の印も例に挙がっています。白地に#9D9D9Dの枠線(2.7:1)や、#AAAのフォーカスの輪(2.3:1)は足りない例です。無効の部品は対象外です。

  2. 2

    Jakob Nielsen「Checkboxes vs. Radio Buttons」Nielsen Norman Group、2004年。標準の見た目(チェックボックスは四角にチェックかX、ラジオボタンは丸に点)を使うこと、チェックボックスはいくつ選んでもよいことを挙げています。四角とラベルのどちらを押しても選べるようにすること、ラベルは肯定的な言い方にして「これ以上メールを送らないで」のような否定を避けること、受け取るかどうかを選ぶ項目は最初は空にしておくことも勧めています。

  3. 3

    W3C「Understanding WCAG 2.2: 1.4.1 Use of Color」。色を、情報を伝えるただひとつの見た目の手段にしないよう求めています(レベルA)。チェックボックスについて直接は書かれていません。

  4. 4

    W3C WAI「ARIA Authoring Practices Guide: Checkbox Pattern」。フォーカスがあるときSpaceキーで状態を切り替えることを挙げています。3状態のチェックボックスでは、下の項目がぜんぶ選ばれていればチェック済み、一部なら一部選択(aria-checked="mixed")、ぜんぶ外れていれば未チェックを示すとしています。

  5. 5

    MDN Web Docs「<input type="checkbox">」。関連づけたラベルを押しても切り替えられ、スマートフォンのような小さな画面では特に便利だとしています。中間の状態(indeterminate)は見た目だけの変化で、送られる値は変わらず、JavaScriptからしか設定できないと説明しています。

  6. 6

    GOV.UK Frontend「checkboxes/_mixin.scss」。ホバーできない端末(iOSなどのタッチ端末)ではホバーの見た目を出さないというコメントを付けて、(hover: none) と (pointer: coarse) のときにホバーの見た目を消しています。押したあとに色が残るからという理由までは書かれていません。

  7. 7

    W3C「Selectors Level 4」:focus-visible。ブラウザがフォーカスの印を描くべきと判断したときにだけ当たると定めています。

  8. 8

    IBM Carbon Design System「Read-only states pattern」。無効の部品は読み上げで伝わりにくく、コントラストの基準も満たさないため、読んでもらいたい情報には使わないよう勧めています。

  9. 9

    Jakob Nielsen「Response Times: The 3 Important Limits」Nielsen Norman Group、1993年。0.1秒はすぐに反応したと感じる限界のおよそだとしています。1993年の本文は、この速さなら結果を見せるだけでよいとしています。2014年の追記では、0.1秒を画面の部品を直接動かしていると感じる限界とし、選んだものはハイライトするなどして示すべきだとも書いています。経験にもとづく目安で、チェックボックスで測った値ではありません。

  10. 10

    Raluca Budiu「Fitts's Law and Its Applications in UX」Nielsen Norman Group、2022年。アイコンと文字を合わせた的はアイコンだけより大きく、フィッツの法則からは当てやすいと考えられるとして、アイコンだけを押せる範囲にしないよう勧めています。チェックボックスそのものについての記事ではありません。

  11. 11

    GOV.UK Design System「Checkboxes」。複数の選択肢から選ぶときにチェックボックスを使い、ひとつしか選べないときは使わないとしています。選択肢を最初から選んでおかないことも求めています。

  12. 12

    Wiktionary「checkbox」。check と box を合わせた語としています。意味として、紙の書式で印を付けられる欄と、画面の上で設定のオンとオフを切り替える四角の2つを挙げ、同じ意味の語に tick box を挙げています。

  13. 13

    David Canfield Smith, Charles Irby, Ralph Kimball, Eric Harslem「The Star User Interface: An Overview」AFIPS National Computer Conference、1982年。1981年4月に発表された Xerox 8010 Star には、オンとオフを切り替える独立した設定(state parameters)があり、オンのときは白黒を反転して表示したと書かれています。

  14. 14

    Apple「Lisa User Interface Guidelines」1983年(社内文書の断片、GUIdebook の転載)。フォームの節に「text fields, check boxes, and buttons」とあります。今回調べた範囲では、画面の部品の文書に check boxes という語が出てくるいちばん古い例です。これより前の例がないとは言い切れません。

  15. 15

    Apple「Inside Macintosh: Macintosh Toolbox Essentials」Control Manager の章。チェックボックスをオンにすると中に「X」を描くと書かれています。たしかめたのは1990年代の版で、1985年の初版の文言はたしかめていません。

  16. 16

    T. Berners-Lee, D. Connolly「Hypertext Markup Language - 2.0」RFC 1866、1995年11月。INPUT TYPE=CHECKBOX を、はいかいいえの選択(boolean choice)を表すものとしています。

  17. 17

    Nippon.com「Maru and Batsu: Circles and Crosses for Saying Yes and No」2025年。日本では○が正しい、×が誤りを表すこと、テストでは✓を不正解の印に使うこともあり、日本以外の人が戸惑うことがあると書いています。

  18. 18

    作者不明「Cardiganshire Election ballot paper 1880」1880年、ウェールズ国立図書館所蔵。カーディガンシャーの選挙で配られた刷り物で、Pugh 氏に投票するには名前の向かいに X を書くよう、投票用紙の見本を添えて案内しています。パブリックドメイン(Public Domain Mark 1.0)です。

出口

次の部屋へ

スタンプを押して次の部屋へ

記念スタンプ

第02室チェックボックス