スライダー（シークバー）

あらかじめ定められた最小値と最大値の間の数値を選択させたい場合は，スライダーを使います。音楽や動画の再生位置を合わせるためのシークバーが代表的です。

このコンポーネントのメリットは，たくさんある連続した数値を直感的な操作で変更ができることです。デメリットは，正確に数値を合わせにくい点です。そのため，数値そのものを的確に選ぶために利用するよりも，感覚で操作するために用いられることがほとんどです。具体的には以下のような例です。

• サビの部分から音楽を聴きはじめる（図3（a））
• 照明を今よりも薄暗くする（図3（b））
• 温度が熱くなったためエアコンの設定温度を少し下げる（図3（c））

特定の数字をぴったり選ぶのには操作しづらく不向きだと思います。しかしプルダウンメニューと違って，選びたい値の付近にすばやく変更しやすいというメリットもあります。

また，スライダーは直線的なデザインにすることがほとんどですが，形状を変えても用いることができます。これには，操作性を高めること，視覚的なアクセントにすることの2つの目的が挙げられます。

図4のGoogle Homeアプリのスライダーは，図3の直線的なデザインではなく円形になっています。こうすることで，スライダーの範囲を画面全体に配置し距離を長くできるため，ユーザーがより細かい数値の設定をやりやすくなります。

ステッパー

ステッパーは数値を1ずつ上下させるコンポーネントです。

このコンポーネントのメリットは，数値を確実に上下できる点です。デメリットは，数値の変更幅を一気に変えるにはボタンを押し続けなければいけないため使い勝手が悪くなってしまう点です。そのため，どれくらい値の変更幅があるのかによって，スライダーやプルダウンメニューなどほかのコンポーネントも候補として検討する必要があります。

図5は温度調整のためのUIをスライダー（（a））とステッパー（（b））でデザインした比較です。お風呂の湯沸かし器やエアコンの温度変更では，数値の変更幅はあまり大きくなく，現状よりも少し温度を上げる・下げる程度で考えることがほとんどです。そのため，使い勝手を優先する場合は（b）のステッパーだけでよいように感じます。

図6は音量調整のためのUIをスライダー（（a））とステッパー（（b））でデザインした比較です。音量の場合は音を消すために一気にスライダーで値を変更するケースや実際に聴きながら感覚的に調整することが多いため，私はスライダーのほうが使いやすいと感じます。一方で，ステッパーのほうが急に大音量になったりしないため，安心して音量調整できるというメリットもあると感じています。

図5，図6で挙げた事例は，それぞれのUIにメリットがあると感じます。実際，どちらのパターンのデザインも見ることがありますし，両方のUIが備わっているものもあります。どちらを選択するかは，どのようなプロダクトなのかを考え，数値選択以外のほかのデザイン要素なども加味して決定しましょう。

今回は，数値の入力・選択に用いるUIについて，コンポーネントごとに特徴を説明しました。冒頭にも書いたとおり，ユーザーの自由度や操作性を考え，キーボードで入力ができるものが一番良いと私は考えています。しかし，それだけでは当然難しい場面があります。

数値の選択はよく使うUIです。そこをちゃんと考えることで，ユーザーのサービスに対する印象も大きく変わると思います。