selectのデザイン、カンプに載っていないことが多いです。 理由は単純で、OSやブラウザが勝手に描画するので、作り込んでも再現出来ないから。 でも、だからといって「ただを並べるだけ」で終わるのは、ちょっと不親切です。 選択肢が増えるほど、ユーザーは探す作業を強いられます。しかもは地味に見つけにくい。
ここで一手間入れると、言われます。かなりの確率で言われます。 「お、気が利くねえ」。
結論：selectの親切は「整理」と「区切り」で作れる
の選択肢を見やすくする方法はいろいろありますが、まず覚えておきたいのはこの2つです。 optgroupでグループ化する（意味のある整理） hrで区切り線を入れる（視覚的な整理。ただし注意点あり） ポイントは「カンプに無いけど、使う人のためのひと手間」。 フロントエンドが評価されるのは、派手なアニメより、こういう地味な優しさだったりします。
なぜ止める必要があるのか：ただ並べるselectが生む3つの損
損1：探すストレスが増え、離脱の原因になる
選択肢が20個を超えると、ユーザーは「読む」より「探す」モードに入ります。 探すUIは、見つからないと一気に苛立ちます。 は検索窓も無いので、見つけにくさがダイレクトに体験を落とします。 損2：ミス選択が増え、フォームの手戻りが増える 項目が似ているほど誤選択が起きます。 例えば「東京都」「東京23区」「東京（離島）」のような近い言葉が並ぶと、ぱっと見で選び間違えます。 フォームのミスは、そのまま問い合わせ対応のコストになります。 損3：実装側も保守がつらい 後から選択肢が増えた時、ただの羅列だと「どこに挿すべきか」が曖昧です。 結果、順番が崩れ、さらに見つけにくくなります。 最初に整理の型を作っておくと、追加が楽になります。 つまり、止めるべきなのは「ただ並べるだけの運用」です。 そしてもう一つ。区切り線の入れ方も、雑にやると逆効果になります。そこも含めて解説します。
やり方1：optgroupでグループ化する（最優先の改善）
optgroupは、内のを意味のあるまとまりでグルーピングするためのHTML要素です。 見た目だけでなく、情報の構造を作れるのが強みです。 基本形：都道府県を地方で分ける <label for="pref">都道府県</label> <select id="pref" name="pref"> <option value="">選択してください</option> <optgroup label="北海道・東北"> <option value="hokkaido">北海道</option> <option value="aomori">青森県</option> <option value="iwate">岩手県</option> </optgroup> <optgroup label="関東"> <option value="tokyo">東京都</option> <option value="kanagawa">神奈川県</option> <option value="chiba">千葉県</option> </optgroup> <optgroup label="近畿"> <option value="osaka">大阪府</option> <option value="kyoto">京都府</option> <option value="hyogo">兵庫県</option> </optgroup> </select> これだけで「読む」負担が減り、「探す」精度が上がります。 カンプに無くても、フォームが多いサイトほど効きます。 実務Tips：optgroupのラベルは短く、意味を強く 短い方が一覧性が上がる（例：北海道・東北、関東、近畿） 迷いやすい境界は補足する（例：中部（北陸含む）など） 並びはユーザーが期待する順に（地理、五十音、利用頻度など） メリット 意味のある整理なので、初見でも探しやすい 追加や修正の場所が明確で保守が楽 HTMLとして正しい構造になりやすい デメリットと注意 ブラウザや支援技術によって、optgroupの読み上げや見せ方に差が出る場合がある グループを作りすぎると逆に迷う（5から8グループ程度が目安） とはいえ、基本はoptgroupが第一選択です。整理の王道です。 やり方2：hrで区切り線を入れる（便利だが扱いを間違えると損） 最近のHTML仕様とブラウザ対応の流れで、の子要素として
を置き、区切り線として表示出来るようになってきました。 ChromeやSafariの対応が進んだことで、使える場面が増えています。
ただし重要：hrは装飾として扱われやすい
内のは、視覚的には区切りに見えても、アクセシビリティツリーに露出しないケースがあり、支援技術に区切りとして伝わらない可能性があります。 つまり、hrだけで「意味のある整理」を担わせるのは危険です。 結論としてはこうです。 意味の整理はoptgroupでやる 視覚の補助としてhrを足す（出来る環境だけ） 例：optgroupに加えて、要所にhrを入れる <select id="store" name="store"> <option value="">店舗を選択</option> <optgroup label="都内"> <option value="shibuya">渋谷</option> <option value="shinjuku">新宿</option> </optgroup> <hr> <optgroup label="近郊"> <option value="yokohama">横浜</option> <option value="omiya">大宮</option> </optgroup> </select> この発想は「視覚の整理整頓」です。 ただし、繰り返しますが、意味の整理はoptgroupが本体です。 メリット パッと見で境界が分かり、探す速度が上がる optgroupだけより、視線誘導が強くなることがある デメリットと注意 ブラウザによって表示されない場合がある 支援技術には区切りとして伝わらない可能性がある 見た目のためだけに乱用すると、逆に情報が分断される 要するに、hrは「使えたらラッキーな見た目補助」くらいの位置付けがちょうどいいです。 現場で安全に使う：progressive enhancement（出来る環境だけ強化） hrが確実に表示されるとは限りません。 なので設計としては「hrが無くても成立する」構造を作り、表示出来る環境だけ見やすくするのが現実的です。 おすすめ構成 基本はoptgroupで整理 さらに視覚の境界が欲しい箇所だけhrを挿入 hrが表示されなくてもUXが壊れないようにする この方針なら、環境差があっても事故りにくいです。 それでも区切り線を確実に出したい場合の代替案 現場では「どうしても区切り線が必要」という要望が出ることがあります。 ただ、ネイティブの中はCSSで自由に描けません。 そこで代替案を知っておくと、提案の幅が広がります。
代替案1：disabledな区切りを入れる
昔からある手で、対応は広いです。 ただし、読み上げや操作体験としては賛否が出やすいので、採用するならラベルを工夫します。
<select id="job" name="job">
<option value="">職種を選択</option>
<optgroup label="開発">
<option value="fe">フロントエンド</option>
<option value="be">バックエンド</option>
</optgroup>
<option value="" disabled>──────────</option>
<optgroup label="制作">
<option value="designer">デザイナー</option>
<option value="writer">ライター</option>
</optgroup>
</select>これはあくまで代替です。出来ればoptgroupが主役、区切りは補助の方が穏当です。
代替案2：選択肢が多いなら「検索出来るUI」へ
が50件、100件を超えるなら、整理より先にUI自体を変えた方がいいです。
- autocomplete付きの検索（ライブラリやコンポーネント） モーダルで検索出来るピッカー カテゴリで一段階絞ってから選ばせる2段階select ネイティブの限界を超えるなら、素直に別UIを提案するのも「気が利く」側の仕事です。 実務での「気が利く」ポイント集（カンプに無いけど効く） 先頭は「選択してください」を入れる 初期値がいきなり有効選択肢だと、未選択なのに送信されることがあります。 必須項目なら特に「空の選択」を明示するのがおすすめです。 valueは表示名と分ける 表示名は変更されやすい。valueはシステム連携に使われる。 この2つを分けておくと、後からの変更に強いです。 並び順は「ユーザーの期待」に合わせる
- 地域は地理順
- 名前は五十音
- 商品は人気順
- 探す時間が減る（フォームの体感速度が上がる）
- 誤選択が減る（問い合わせミスや手戻りが減る）
- 追加や修正が楽（構造があるので保守しやすい）
- 作り手の意図が伝わる（レビューが通りやすい）
- グループを作りすぎると、逆に迷子になる
- hrは環境差があり、アクセシビリティ上は装飾扱いになりやすい
- 区切りや整理に凝りすぎて、結局「検索出来ない問題」が残ることがある
- labelでを関連付ける 必須ならrequiredと併せて、未選択の キーボードだけで選択出来るか確認する 2 選択肢が多い時の判断基準を持つ
- 20件まで：optgroupで整理すれば戦える
- 50件以上：検索UIや段階選択を検討する
- 100件以上：ネイティブ
