縁の下のUIデザイン―少しの工夫で大きな改善!

第27回 数値の入力・選択に適したUI

この記事を読むのに必要な時間:およそ 2 分

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

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

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

テキストフィールド(キーボード入力)

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

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

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

図1 電話番号入力の事例

図1 電話番号入力の事例

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

プルダウンメニュー

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

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

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

図2 生年月日の選択と商品選択の事例

図2 生年月日の選択と商品選択の事例

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

著者プロフィール

池田拓司(いけだたくじ)

デザイナー。多摩美術大学を卒業後,ニフティ株式会社,株式会社はてなを経て,2012年にクックパッド株式会社に入社。2013年デザイン部長,2014年ユーザーファースト推進部長・執行役。Sassを使ったUIフレームワークの構築,Webアプリケーションなどサービス全体の設計,ユーザーのほうを向いたデザインやサービス開発の組織づくりにも努める。2017年4月に独立し,Design & Life inc.を設立。インターネットサービスをはじめとするさまざまなデザイン業,およびサービス開発などに取り組んでいる。

Design & Life inc.:http://designandlife.co.jp/