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

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

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

スライダー(シークバー)

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

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

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

図3 スライダーの事例

図3 スライダーの事例

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

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

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

図4 Google HomeのiPhoneアプリ

図4 Google HomeのiPhoneアプリ

ステッパー

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

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

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

図5 温度調整のためにスライダー(a)とステッパー(b)を使った場合

図5 温度調整のためにスライダー(a)とステッパー(b)を使った場合

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

図6 音量調整のためにスライダー(a)とステッパー(b)を使った場合

図6 音量調整のためにスライダー(a)とステッパー(b)を使った場合

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

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

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

WEB+DB PRESS

本誌最新号をチェック!
WEB+DB PRESS Vol.128

2022年4月23日発売
B5判/160ページ
定価1,628円
(本体1,480円+税10%)
ISBN978-4-297-12789-3

  • 特集1
    演習で慣れる!
    データベース入門
    SQL操作,テーブル設計,分析用データ処理
  • 特集2
    クラウド構築ツールの大本命!
    ゼロから学ぶTerraform
  • 特集3
    チャットやIssueでちゃんと伝えたい!
    エンジニアのための英語

著者プロフィール

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

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

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