数値入力に用いるUIコンポーネントには，テキストフィールド以外にもさまざまな種類があります。その理由は，入力する際に何らかの制限をかけたい場合や，あらかじめ決められたものから選択してほしい場合などもあるためです。自由に入力してもらえる場合はテキストフィールドを用いますが，そうでない場合，シーンや目的に合わせて正しいUIコンポーネントの選択を考えなければいけません。

今回は数値を入力・選択してもらう場合，どのようなUIコンポーネントが考えられるかを事例を交えて考察していきます。

私が数値入力のためによく使うUIコンポーネントは，これから紹介する4パターンです。それぞれどんなときに使うとよく，どんなときに使うとよくないか，比較も交えながら紹介します。

テキストフィールド（キーボード入力）

まず制限なくユーザーが自由に数値を入力できる場合は，文字の入力と同様にテキストフィールドを用いてキーボードで入力してもらうことが基本です。

このコンポーネントのメリットは，普段使い慣れた入力方法をそのまま利用できるため使いやすいという点です。一方でデメリットは，ユーザー自身が自由に入力ができてしまうためサービス運営者側で制限がかけにくい点です。

一番わかりやすい事例はフォームの電話番号入力（図1）などが挙げられます。ユーザーはテキストフィールドの範囲で自由に入力ができます。

もしユーザーが入力できる数値に制限をかけたい場合は，これから紹介するテキストフィールド以外のコンポーネントを利用します。

プルダウンメニュー

あらかじめ用意された数値を選んでもらう場合は，プルダウンメニューを第一候補に考えます。

このコンポーネントのメリットは，数値だけに限らず複数の候補から選択してもらう際によく使われているため，ユーザーにとって親しみやすいものであることです。デメリットは，選択肢がたくさんある場合は選択が面倒な点です。その場合は自由入力できないかや，次に紹介するスライダーが利用できないかを検討し欠点が解消できないか考えましょう。

生年月日の選択（図2（a））は，プルダウンメニューによって実装されることが多いUIだと感じます。しかし，生まれた年の選択肢は多く，その中から自分の生まれた年を選択することが大変だと感じてしまうことがよくあります。自分の生年月日は基本的には覚えているものなので，1つ前に紹介した電話番号のようにテキストフィールドを使って入力してもらったほうがユーザーにとっては入力しやすいのではないかと私は感じています。このように，数値に制限があり決められた候補から選ぶ必要がある場合も，選ばせるのではなく入力してもらうほうが使い勝手が良い場合もあると思っています。

一方で図2（b）のように，ECサービスなどで商品がカートに入れられる際に個数制限をかけたい場合があります。このようなときはプルダウンメニューを使うことで，あらかじめ制限しておくことができるメリットもあります。このようにサービス運営する側の意図で何か制限を設けたい場合，プルダウンメニューが効果的です。