ユーザーインタフェース要素:用語集

この用語集を活用して、主要なグラフィカルユーザーインタフェース要素やコントロールの定義をすばやく確認しよう。

UXの調査とデザインには、さまざまなUIコンポーネントやコントロールを表す専門用語の知識と理解が必要だ。

リストからそれぞれの定義にジャンプするか、用語集全体を確認してほしい。

2次元マトリックス
アイコン
アコーディオン
オーバーレイ
カード
開閉式メニュー
カルーセル
カレンダーピッカー
コンテキストメニュー
コンテナ
コントロール
コンボボックス
サイドシート
サブメニュー
状態切り替えコントロール
スクロールバー
スケルトンスクリーン
ステッパー
スナックバー
スピナー
スプリットボタン
スライダー
セグメントボタン
ダイアログ
タブバー
チェックボックス
ツールチップ
テキストボックス
トグル
トップへ戻るボタン
ドロップダウンメニュー
ドロップダウンリスト
ドロワーメニュー
ナビゲーションバー
ナビゲーションメニュー
入力コントロール
ノブ
パイメニュー
バッジ
パンくずリスト
ピッカー
日付ピッカー
プログレスインジケーター
プログレスバー
フローティングボタン
ページ内リンク
ホイール型日付ピッカー
ホイールピッカー
ボタン
ポップアップ
ポップアップヒント
ボトムシート
メガメニュー
メニュー
メニューバー
ライトボックス
ラジオボタン
リストボックス
リボン
リンク
レンジコントロール

2次元マトリックス入力コントロール

複雑なアプリケーションにおいて、複雑な曲線を描くことで、関連する複数のパラメータを同時に変更するために主に使用される特殊な入力コントロール。操作は、通常、既存の曲線上の点をクリックしてから、その点を新しい位置までドラッグすることで行われる。2次元マトリックスは、互いに依存する2つのパラメータ(たとえば、写真編集アプリケーションにおける輝度とRGBカーブなど)があり、通常それらが一緒に変更される場合に有用である。

アイコン

ユーザーインタフェースにおいて、オブジェクト、アクション、概念を視覚的に伝えるために使用される小さなグラフィック要素。一般的な物体(たとえば、ゴミ箱、ペン、虫眼鏡など)を描いたものが多く、通常はそのインタフェースで利用可能なアクションやツールを表すために使われる(たとえば、ゴミ箱のアイコンは削除、ペンのアイコンは編集を表す)。アイコンには情報を強調したり(たとえば、エラーメッセージの横に感嘆符のアイコンが表示される場合など)、注意を引くために使用されるものもある。ユーザーがその意味を確実に認識できるように、ほとんどのアイコンはテキストと組み合わせて使用すべきである。

アコーディオン

その場で展開して、非表示になっている情報を表示させるUI要素。アコーディオンは長いページのコンテンツを圧縮するためによく使われ、モバイルでは特に有用である。通常、アコーディオンはラベルと矢印またはプラス記号で表される。

オーバーレイ

既存のページコンテンツの上に別のコンテンツを表示するために用いられるUI要素。モーダルなものと非モーダルなものとがあり、画面全体を覆う場合もあれば、一部のみを覆う場合もある(この場合は背景が暗く表示されることが多い)。ページ全体を占める場合、オーバーレイは通常のウェブページやアプリケーションページと見分けがつきにくく、ユーザーに迷子になったような感覚を与えることがある。この用語はしばしば「ポップアップ」や「ライトボックス」と同じ意味で用いられる。

カード

関連のある少量の情報を収めるためのコンテナ。おおよそトランプのようなサイズ感と形で、概念的な単位を簡潔に表現することを目的としている。

開閉式メニュー

選択肢の一覧を展開して表示するメニュー。メニューハンドル(通常はアイコンかラベル、またはその両方)をクリックまたはタップすると選択肢が表示される。開閉式メニューは選択肢一覧の表示方法によって分類できる(たとえば、ドロップダウンメニュー、メガメニュー、パイメニュー、ドロワーメニューなど)。

回転式で項目(通常は画像)を表示するデザイン要素。ユーザーが矢印やボタン、水平スクロールを使って、手動でカルーセル項目を切り替えられるものもあれば、自動で画像が切り替わっていくカルーセルもある。カルーセルは小さな領域に多数の項目を収めることができるため、画面スペースの節約が可能である。

カレンダーピッカー

カレンダー形式の表示から日付を選択できる、日付入力用の特別なコントロール。表示されると、アクティベートされると、通常は月のビューのカレンダーが表示されて、ユーザーは年月日を選択できる。

コンテキストメニュー

要求に応じて表示されるメニューの一種で、コントロール、インタフェースの領域、アプリケーション内のデータ、あるいはビューなど、それぞれに関するアクションをいくつか表示する。マウス駆動型のインタフェースでは、コンテキストメニューは、関心のある項目を右クリックすることで起動されることが多い。

コンテナ

関連するUI要素を保持・整理するためのグラフィカル要素。コンテナには、ボタン、テキスト、テキストボックス、アイコンなどの要素を入れることができる。通常、コンテナは、境界線、影、余白によって視覚的に定義される。

コントロール

ユーザーがアプリケーションやウェブサイト内で操作を実行したり、データを入力したりできるようにする、インタラクティブなUI要素の総称。ボタン、テキストボックス、メニューはいずれもコントロールの一例である。

コンボボックス

ドロップダウンリストとテキストボックスの機能を組み合わせた入力コントロール。ユーザーが入力できるテキストボックスと、クリックすると選択肢のリストが表示される矢印ボタンで構成されている。ユーザーはリストから選択肢を選び、それをテキストボックスに表示させることもできるし、直接テキストボックスに入力することも可能である。コンボボックスは、ユーザーがリストから項目を選べるようにも、リストにない値を入力できるようにもしておきたい場合に有用である。

サイドシート(ドロワー、フライアウト)

画面の左端または右端からスライドして表示され、通常、画面のかなりの部分を覆うオーバーレイの一種。(画面の下端から現れる)ボトムシートと同様に、サイドシートはモーダル(つまり、閉じるまで背景の要素とのインタラクションを制限する)にも非モーダルにもできる。サイドシートには、ナビゲーション要素、コマンド、コンテンツを含めることが可能である。「ドロワー」や「フライアウト」という用語は、「サイドシート」の同義語として使われることが多い。

ユーザーがメニュー内の項目にマウスオーバーしたり、クリックしたりすると、大きなメニューの一部として表示される下位のメニュー。サブメニューは、追加の選択肢や階層構造を提供することでメインメニュー項目の機能を拡張し、メインメニューの選択肢の数を過度に増やすことなく、ユーザーが大量の選択肢を効率的に見て回れるようにする。

状態切り替えコントロール

システムを相互に排他的な2つの状態(たとえば、オン/オフ、ミュート/ミュート解除など)間で切り替えるためのコントロール。トグル(訳注:2つの位置の間をスライドして切り替えるもの)は状態切り替えコントロールの一種だが、すべての状態切り替えコントロールがトグルである必要はない(たとえば、「ミュート」ボタンはミュート状態とミュート解除状態を切り替えることができる)。

スクロールバー

画面上に表示されるコンテナやページの一部分を示し、制御するための要素。典型的なスクロールバーは、トラック(スクロールバーをスライドする領域)とハンドル(コンテンツをスクロールするためにドラッグできる)とで構成される。最近のユーザーインタフェースでは、スクロールバーは必要な場合、つまりコンテンツが現在の表示領域を超えるときにのみ表示され、ユーザーがページを操作しないときは非表示になることが多い。ユーザーは、ハンドルをクリックしてドラッグしたり、トラックをクリックして特定の位置にジャンプしたり、バーの端にある矢印ボタンを使用して段階的に移動したりして、スクロールバーを操作できる。

スクロールバーは、コンテンツが表示領域を超えて広がる方向(訳注)に応じて水平または垂直方向になる。垂直スクロールバーは、ウェブページや長いドキュメントを上下に移動するために用いられ、水平スクロールバーは、通常、幅の広いテーブルや画像を左右に移動するのに用いられる。

訳注:原文では“the context extends past the viewable area”(文脈が表示領域を超えて広がる方向)だが、文脈的に“content”ではないかと推測されたため、そのように訳した。

スケルトンスクリーン

ページ全体の読み込み用のプログレスインジケーターで、ユーザーにページレイアウトを模したワイヤーフレームのようなビジュアルを提供する。

ステッパー

デフォルトの数値の値を、あらかじめ定義された小さい単位で段階的に増減させるためのUI入力コントロール。通常、数値の左右に配置された2つのボタン(「+」と「-」、または上向き矢印と下向き矢印)で構成されている。一部のステッパーコントロールでは、この2つのボタンに加えて、数値を編集可能なテキストボックスで表示し、希望する値がデフォルト値から大きく外れている場合に、ユーザーがデフォルト値を直接変更できるようになっている。

スナックバー(トースト)

通常、プロセスの状態をユーザーに知らせるために使われ、しばらくすると自動的に消えて、ユーザーの操作を必要としない一時的な非モーダルダイアログ。スナックバーは、プロセスの完了(たとえば、ファイルの削除など)を確認するためによく使われる。一部のスナックバーには「元に戻す」などの動作を実行するボタンが含まれるものがある。

スピナー(待機アニメーション、ローディングスピナー、アクティビティインジケーター)

プロセスが進行中であることを示すプログレスインジケーターの一種。通常、回転する円などのシンプルなアニメーションで表現される。スピナーは、プロセスがどのくらい完了し、あとどれくらいの時間を待つ必要があるかといった情報をユーザーに提供しないため、非常に短いプロセス(推定所要時間が3秒未満)にのみ使用すべきである。

スプリットボタン

メニューとボタンを組み合わせたUI要素。通常、ラベルと矢印の2つの要素で構成されるボタンとして表現される。ラベルをクリックするとデフォルトアクションが実行され、矢印をクリックすると他の選択可能な動作のリストが表示される。

スライダー

ハンドルと呼ばれるインジケーターを水平または垂直方向のトラックに沿って動かすことで、値を調整したり、範囲内を移動したりできるUI要素。スライダーはレンジコントロールの一種で、ユーザーが正確な数値で表すのが難しい状況(たとえば、音量や明るさの調整など)に適している。

セグメントボタン(セグメントコントロール)

水平方向に並んだ一連のボタンを表示するユーザーインタフェース要素。それぞれがボタンとして機能する、分割(=セグメント)された選択肢の中から、ユーザーは1つまたは複数を選択できる。この要素は、同じデータのビューを切り替えたり、コンテンツをフィルタリングしたりするためによく用いられる。

ダイアログ

ユーザーに重要な情報を提示したり、入力を求めたり、操作を促したりするために、メインアプリケーションウィンドウの前面に表示される小さなウィンドウ。ダイアログは、ユーザーが操作を続行する前に即座の判断やアクションが求められる場面(たとえば、ファイルの削除確認が必要な場合や、エラーが発生した場合など)では、ユーザーの作業の流れを中断するように設計されている。ダイアログには、テキストやボタン、場合によっては入力フィールドなどのインタラクティブなコントロールが含まれることがある。また、ダイアログには、モーダルなもの(ダイアログを閉じるまで背後のコンテンツとインタラクトできない)も非モーダルなものもある。

タブバー(タブ)

ユーザーが、利用可能な選択肢(タブ)のリストから 1つのコンテンツパネルを選択して表示できるユーザーインタフェース要素。選択肢(タブ)のリストは通常、水平方向に表示され、各選択肢はそのタブにあるコンテンツの簡潔な説明になっている。ユーザーがタブをクリックすると、選択したタブのコンテンツがタブバーの下(モバイルでは上)に表示される。タブバーはリボンに似ているが、リボンは主にアプリケーションのコマンドを整理するのに用いられるのに対し、タブバーはウェブページやアプリケーションのコンテンツを整理するために用いられる。

チェックボックス

単体としても、チェックボックスのリストとしても表示できる入力コントロール。チェックボックスが1つの場合、ユーザーはチェックありとチェックなしの2つの状態を選択できる。一方、複数のチェックボックスからなるリストは、リストから一部の項目を選択するために用いられる。チェックボックスのリストでは、それぞれのボックスを個別に選択できるので、あるボックスを選択しても、リスト内の他のボックスの状態への影響はない。

ツールチップ

グラフィカルユーザーインタフェース内の要素をユーザーが操作すると表示される、簡潔な情報メッセージを提供する小さなオーバーレイ。通常、ツールチップは、マウスオーバーしたり、キーボードフォーカスしたりすることで起動される。

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

定義された長方形の領域内にユーザーがテキストを入力できるようにする入力コントロール。テキストボックスはフォームの基本的な構成要素である。1行または複数行のテキストを入力できるように設定可能である。

トグル(トグルスイッチ、スイッチ)

通常、オンとオフの2つの位置の間をスライドして切り替える形式で表される状態切り替えコントロール。これは物理的なオン/オフの照明スイッチのデジタル版に相当する。トグルは、識別しやすい色や明示的なラベルで、現在の状態を明確に示す必要がある。

トップへ戻るボタン

ユーザーをページの最上部(通常、ナビゲーションUIなどの重要なコントロールが配置されている)に戻すボタン。ページの右下にあるフローティングボタンとして実装されることが多く、特に長いモバイルページで有用である。

メニューのハンドルの下にリスト形式で選択肢が表示される、開閉式メニューの一種。このタイプのメニューは「リニアメニュー」(選択肢がリスト状に表示されることから)や「プルダウンメニュー」とも呼ばれる。

ユーザーが選択肢のリストから1つを選択できるようにするピッカーの一種。ラベル、矢印ボタン、選択肢のリストの3つの構成要素からなる。デフォルトではリストは非表示だが、矢印をクリックするとリストが表示されて、ユーザーが選べる選択肢が現れる。ユーザーが項目を選択すると、リストは折りたたまれ、ラベルは選択された項目に置き換わる。リストボックスとは異なり、ドロップダウンリストではユーザーがリストから選択できるのは1項目だけである。

ドロワーメニュー

サイドシート内に表示されるメニューで、画面の左側または右側からスライドして現れる。ドロワーメニューは、モバイルアプリケーションにおいてナビゲーションメニューとして広く用いられている。

ナビゲーションカテゴリーを格納するメニューバーとして実装されるナビゲーションメニューの一種。ナビゲーションバーは最も一般的なナビゲーションUIの1つであり、モバイルおよびデスクトップの両プラットフォーム上で表示可能である。

ナビゲーションの選択肢を格納するメニュー。ナビゲーションメニューには、表示されているもの(ナビゲーションバー)と、展開されるものがある。

入力コントロール

ユーザーがシステムに情報を入力できるようにするUIコンポーネント。テキストボックス、チェックボックス、ラジオボタン、スライダー、トグル、ピッカーなどがある。

ノブ(バーチャルノブ)

利用可能な値が円形(または円弧状)に表示されるレンジコントロールの一種。このタイプのコントロールは、もともとは物理的なオーディオ機器(ラジオやアンプの音量調節など)で用いられていたノブ(つまみ)から着想を得たものである。

パイメニュー(ラジアルメニュー)

メニューのすべての選択肢が、メニューハンドルを中心とした円形に配置される開閉式メニューの一種。このタイプのメニューは、すべての選択肢がハンドルから等距離にあるため、どの選択肢にも同じ時間でアクセスできるという利点がある。パイメニューは1980年代後半に導入され、モバイルアプリでの採用も試みられてきたにもかかわらず、広く普及はしていない。

バッジ

通知(通常はドットで表示)やアイテム数(通常は数字で表示)を示す。一般に、バッジはアイコン(ショッピングカートやメッセージのアイコンなど)の上に表示され、その要素に注意を引くために用いられる。

サイトの情報アーキテクチャの中で現在のページが属するカテゴリーを(最も一般的なものから最も具体的なものへと)階層的に表示するナビゲーション要素。ファイルシステムにおけるパスに似ている。

ピッカー

ユーザーが一連の選択肢の中から1つの値を選択できるようにするユーザーインタフェース要素。ピッカーにはさまざまな種類がある(たとえば、ドロップダウンリスト、ラジオボタンリスト、ホイールピッカーなど)。ピッカーの中には、表示するデータの種類に特化したものもある(たとえば、カレンダーピッカー、カラーピッカーなど)。

日付ピッカー

ユーザーが日付を選択できるようにする日付入力用のコントロール。日付ピッカーの中には、テキストフィールドから日付を手入力できたり、日付に加えて時刻も選択できるオプションがあるものもある。カレンダーピッカーとホイール型日付ピッカーは異なる種類の日付ピッカーである。

プログレスインジケーター

ファイルのダウンロード、ウェブページの読み込み、ソフトウェアのインストールなど、進行中のプロセスの完了状況について視覚的フィードバックを提供するUI要素。プログレスインジケーターは処理の完了までに必要な時間やシステムの状態をユーザーが予測できるよう支援し、不安を軽減する。プログレスバーとスピナーは異なる種類のプログレスインジケーターである。

プログレスバー

プロセスの完了までの進行状況を表示する特別なタイプのプログレスインジケーターで、通常、プロセスの進行にしたがって左から右に塗りつぶされていく横向きのバーとして表示される。バーの塗りつぶされた部分は、タスクの完了率に相当する。通常、プログレスバーの使用は10秒以上かかると見込まれる処理において推奨される。

フローティングボタン(フローティングアクションボタン、FAB)

ページコンテンツの上に浮かんでいるボタン。フローティングボタンは画面上で最もよく行われる重要なアクションに用いられることが多く、コンテンツをスクロールしても画面上に表示されたままである。フローティングボタンは、不可欠なアクションにすばやくアクセスできるように、モバイルデバイスでよく用いられる。

同一ページ内のある場所から別の場所へユーザーが移動できるようにするリンク。ページ内リンクはページ内目次を実装するのによく用いられる。

ホイール型日付ピッカー

回転するホイール状のインタフェースを使って、日付や時刻の値を選択できるiOS特有の日付ピッカー。日付の各要素(日、月、年)や、場合によっては時刻が、それぞれ個別の「ホイール」に表示され、ユーザーはホイールを縦に回転させて値を選択する。ホイール型日付ピッカーは、入力したい日付に到達するまでスクロールする回数が多くなることもあるため、カレンダーピッカーに比べるとユーザビリティが低い。

ホイールピッカー

選べる選択肢をホイール状のインタフェースで表示するiOS特有のピッカー。

ボタン

ユーザーがクリックまたはタップすることで、特定のアクション(たとえば、フォームの送信やプロセスの開始など)を実行するUI要素。クリック可能なターゲットエリアと、通常は実行されるアクションを説明するラベルで構成されている。デジタルなボタンは、物理的なボタンに似せて作られていることが多い。

画面全体を占有しないオーバーレイ。「ポップアップ」という用語はしばしば「オーバーレイ」や「ライトボックス」と同じ意味で用いられる。Appleは、iOS、iPadOS、macOSのアプリケーションでポップアップを指す用語として「ポップオーバー」を用いている。

ユーザーがタッチインタフェースにおいて、「i」や「?」のアイコンをタップすると表示される、簡潔で情報的なメッセージを表示する小さなオーバーレイ。ポップアップヒントは、マウスオーバージェスチャーをサポートしないインタフェース(通常はタッチスクリーンデバイス)における、ツールチップの代替機能である。

ボトムシート

追加の詳細情報やアクションを表示する、モバイルデバイスの画面下端に固定されたオーバーレイ。

メガメニュー(レクタングルメニュー、スクエアメニュー)

ハンドル下に表示される長方形の中に選択肢の一覧が表示される、開閉式メニュー。メガメニューは主にナビゲーションメニューとして使用される。

ユーザーに選択肢やコマンドの一覧を提示するUI要素で、通常、アプリケーションやウェブサイト内でアクションを実行したり、移動したりするために用いられる。選択肢一式が常に表示されているもの(メニューバー)もあれば、開閉式のものもある。

選択肢の一覧が横または縦のリスト(バー)形式で常時表示されるメニューの一種。ツールバーやナビゲーションバーはその一例である。

画面全体を占有しないオーバーレイ。マルチメディアコンテンツ(画像や動画など)を表示するオーバーレイを指すこともある。この用語は「オーバーレイ」や「ポップアップ」と同じ意味で用いられることが多い。

ラジオボタン

あらかじめ定義された相互排他的な選択肢一式の中から、ユーザーが1つの選択肢だけを選べるようにするピッカーの一種。各選択肢は、小さな円と、その後に続く説明ラベルで表示される。ユーザーがラジオボタンを1つ選択すると、そのグループで以前に選択されていたボタンの選択は解除され、一度に1つしか選択できないようになっている。

リストボックス

選択可能な項目のリストをコンテナ内に表示する入力コントロールの一種。ユーザーはリストボックスをスクロールして、通常は縦に1つずつ並んでいる利用可能な選択肢をすべて確認できる。リストボックスは、ユーザーがリストから選択できる選択肢の数に応じて、単一選択または複数選択のどちらかになる。

リボン

さまざまなコントロールやツールを複数のタブにまとめて提示するUI要素。各タブには、特定のアクティビティに固有のコマンドが含まれる(たとえば、「ホーム」タブには基本機能が含まれ、「挿入」タブには他のオブジェクトの追加に関連するコマンドが含まれる)。コマンドは、通常、タブ内に横方向のリストとして表示される。このタイプのインタフェースは主にアプリケーションで用いられ、MicrosoftのOfficeスイートによって普及した。ウェブでは、タブバーがこれに相当する。

同じウェブページ内の別の場所や別のウェブページ、またはまったく別のウェブサイトへ移動できるようにするUI要素。リンクテキストは、他のコンテンツから目立たせ、クリック可能だと示すため、(通常は色や下線など)特別な書式で表示される。

レンジコントロール(連続コントロール)

あらかじめ定義された範囲内で、(ほぼ)あらゆる値を選択できるようにするピッカーの一種。スライダーやノブはレンジコントロールの一例である。