【スマホアプリ】選択フォームのUIデザイン10選！メリット・デメリットや事例も紹介
スマホアプリの選択フォームUIは数多くありますが、「いくつ選ぶか」「選択肢が固定か連続値か」「画面に何件並ぶか」の3点で考えると迷わず最適なフォームを選べます。代表的なパターンと使いどころは次のとおりです。
- 1つだけ選ぶ／選択肢が固定
ラジオボタン、ドラムロール（ピッカー）、ドロップダウン。都道府県・職業など「答えが決まっている」項目に向きます。 - 複数選べる
チェックボックス、選択チップ（複数選択UI）。絞り込み条件やタグ選択に最適です。 - 数値を入力する
少量ならステッパー（＋／−）、範囲ならスライダー、正確な数値ならテキスト入力。「数値入力UI」は桁数で使い分けます。 - 2状態の切り替え
トグルスイッチ（即時反映）。設定のオン／オフに使います。 - 日付・時刻
近い日付はカレンダー、年月など範囲の広い値はドラムロール（ホイールピッカー）。 - 選択肢が多い・補助的
画面遷移、ボトムシート、ダイアログで段階的に選ばせます。
とくに検索需要の大きいドラムロールUI（ピッカー）は、iOS／Androidの標準コンポーネントとして提供されており、「都道府県」「生年月日」のように選択肢を理解済みの場面で力を発揮します。一方、選択肢が一覧で見えないため、項目数が多い・初見の選択肢では別UIが適しています（詳しくはドラムロールの章で解説します）。
以下では、選択フォームの代表的なUIデザインを10種類取り上げ、それぞれのメリット・デメリット、実際のアプリ事例、そしてUI/UXデザインを手がけるPentagonの実務的な使い分けの視点をあわせて解説します。アプリ全体のUI/UX設計の進め方は スマホアプリのUI/UXデザインの作り方5ステップ もあわせてご覧ください。
スマホアプリの代表的な選択フォームUIデザイン10選
選択フォームには、用途に合わせてさまざまなUIがあります。ここでは代表的な選択フォームを10個ご紹介します。
チェックボックス
チェックボックスとは、「1つ」「複数」「なし」など任意の数の選択肢を選ぶ際に用いる選択フォームです。
また、ユーザーが「オン/オフ」を切り替えることができる単独の選択肢として使われることもあります。
チェックボックスを活用しているアプリ事例
・ホットペッパービューティー(ヘア・ネイル・まつげ・リラク・エステサロンの検索・予約アプリ)
行きたいサロンのエリアをチェックボックスで絞り込めるようになっています。
・UNIQLO（ファッション通販アプリ）
欲しい商品を検索する際、商品のカラーをチェックボックスで絞り込めるようになっています。
・at home（賃貸・不動産検索アプリ）
探している物件のエリアを、地図上のチェックボックスで絞り込めるようになっています。
メリット
チェックボックスのメリットは、複数の変更を一度に処理できる点です。
チェックボックスと似ている機能にトグルスイッチがありますが、トグルスイッチの場合はユーザーが設定の適応を一つずつ行わなければいけません。
デメリット
チェックボックスのデメリットは、「3つ以上の選択肢から1つだけを選ばせる」といった場面で不向きな点です。チェックボックスは項目をいくつでも選択できるフォームなので、誤って「2つ以上の項目を選んでしまう」「1つも選ばない」などの入力ミスが起こる可能性があります。
【複数選択UIの使い分け】 「複数選んでよい」ことを伝えるなら四角いチェックボックス、「1つだけ」ならまるいラジオボタンと、形状でルールを示すのがUIデザインの基本です。複数選択でも、絞り込みのように選択肢を横並びでコンパクトに見せたい場面では、後述の選択チップが適しています。アクセシビリティ面では、チェックボックスの当たり判定（タップ領域）をラベルまで広げ、状態が一目でわかるコントラストを確保しましょう。
ドラムロール（ピッカー）
ドラムロールとは、複数ある選択肢の中から「1つ」を選ぶときに使う、ホイールを回すように操作する選択フォームです。
iOSでは「ピッカー（UIPickerView／日付の場合はDatePicker）」、Androidでは「NumberPicker」や「Material Date/Time Picker」として標準コンポーネントが用意されており、OS標準のドラムロールUIを使えば実装コストを抑えつつ、ユーザーが操作に迷わないUIを提供できます。なお、Appleは近年、生年月日のように選択肢が決まりきった項目以外では、入力スピードの速いキーボード入力やコンパクトな日付ピッカーを推奨する場面が増えています。漫然と多用するのではなく、後述の使い分け基準にそって採用するのがポイントです。
ドラムロールを活用しているアプリ事例
・タウンワーク（アルバイト求人の検索アプリ）
求人に応募するにあたって自身の職業を入力する場面で、ドラムロールの中から職業を選べるようになっています。
・ミニモ（サロンスタッフ直接予約アプリ）
サロンの予約日時を登録する際、ドラムロールで日付を選べるようになっています。
・CANARY（賃貸物件検索アプリ）
物件探しの条件の「駅からの徒歩距離」を、ドラムロールの項目から絞り込めるようになっています。
メリット
ドラムロールのメリットは、ユーザーのタイプミスを防げる点です。選択肢があらかじめ決められているので、入力ミスや変換ミスが起こりません。
また、選択肢を1つしか選べないので、誤って「複数選んでしまう」といったミスも防止できます。
デメリット
ドラムロールのデメリットは、選択肢を確認する際にスクロールする必要があるため、一目ですべての選択肢を確認できない点です。
ドラムロールを使用する際は、「月日」や「都道府県」など、ユーザーが選択肢のパターンをある程度理解している場面で活用するのが適切です。
【Pentagonの視点：ドラムロールの使い分け基準】 私たちが設計時に判断の目安にしているのは、(1) 選択肢が10〜20件を超え一覧で見せたいなら、ドラムロールより「リスト＋検索」や画面遷移、(2) 選択肢が3〜5件程度なら、ホイールを回す手間を省けるラジオボタンやチップ、(3) 生年月日・年月・都道府県のように「順序が直感的で件数が多い」項目こそドラムロールが最適、という3点です。アクセシビリティの面では、ドラムロールはスクリーンリーダーで現在値が読み上げられるOS標準実装を使うこと、ホイールのタップ領域を十分に確保することが重要です。
ステッパー
ステッパーとは、増減ボタン （＋/－） をタップし数値を入力するフォームです。
比較的小さな数値を選択する際に使用されます。
ステッパーを活用しているアプリ事例
・モスバーガー（ハンバーガーのネット注文・クーポン配信・会員証アプリ）
ネットで商品を注文する際、個数をステッパーで選べるようになっています。
・JAL（飛行機の予約・運航情報配信アプリ）
飛行機の予約をする際、「おとな」「こども」「同伴幼児」それぞれの人数をステッパーで指定できるようになっています。
・booking.com（ホテル・フライト・レンタカー・タクシー・アクティビティの予約アプリ）
ホテルを予約する際、部屋数と宿泊者数をステッパーで指定できるようになっています。
メリット
ステッパーのメリットは、数値を直感的に操作できる点です。
＋/－ボタンのタップだけで操作が完了するので、どのようなユーザーにとっても使いやすいUIです。
デメリット
ステッパーのデメリットは、数値が大きい場合は使いにくい点です。
例えば同じ商品を20個注文する場合、＋ボタンを19回タップしなければいけません。
2桁以上の数値が想定されるならば、別の選択フォームを使用しましょう。
スライダー
スライダーとは、あらかじめ定められた範囲の数値を選択させたい時に使用する選択フォームです。
スライダーを活用しているアプリ事例
・AutoReserve（飲食店の予約アプリ）
行きたいレストランの距離を、スライダーを使用して絞り込めるようになっています。
・ミニモ（サロンスタッフ直接予約アプリ）
クーポン価格の範囲を、スライダーを使用して絞り込めるようになっています。
・menu（フードデリバリー＆テイクアウトサービスアプリ）
スライダーを使用して、星の数（評価数）で飲食店を絞り込めるようになっています。
メリット
スライダーのメリットは、値を直感的に変更できる点です。
また、数値の幅が広い場合であっても、選びたい数値の付近にすばやく変更できます。
デメリット
スライダーのデメリットは、正確に数値を合わせにくい点です。
特定の数値をぴったり選んでもらいたい場合は、テキストフォームで入力をしてもらいましょう。
チップ
チップとは、情報の入力や選択などさまざまなシーンで用いられるラベル型の選択フォームです。
「入力チップ」「選択チップ」「絞り込みチップ」「アクションチップ」の4種類があります。
チップを活用しているアプリ事例
・ホットペッパービューティー(ヘア・ネイル・まつげ・リラク・エステサロンの検索・予約アプリ)
どのようなサロンを探しているのかを、チップで絞り込めるようになっています。
・タウンワーク（アルバイト求人の検索アプリ）
どのような求人を探しているのか、特徴をチップで絞り込めるようになっています。
・ピッコマ（漫画・ライトノベルなどの電子書籍の配信サービスアプリ）
読みたい漫画のジャンルをチップで絞り込めるようになっています。
メリット
チップのメリットは、どのような項目でも統一感を出せる点です。
選択肢が幅広い場合や選択項目の文字数がバラバラな場合でも、チップでデザインを統一することによりユーザーは選択肢を認識しやすくなります。
デメリット
チップのデメリットは、一度すべての選択肢に目を通さなければいけない点です。
選択項目の数が多いほど、すべての選択肢を確認するまでに時間がかかってしまいます。
トグルスイッチ
トグルスイッチとは、「オン/オフ」「有効/無効」「再生/停止」など2つの状態を交互に切り替える選択フォームです。
「トグル」「トグルボタン」「スイッチ」などと呼ばれることもありますが、全て同じ意味です。
トグルスイッチを活用しているアプリ事例
・booking.com（ホテル・フライト・レンタカー・タクシー・アクティビティの予約アプリ）
レンタカーの予約をする際、借りた車を「同じ場所に返却するかどうか」で入力フォームの数が変化するようになっています。いいえを選択した場合「返却場所」のフォームが追加されます。
・タイミー（スキマバイト募集マッチングアプリ）
求人を探す際、マップの表示を「今現在求人を募集している店」のみにするかどうかをトグルスイッチで切り替えられるようになっています。
・DELISH KITCHEN（料理レシピ動画の配信アプリ）
検索結果を表示する際、すでに「お気に入り」に登録済みのレシピを検索結果に含めるかをトグルスイッチで切り替えられるようになっています。
メリット
トグルスイッチのメリットは、その場で変更を確認できる点です。
選んだ選択肢が即座に有効になるので、アクションをすぐに認識できます。
デメリット
トグルスイッチのデメリットは、オンかオフかを変えた瞬間、即座にその結果を反映しないといけない点です。
チェックボックスのように「選択してから反映ボタンを押す」というような使い方は適していません。結果をすぐに示せない場合は「単独のチェックボックス」を利用しましょう。
カレンダー
カレンダーとは、名前の通りカレンダーから日付を選択できる選択式フォームです。
月や日付を直接タップして選択します。
カレンダーを活用しているアプリ事例
・トリバゴ（国内・海外予約サイトの宿泊料金比較アプリ）
ホテルの日程をカレンダーから選択できるようになっています。
・Klook（旅行・アクティビティ・ホテル予約アプリ）
購入するチケットの日時をカレンダーから選択できるようになっています。価格が変動する場合は日ごとの値段も一緒に記載されているので、一目で価格の比較もできるようになっています。
・LAVA（ヨガレッスンの予約アプリ）
レッスンの予約日をカレンダーから選択できるようになっています。
メリット
カレンダーのメリットは、数値で入力するよりも日付が直感的にわかりやすい点です。
カレンダーから直接タップをして選択するので、日付や曜日の勘違いや入力ミスを防げます。
デメリット
カレンダーのデメリットは、選択したい日付が現時点から大きく離れている場合、何度もページ移動をしなければいけない点です。
例えば1年先のカレンダーを表示したい場合、12回ページを移動しなければいけません。
画面遷移して選択
検索結果を絞り込むための条件が多い場合、1画面完結の選択フォームではなく「画面を遷移して項目を選んでもらう」というパターンもあります。
一般的に、左から右に向かって遷移していきます。
画面遷移を活用しているアプリ事例
・Creema（ハンドメイド・クリエイター作品の購入・販売アプリ）
カテゴリーごとに細かく検索条件を絞り込めるようになっています。
例:半袖Tシャツを探したい場合…TOP→カテゴリー→ファッション→Tシャツ・カットソー→Tシャツ→検索結果
・ZOZOTOWN（オンライン通販アプリ）
カテゴリーごとに細かく検索条件を絞り込めるようになっています。
例:半袖Tシャツを探したい場合…TOP→カテゴリー→タブバーで性別選択→トップス→Tシャツ/カットソー→着丈や柄などの詳細を指定→検索結果
・at home（賃貸・不動産検索アプリ）
どのような物件を探しているのか、さまざま条件を細かく絞り込めるようになっています。
例:東京駅周辺で賃貸を探したい場合…TOP→賃貸→東京都→路線・駅→東京駅→検索結果
メリット
画面遷移のメリットは、画面単位ではなく画面遷移を前提に選択肢をデザインをすることで、より深い部分まで絞り込むことができる点です。
選択項目を増やすことで、ユーザーは欲しい情報に到達しやすくなります。
デメリット
画面遷移のデメリットは、ユーザーの手間がかかることです。
選択項目が多いほど、ユーザーが途中で離脱してしまう可能性は高まります。
ボトムシートで選択
ボトムシートとは、画面下に表示され補助的な機能を呼び出す際に使用する選択フォームです。
メインコンテンツの補助をするために使用されます。
ボトムシートを活用しているアプリ事例
・Wolt（フードデリバリーサービスアプリ）
配達先の住所を入力する際、ボトムシートで建物のタイプを選択するよう指示されます。
・Uber（タクシー配車アプリ）
移動先を入力すると、ボトムシートでタクシーの種類を選べるようになっています。
・あすけん（AI食事管理アプリ）
記録ボタンをタップすると、毎日記録すべき項目が一覧で表示されます。さらに、記録した項目にはチェックマークがつくようになっています。
メリット
ボトムシートのメリットは、画面スペースを節約できる点です。
ボトムシートは一時的な表示なので、アクションを終了したあとはユーザーは元の場所に戻ってタスクを再開できます。
デメリット
ボトムシートのデメリットは、一時的にメイン画面の作業が中断される点です。
頻繁に表示しているとユーザーのストレスにつながる可能性があります。
ダイアログ
ダイアログとは、ユーザーによる選択が必要なとき、画面上にポップアップするウィンドウ表示です。
アプリから離脱することなく、ユーザーに特定の作業や選択を実行してもらうための手段として利用されています。
ダイアログを活用しているアプリ事例
・menu（フードデリバリー＆テイクアウトサービスアプリ）
配達先の住所を入力せずに次に進もうとすると、ダイアログで住所登録が必要なことを通知してくれます。
・at home（賃貸・不動産検索アプリ）
問い合わせの入力を途中で離脱しようとすると、ダイアログで「本当に終了するかどうか」を再確認されます。
・スカイスキャナー（飛行機・格安航空券・チケット予約アプリ）
ホテルの予約フォームを途中で離脱しようとすると、ダイアログで「ホテルの条件（価格）が変わってしまう場合がある」というアナウンスと「本当に終了するかどうか」を再確認されます。
メリット
ダイアログのメリットは、ユーザーに強制的に確認や選択をしてもらえる点です。
特定の選択や操作を行なわないとアプリを再開できないため、「必ず伝えたいメッセージ」や「確認してほしい項目」を際立たせるためにはぴったりの選択フォームです。
デメリット
ダイアログのデメリットは、ユーザーに大きなストレスがかかる可能性がある点です。
ダイアログが表示された場合、ユーザーは作業を強制的に中断させられるので、嫌悪感を抱きやすいです。頻繁に利用することは避けましょう。
まとめ
今回は、スマホアプリの選択フォームUIを10種類取り上げ、それぞれのメリット・デメリットと使い分けの基準を紹介しました。最後に「目的別の早見表」で振り返ります。
- 1つだけ選ぶ（固定の選択肢）：ドラムロール（件数が多い／順序が直感的）、ラジオボタン・チップ（3〜5件）
- 複数選ぶ：チェックボックス、選択チップ
- 数値を選ぶ：ステッパー（少量）、スライダー（範囲・概数）、テキスト入力（正確な値）
- オン／オフの切り替え：トグルスイッチ
- 日付・時刻：カレンダー（近い日付）、ドラムロール（年月など範囲が広い値）
- 選択肢が多い・補助的：画面遷移、ボトムシート、ダイアログ
近年はiOS／Androidともに標準UIコンポーネントが充実し、ドラムロール（ピッカー）やカレンダー、スライダーはOS標準を使うだけで一定の使いやすさとアクセシビリティを確保できます。だからこそ差がつくのは、「どの場面でどのUIを選ぶか」という設計判断です。
ユーザーにとって使いやすい選択フォームは状況によって異なります。
機能要件を満たすだけではなく、ユーザーにとっての最適なUIデザインを設計することで離脱率の低下や満足度の向上につながるでしょう。
ユーザーが選択しやすいフォームをデザインするためには、UI/UXのプロに相談してみるのも一つの方法です。
Pentagonでは、最適な入力・選択フォームの設計、UI/UX上の問題発見や改善を通じ、ユーザビリティの向上をサポートいたします。興味のある方は、ぜひPentagonまでお問い合わせください。
