ラジオボタンとチェックボックスはどう選ぶか — UIは正解のある問題だ

送信ボタンの裏には保存がある

サービス紹介ページの下のほうによくある相談申込の欄を思い浮かべてほしい。名前を書き、問い合わせ内容を書き、相談の種類を選び、送信ボタンを押す。このように値を入力して一度に送る様式をフォームという。アンケートを作るときに使う Google フォームのあのフォームだ。

講義は、このフォームを見るときにまず一つのことを思い浮かべるよう求める。送信を押すと、これらの値はどこかに保存される。顧客が残した問い合わせを運営側が管理画面、つまり運営者だけが入れる画面で読む必要があるので、値はどこかに残っていなければならない。そのどこかがデータベース、値を表の形で積んでおく場所である。

Excel で考えると分かりやすい。列名を名前、問い合わせ内容、種類とし、問い合わせが来るたびに一行ずつ埋めていく。送信ボタンは保存する行為であって保存される値ではないので、列にはならない。

このとき、同じ列には同じ形の値が入らなければならない。ある行は種類の欄に値が一つ、別の行はいくつもばらばらに書かれていると、あとでフィルターをかけたり検索したりするときに困る。だから欄ごとにどんな形の値が入るのかを、先に整理しておく必要がある。

欄ごとに値の形が決まる

名前はただの文字だ。文字でできた値を、データベースでは文字列、英語で string と呼ぶ。01回で見たデータ型、つまり欄ごとに入る値の形でいえば、短い文章を入れる varchar にあたる。

問い合わせ内容は長くなりうる。こうした値は長い文章、text として別に呼ぶ。どちらも文字だが、長さによって名前を分けてあるのだ。

相談の種類は二通りのどちらかになる。一つだけ選ばせるなら、選んだ値一つを保存すればよいので文字列一つだ。複数選べるようにするなら、値の形そのものがリストになる。選択肢が十個あり、そのうち三つを選んだと考えれば明らかだ。

複数の値を順番に入れたまとまりを配列、またはリストと呼ぶ。角括弧で開き、選んだ値をカンマで区切って書き、角括弧で閉じる。複数選択の欄なら、一つだけ選んでもリストの中に値が一つ入った形になる。文字としてつなげて保存することもできるが、値の基本的な性格はリストである。

名前           問い合わせ内容                  種類
─────────────  ──────────────────────────────  ──────────
キム・ミンス   来月、導入の相談をしたいです    ["A", "C"]
イ・ソヨン     見積もりが知りたいです          ["B"]

イ・ソヨンは一つだけ選んだが、リストの中の値一つとして保存される

一つならラジオボタン、複数ならチェックボックス

値の形が決まれば、画面ですべきことも決まる。ユーザーが選択肢を押す流れをたどってみよう。

一つだけ選ぶ欄では、A を選んだ状態で B を押すと A の選択が外れなければならない。このように動く画面要素がラジオボタンだ。一組の丸い印のうち、一つだけがオンになる。

複数選ぶ欄では、A を選んだ状態で B を押しても A はそのまま残っていなければならない。このように動くのがチェックボックスだ。四角い枠ごとにチェック印が別々に付く。

二つは見た目が似ていても動きが違い、その違いは保存される値の形からそのまま出てくる。値一つを保存する欄にチェックボックスを付けたり、リストを保存する欄にラジオボタンを付けたりすると、画面と保存が食い違う。講義がこの二つを、これ以上なく正解がはっきりした問題だと言う理由である。

UIは正解のある問題だ — フォームは数独のように解く

UIデザインというと、芸術的な感覚の領域で、選択肢が果てしなく多いと思われがちだ。講義は、プロのUIデザイナーではない人に別の心構えを勧める。UIは正解のある問題であり、その正解は問題をどんな視点で見るかによって見えてくる。

講義は画面を大きく、フォームであるものとそうでないものの二つに分ける。フォームが入った画面は、ほとんどが数独のように解けばよい問題だったという。送信された値が保存される流れまで考えれば、必ず守るべき約束の範囲が生まれ、その中でどのUIを選ぶべきかは、すでに決まったゲームになる。

もちろん、ラジオボタンとチェックボックスから枝分かれしたUIの形も多い。こうした形を幅広く知っているほど、バイブコーディング、つまりAIに言葉で指示して画面やコードを作らせるやり方で出てきた成果物を判断する目が確かになる、というのが講義の説明だ。

今日すぐできることはこうだ。AIが作ったフォーム画面があるなら、入力欄を一つずつ指して、この値はどんな形で保存されるのかを尋ねる。新しく作らせるなら、下のように保存される値の形を先に書いて渡し、画面要素をそれに合わせさせる。

次回は、フォームではない場所、事例カードの一覧の上にあるフィルターにも正解があるのかを見る。

この相談申込フォームの入力欄ごとに、送信された値がどんな形で保存されるかを表にまとめて。
列は 入力欄 / 保存される値の形（短い文章・長い文章・値一つ・リスト）/ いま使われている画面要素。
値が一つしか保存されないのにチェックボックスを使っている欄、リストで保存されるのにラジオボタンを使っている欄があれば教えて。

相談申込フォームを作って。送信される値の形はこう決める。
- name：名前、短い文字列
- message：問い合わせ内容、長い文章
- types：相談の種類、A・B・C から複数選択可、文字列のリスト（例：["A", "C"]）
types はチェックボックスにして、複数選んでも前の選択が残るようにして。