デザイナーが押さえておくべき UI 要素

UI（ユーザーインターフェース）の要素は、Web デザイン、モバイル、デスクトップ、AR （拡張現実）または VR（仮想現実）のアプリを問わず、製品デザインに最も不可欠な部分であり、すべての製品の核となる構成要素です。

UI 要素やユーザーがどのように UI 要素と相互作用するかを深く理解することは、UI デザイナーや Web デベロッパーとして非常に重要であり、それによって、より良いアプリケーションや Web サイトの構造を作成できるようになります。

また、デザイナーは通常、Web ページやモバイルアプリを作るときに UI 要素を新たに描くことはなく、UI 要素が準備されているレポジトリから始め、コードでバックアップされている場合は、インタラクティブな UI コンポーネントを作成します。

UXPin Merge を使うと、そのコンポーネントを UXPin のデザインエディタに取り込むことができ、数時間ではなく数分で完全に機能する UI を構築できるため、製品チーム全体のワークフローを最適化できます。UXPin Merge の詳細はこちら。

要素とは

簡単に言うと、『UI 要素』はアプリや Web サイトの構成要素です。ユーザーが製品を使う際に相互作用するものであり、ボタンをクリックしてサインアップしたり、ナビゲーション・コンポーネントを使ってページを切り替えたりしてくれます。

また、UI 要素は、優れた UX（ユーザーエクスペリエンス）とデザインされた機能性を実現するものです。

例えば UX デザインは、ユーザーが慣れ親しんでいるデザインパターンの上に成り立っており、デザインパターンを壊してしまうと、ユーザーは訳がわからなくなったり、少なくとも混乱したりするかもしれません。そこでデザイナーは、よく知られた UI 要素を使ってそれを防ぎます。

UI 要素とは何かを学ぶだけでは十分ではなく、使われるコンテクストも知る必要があるのです。

UI 要素３種

理想的には、UI 要素を以下のように大きく３つに分類することができます。

• 入力要素：ユーザーは、入力要素とのインタラクションによって情報入力や、次のステップに進んだりする。
• 出力要素：この要素によって、以前のユーザーアクションの結果が示される。
• ヘルパー要素：さらに「ナビゲーション」、「インフォメーション」、「コンテナ」に分けられ、それによってデジタル製品内を移動したり、情報を得たり、ユーザーの注意をある要素に向けさせたりすることができる。

入力要素

入力要素は、ユーザーによるさまざまな入力を処理する役割を担っており、時には、入力検証プロセスの一部となることもあります。

最もよく使われる入力要素には、以下のようなものがあります：

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

出力要素

出力要素は、ユーザーのさまざまな入力に対する結果を表示する役割を担っており、アラート、警告、成功、エラーメッセージをユーザーに表示します。また、出力要素はもともとニュートラルではなく、入力と様々な操作に依存しています。

ヘルパー要素

その他の要素はすべてこのカテゴリーに入ります。

最も広く使われているヘルパー要素は以下になります：

• お知らせ
• パンくずリスト
• アイコン
• スライダー
• プログレスバー
• ツールチップ

また、ヘルパー要素を以下のように３つのカテゴリーに分類することもできます。

ナビゲーション

ナビゲーションのコンポーネントで、サイト、デスクトップアプリ、モバイルアプリ、その他のデジタル製品内の移動がシンプルになります。また、ナビゲーションを補助する UI 要素には、ナビゲーションメニュー、リンクのリスト、パンくずなどがあります。

インフォメーション

インフォメーションは、例えば、ツールチップ、アイコン、プログレスバーなど、情報の表現を担当します。

グループまたはコンテナ

これは、さまざまなコンポーネントをまとめる役割を担い、ウィジェット、コンテナ、サイドバーなどがこのカテゴリーに含まれます。UXPin ブログのニュースレター購読ウィジェットもコンテナの良い例です。

一般的な 入力 UI 要素９選

ここでは、全デザイナーが知っておくべき、最も一般的な入力要素を９つご紹介します。このリストには、ボタン、チェックボックス、テキストフィールドが含まれ、UI コンポーネントの下に記載されている最もよく使われているデザインシステムに必ずあります。

１．チェックボックス

チェックボックスで、ユーザーはオプションセットから１つ以上のオプションを選択できるようになります。チェックボックスは縦に表示するのがベストプラクティスですが、利用可能なスペースやその他の要素を考慮すれば、複数列でも大丈夫です。

２．ドロップダウン

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

３．コンボボックス

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

４．ボタン

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

５．トグル

トグルで、ユーザーは２つの状態の間で ビュー / 値 / 設定 を変更でき、オンとオフの切り替えや、リストビューとグリッドビューの切り替えに便利です。

６．テキストフィールド と パスワードフィールド

「テキストフィールド」と「パスワードフィールド」で、それぞれユーザーはテキスト（文字）とパスワードを入力できるようになります。テキストフィールドでは、単一行入力と複数行入力の両方が可能であり、複数行入力フィールドは「textarea」とも呼ばれます。また、パスワードフィールドでは通常、１行でパスワードを入力することができます。

７．日付ピッカー

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

８．ラジオボタン

ラジオボタンで、ユーザーは相互に排他的なオプションの事前確定されたセットのうちの１つだけを選択できるようになります。ラジオボタンの一般的なユースケースとして、サインアップフォームでの性別のオプションの選択が挙げられます。

９．確認ダイアログ

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

一般的な出力要素４つ

１．アラート

アラートは、ユーザーの注意を引く簡潔な重要メッセージを表示し、以下のようなステータスや出力をユーザーに通知します。

２．トースト

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

「アラート」と 「トースト」の違いは、前者は勝手に解除されず、後者は一定時間後に解除される点です。

３．バッジ

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

４．チャート

チャートは、さまざまなデータの種類とデータの比較を描くことから、複雑なデータセットを表現する一般的な方法です。

また、UI で使用されるチャートの種類は、主に「伝えたいデータ」と、「そのデータについて伝えたいこと」の２つによって決まります。

一般的なヘルパーUI 要素

ナビゲーション

以下の要素はナビゲーションを支援します：

• ナビゲーションメニュー
• リンク一覧
• パンくずリスト
• 検索フィールド
• ページネーション

ナビゲーションメニュー

これは、ユーザーが選択できる値がいくつかあるナビゲーションの UI 要素であり、そこから Web サイト/アプリの別のエリアに移動します。

リンク一覧

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

パンくずリスト

パンくずリストで、ユーザーはシステム内の現在位置を確認できるようになり、それによって、ナビゲートするための進行中のページをクリックできる軌跡を得られます。

検索フィールド

検索バーは通常、「入力フィールド」と「ボタン」の２つの UI 要素で構成され、これによって、ユーザーはキーワードを入力し、最も関連性の高い結果を期待してシステムに送信することができます。

ページネーション

この機能で、ページ間のコンテンツは分割され、ユーザーはページ間を移動できるようになります。

インフォメーション

UI 要素のこのカテゴリーは、情報を転送します。

それは次のようなものから構成されます：

• ツールチップ
• アイコン
• プログレス（進捗）バー
• 通知
• メッセージボックス
• モーダルウィンドウ

ツールチップ

ツールチップで、ユーザーが要素の上にカーソルを置いたときに、アイテムの名前や目的を示すヒントが表示されます。

アイコン

これは簡略化されたシンボルで、ユーザーのシステムのナビゲート、情報の提示、法令の表示ために使用されます。

プログレスバー

プログレス（進捗）バーはプロセスの進行状況を示すものであり、通常このバーにはクリックできません。

通知

ユーザーがチェックすべき新しい何かを知らせる更新インジケータであり、通常は「タスクの完了」や「新しいチェック項目」などを示します。

メッセージボックス

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

モーダルウィンドウ

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

グループおよびコンテナ

特定の要素とそれ以外をどのように分けるか？そのためにあるのがグループとコンテナです。

ウィジェット

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

コンテナ

コンテナは、さまざまなコンポーネントを一緒に保持します。これには、テキスト、画像、リッチメディアなどが含まれ、コンテナの最良の例の一つとして、モダンな UI デザインにおけるカードが挙げられます。

サイドバー

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

検索バー

検索バーには、「検索フィールド」と「検索オプション」があり、通常、検索バーには検索フィールドとフィルタリングオプションがあります。検索バーのいい例としては、X（旧Twitter）の高度な検索が挙げられます。

UXPinでインタラクティブな UI 要素をデザインしよう

一般的な UI 要素がどのようなもので、どのように機能するのかがわかったところで、その知識を実践してみましょう。UXPin には、UI 要素のデザインと整理に必要な機能が全て揃っているので、デザインプロセスがシンプルになります。

デベロッパーのコンポーネントライブラリから入手した既製の UI 要素がある場合はどうなるでしょう？UXPin Merge のテクノロジーを使って、それを UXPin エディタに取り込み、製品チームと共有する UI コンポーネントを使って、完全にインタラクティブで一貫性のあるプロトタイプをデザインしましょう。UXPin Merge の詳細はこちら。