UIエレメントについてデザイナーが知っておきたい

ユーザーインタフェース（以下 UI）は、モバイル、ウェブ、デスクトップ、AR、VRのアプリにかかわらず、ソフトウェアアプリケーションの最も重要な部分です。つまりUIエレメントは、すべてのアプリケーションの中核となる構成要素なのです。

UIエレメントは、ユーザーとアプリケーション間のインタラクションを担当します。UIエレメントによって、効果的なユーザーナビゲーションとデータの入出力が可能になります。

UIデザイナーやWeb開発者として、UIエレメントとユーザーの関わり方について深く理解することは非常に重要です。理解することによって、より良いアプリケーションやWebサイトの構造を作るのに役立ちます。

ここでは、すべてのデザイナーが把握しておくべき、一般的なUIエレメントとUI用語についてご紹介します。

デザイナーなら知っておきたいUIエレメントと専門用語

1. 入力
2. 出力
3. ヘルプ 

それぞれのエレメントについては、後ほど詳しく説明します。用語については、大きく2つのセグメントに分けることができます。

1. 標準的なUI用語；動詞（アクション用語）
2. 標準的なUI用語；名詞（識別子の用語）

標準的なUI用語；動詞（別名：アクション）

用語	意味
Click / Tap	マウスのボタンや画面を押したり、叩いたり、触れたり、離したりする行為。
Press	ユーザーキーボードや電源ボタンなどのボタンを（物理的に）押す必要がある動作のこと。
Type	キーを押してテキストボックスなどに入力する行為。
Swipe	主にタッチパネルに適用される。タッチを離さずにスワイプで画面領域を移動する行為。
Hold	UIエレメントをClick/Tap/Pressしてホールドする行為。ボタンなど。

標準的なUI用語；名詞（別名：識別子）

用語	意味
Field	WUI（Web User Interface）またはGUI（Graphical User Interface）において、情報を入力する必要のある領域のこと。
Dialogue	アクションの前後に表示されるポップアップウィンドウ。
Panel	ツールバーやコントロールパネル。
Pane	WUIやGUIで、スクロールやサイズ変更が可能な独立した領域。
Button	クリックされるとアクションを実行するグラフィックまたはウェブエレメント。
Icon	アクションへのショートカットを表すグラフィックまたはウェブエレメント。
Tab	一連のアクションをグループ化したグラフィックまたはウェブエレメント。
Wizard	特定のタスクを実行するための一連のステップをユーザーに説明するダイアログ。

UIエレメント の理解の重要性

例えば、ユーザーに好きな国を選択してもらうアンケートを実施するとします。そうすると、多くのUIエレメントでその目的を果たすことができます。

• リスト；複数の国を選択できるようにします。
• ドロップダウン； これは通常、1つのエレメントを選択することができます。
• チェックボックス；なし、1つ、または複数の国を選択するための代替方法です。
• ラジオ；これは、単一のエレメントを選択することができます。

では、あなたなら何を選びますか？もっと価値のあるものはないのか？カスタムデザインのラジオボタンは使えるか？などの意見があるでしょう。
これらの疑問を解決するためには、さまざまなUIエレメントを正しく理解する必要があります。

さぁ、始めましょう!

UIエレメント のタイプ

UIエレメントは大きく3つに分類するのが理想的です。

1. 入力
2. 出力
3. ヘルプ

入力エレメント

入力エレメントは、さまざまなユーザー入力を処理する役割を担っています。時には、入力の検証プロセスの一部となることもあります。最もよく使われる入力エレメントには以下のようなものがあります。

• ドロップダウン
• コンボボックス
• ボタン
• トグル
• テキスト/パスワードフィールド
• 日付ピッカー
• チェックボックス
• ラジオボタン
• 承認ダイアログ

出力エレメント

出力エレメントは、様々なユーザーの入力に対する結果を表示する役割を担っています。また、アラート、警告、成功、エラーメッセージをユーザーに表示します。出力エレメントは本来、中立的なものではありません。入力と様々な操作に依存するものです。

ヘルプエレメント

それ以外のエレメントはすべてこのカテゴリーに入ります。最も広く使われているヘルプエレメントには、以下のものがあります。

• 通知
• パンくず
• アイコン
• スライダー
• プログレスバー
• ツールチップ

また、ヘルプエレメントを3つのカテゴリーに分類することができます。

• ナビゲーション

UIナビゲーションを担っています。ナビゲーションヘルプエレメントには、ナビゲーションメニュー、リンクのリスト、ブレッドクラムなどがあります。

• 情報

情報を表現する役割を担っています。例えば、ツールチップ、アイコン、プログレスバーなどです。

• グループ/コンテナ

様々なエレメントをまとめる役割を担っています。ウィジェット、コンテナ、サイドバーなどがこれに該当します。下記UXPinブログのニュースレター購読ウィジェットも、コンテナの良い例です。

9 つの共通の入力エレメント

1. チェックボックス

チェックボックスは、ユーザーがオプションセットから1つまたは複数のオプションを選択できるようにするものです。チェックボックスは縦に並べて表示するのがベストプラクティスです。スペースやその他のエレメントを考慮し、複数列で表示することも可能です。

2. ドロップダウン

ドロップダウンは、ユーザーが長い選択肢のリストから一度に1つの項目を選択することができます。ラジオボタンよりもコンパクトです。また、スペースを節約することもできます。より良いUXのためには、ラベルとプレースホルダーとしてのヘルパーテキストを追加することが必要です。
例）”1つを選択、選択する”

3. コンボボックス

コンボボックスは、ユーザーがカスタム値を直接入力するか、リストから値を選択するかのどちらかを可能にします。これは、ドロップダウンリストまたはリストボックスと1行の入力フィールドを組み合わせたものです。

4. ボタン

ボタンは、ユーザーがタッチまたはクリックすることでアクションを実行できるようにするものです。通常、テキスト、アイコン、またはその両方で表示されます。ボタンは、UIで最も重要なパーツのひとつです。そのため、ユーザーが実際にクリックするようなボタンをデザインすることが重要です。 

5. トグル

トグルは、ユーザーが2つの状態の間で表示/値/設定を変更することを可能にします。オンとオフの切り替えや、リストビューとグリッドビューの切り替えに便利です。

6. テキスト/パスワードフィールド

テキストフィールドとパスワードフィールドは、それぞれユーザーがテキストとパスワードを入力するためのものです。テキストフィールドでは、1行入力と複数行入力の両方が可能です。複数行の入力フィールドは「テキストエリア」とも呼ばれます。パスワードフィールドでは、通常、パスワードは1行で入力できます。

7. 日付ピッカー

日付ピッカーは、ユーザーが日付や時刻を選択するためのものです。プラットフォームからネイティブの日付ピッカーを使用することで、一貫した日付の値がシステムに送信されます。

8. ラジオボタン

ラジオボタンは、あらかじめ定義されたオプションのセットから1つだけを選択することができます。ラジオボタンの一般的な使用例としては、サインアップフォームで性別のオプションを選択することが挙げられます。

9. 承認ダイアログ

承認ダイアログは、特定のアクションに対するユーザーの同意を収集する役割を果たします。例えば、削除アクションに対するユーザーの同意を収集するなどです。

4つの共通の出力エレメント

1. アラート

アラートは、ユーザーの注意を引くために短い重要なメッセージを表示します。これらの状態や出力についてユーザーに通知します。

2. トースト

あるイベント（ユーザーの入力、サーバーの応答、計算など）をきっかけに、画面上に小さなテキストボックスを表示するUI機能を指します。モバイルでは下部に、デスクトップでは左下または右側に表示されるのが理想的です。

「アラート」と「トースト」の違いは、前者は自分では解除せず、後者は一定時間が経過すると解除される点です。

3. バッジ

この機能は、下記写真のように右上に小さなバッジを生成します。一般的に、これは小さなカウンターやインジケータを表します。これは、カートアイコンの上のアイテム数や、ユーザーアバターの上のオンラインインジケータのようなものになります。

4. チャート

チャートは、さまざまなデータの種類やデータの比較を表現するため、複雑なデータセットを表現するための一般的な方法です。

UIで使用するチャートの種類は、伝えたいデータとそのデータについて何を伝えたいかという2つのポイントによって判断します。

 

共通ヘルプエレメント

ナビゲーション 

• ナビゲーションメニュー

これは、ユーザーが選択できるいくつかの値を持つUIエレメントです。そこからウェブサイトやアプリの別のエリアに移動します。

• リンクリスト

リンクリストはその名の通り、リンクで構成されています。カテゴリーリストを持つサイドバーがその良い例です。リンクには、内部リンクと外部リンクがあります。

• パンくずリスト

パンくずは、ユーザーがシステム内で自分の現在地を確認するためのものです。また、クリックすることでページが進む軌跡を表示することができます。

• 検索フィールド

検索フィールドは、通常以下2つのUIエレメントで作られます。

それは入力フィールドとボタンであり、キーボードを押し検索をかけることで、最も関連する結果を表示します。

• ページネーション（ページ付け）

ページネーションは、複数のページを分割することで、ユーザーをナビゲートします。

情報

• ツールチップ

ツールチップは、ユーザーにヒントを示すものです。（名前や目的を指示するエレメントにホバーした時に表示されます。）

• アイコン

これは、ユーザーがシステムを操作する際に、情報を提示し、規則を示すために使用される簡略化されたシンボルです。

• プログレスバー

プログレスバーは、処理の進行状況を示すものです。一般的に、クリックはできません。

• 通知

ユーザーがチェックすべき新しい何かを知らせる更新インジケーターです。一般的には、タスクの完了、新しいチェック項目などを示します。

• メーセージボックス

ユーザーに情報を提供する小さなウィンドウで、通常、ユーザーが作業を続けることを妨げることはありません。メッセージボックスは、警告や提案を表示するなどのタスクを実行します。

• モーダルウィンドウ

オーバーレイの上にコンテンツを表示するために使用します。オーバーレイがクリックされるか、閉じるアクションがなされるまで、ページとのあらゆるインタラクションをブロックします。

グループ/コンテナ

• ウィジェット

チャットウィンドウやダッシュボードのコンポーネント、他のサービスのエンベッドのようなインタラクションのエレメントです。

• コンテナ

コンテナは、異なる構成エレメントをまとめて保持するものです。これには、テキスト、画像、リッチメディアなどが含まれます。モダンUIデザインにおけるカードは、コンテナの最良の例の一つです。

• サイドバー

サイドバーには、他のエレメントやコンポーネントのグループも含まれています。しかしそれは、折りたたみ状態と可視状態を切り替えることができます。

• 検索バー

検索バーには、検索フィールドと検索オプションがあります。通常、検索バーには、検索フィールドとフィルタリングオプションがあります。Twitterの詳細検索はその好例です。

まとめ

今回は、UIエレメントを理解することの重要性、ユーザーがUIエレメントとどのように接するか、デザイナーとして把握すべき専門用語について説明しました。

一般的なUIエレメントが何であり、それらがどのように機能するかを理解したところで、新しい知識を実践に移す時です。UXPinは、UIエレメントの設計と整理に必要なすべての機能を提供し、強力な機能で設計とプロトタイプのプロセスを簡素化します！UXPinを使用することで、UIエレメントの設計と整理が容易になります。

気になった方は、UXPin14日間無料体験をしてみて下さい！
（登録にクレジットカード番号は必要ありません。）