【スマホアプリ】選択フォームのUIデザイン10選！メリット・デメリットや事例も紹介
新規会員登録や美容院の予約、飛行機のチケット購入、デリバリーの注文など、さまざまなシーンで使用する入力フォーム。その中でも、ユーザーの入力負荷を減らすために重要なのが「選択フォーム」のUI要素です。
選択フォームにはたくさんの種類があり、正しくUIを設定すれば、ユーザーが入力する手間を省いて、タイプミス防止やユーザビリティ向上、離脱防止につながります。
この記事では、選択フォームの代表的なUIデザインを10種類紹介し、それぞれのメリット・デメリットやアプリの参考事例を解説します。
スマホアプリの代表的な選択フォームUIデザイン10選
選択フォームには、用途に合わせてさまざまなUIがあります。ここでは代表的な選択フォームを10個ご紹介します。
チェックボックス
チェックボックスとは、「1つ」「複数」「なし」など任意の数の選択肢を選ぶ際に用いる選択フォームです。
また、ユーザーが「オン/オフ」を切り替えることができる単独の選択肢として使われることもあります。
チェックボックスを活用しているアプリ事例
・ホットペッパービューティー(ヘア・ネイル・まつげ・リラク・エステサロンの検索・予約アプリ)
行きたいサロンのエリアをチェックボックスで絞り込めるようになっています。
・UNIQLO（ファッション通販アプリ）
欲しい商品を検索する際、商品のカラーをチェックボックスで絞り込めるようになっています。
・at home（賃貸・不動産検索アプリ）
探している物件のエリアを、地図上のチェックボックスで絞り込めるようになっています。
メリット
チェックボックスのメリットは、複数の変更を一度に処理できる点です。
チェックボックスと似ている機能にトグルスイッチがありますが、トグルスイッチの場合はユーザーが設定の適応を一つずつ行わなければいけません。
デメリット
チェックボックスのデメリットは、「3つ以上の選択肢から1つだけを選ばせる」といった場面で不向きな点です。チェックボックスは項目をいくつでも選択できるフォームなので、誤って「2つ以上の項目を選んでしまう」「1つも選ばない」などの入力ミスが起こる可能性があります。
ドラムロール
ドラムロールとは、複数ある選択肢の中から「1つ」の選択肢を選ぶ時に使う選択フォームです。
「ピッカー」と呼ばれることもあります。
ドラムロールを活用しているアプリ事例
・タウンワーク（アルバイト求人の検索アプリ）
求人に応募するにあたって自身の職業を入力する場面で、ドラムロールの中から職業を選べるようになっています。
・ミニモ（サロンスタッフ直接予約アプリ）
サロンの予約日時を登録する際、ドラムロールで日付を選べるようになっています。
・CANARY（賃貸物件検索アプリ）
物件探しの条件の「駅からの徒歩距離」を、ドラムロールの項目から絞り込めるようになっています。
メリット
ドラムロールのメリットは、ユーザーのタイプミスを防げる点です。選択肢があらかじめ決められているので、入力ミスや変換ミスが起こりません。
また、選択肢を1つしか選べないので、誤って「複数選んでしまう」といったミスも防止できます。
デメリット
ドラムロールのデメリットは、選択肢を確認する際にスクロールする必要があるため、一目ですべての選択肢を確認できない点です。
ドラムロールを使用する際は、「月日」や「都道府県」など、ユーザーが選択肢のパターンをある程度理解している場面で活用するのが適切です。
ステッパー
ステッパーとは、増減ボタン （＋/－） をタップし数値を入力するフォームです。
比較的小さな数値を選択する際に使用されます。
ステッパーを活用しているアプリ事例
・モスバーガー（ハンバーガーのネット注文・クーポン配信・会員証アプリ）
ネットで商品を注文する際、個数をステッパーで選べるようになっています。
・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デザインを設計することで離脱率の低下や満足度の向上につながるでしょう。
ユーザーが選択しやすいフォームをデザインするためには、UI/UXのプロに相談してみるのも一つの方法です。
Pentagonでは、最適な入力・選択フォームの設計、UI/UX上の問題発見や改善を通じ、ユーザビリティの向上をサポートいたします。興味のある方は、ぜひPentagonまでお問い合わせください。