ちゃんと名前で呼べますか？UIコンポーネントの名称クイズ100問【初級編】

こんにちは！Goodpatch UIデザイナーのharuです。突然ですが、皆さんはUIデザインの超基本となる「コンポーネント」についてどれぐらい知っていますか？

ユーザーインターフェースを構成するパーツのことを「コンポーネント」といいます。分かりやすい例としては、アクションや遷移のトリガーとなるボタンなどがあります。UIデザイナーは日々、ありとあらゆるUIコンポーネントを「用法用量（原則的な使い方）」に沿って使いこなしながら、デザインに取り組んでいます。

そこでこの記事では、UIデザインを学んだり興味を持っているみなさんに向けて、バラエティに富んだUIコンポーネントをクイズ形式で紹介します。用意した数はなんと100種類（！）。初級・中級・上級に分けて全3回でお届けしていきます。

まずは初級編。ソフトウェアデザインに関わる人たちの共通言語ともいえる、最も基本的なコンポーネントを集めました。

関連記事：UIデザインとは？ 大切な5つのポイントや取り組み事例を紹介

UIコンポーネントの名称クイズ

以下の画像と説明を見て、コンポーネントの名称を当ててみてください。答えの部分をクリック（タップ）すると正解例として、UIデザインの場で広く使われている呼び方が表示されます。初級編は全部で34問。それでは、スタート！

Lv.0：基本中のキホン

【Q1】

画面の最上部に表示するエリアで、主要コンテンツへのナビゲーションを配置できる場所。コンテンツへの動線のほかに、登録／ログイン、検索など基本的なアクションを配置することが多い。

答え

ヘッダー（ヘッダーナビゲーション／グローバルナビゲーション）

【Q2】

【Q1】とは逆に画面の最下部に表示するエリアで、Webサイトで用いられるコンポーネント。利用規約やお問い合わせ、運営会社の情報などを設置する使い方が一般的。

答え

フッター

【Q3】

アクションを起こす場面や、テキストフィールドでの入力を完了させる場面などに用いるコンポーネント。

答え

ボタン

【Q4】

ユーザーが文字情報を入力するためのコンポーネント。1行のパターンと、記事や文章を書くような複数行のパターンとが存在する。

答え

テキストフィールド（テキストボックス／テキストエリア）

【Q5】

検索のためのコンポーネント。ユーザーが直接検索ワードを入力し、目的のコンテンツにたどり着くために使われる。

答え

サーチバー（検索バー／検索ボックス／サーチフィールド）

【Q6】

【Q5】の一種で、アクセス先を指定するURLのほか、検索ワードも直接入力できる。

答え

アドレスバー

【Q7】

ユーザーが必要なページにスムーズにアクセスできるようにするためのコンポーネント。

答え

メニュー（サイドメニュー／サイドバー）

【Q8】

ユーザーが情報を入力/選択するための画面。複数の入力/選択欄が組み合わさっており、Webページ上でコンバージョンを完了させる接点となることが多い。

答え

フォーム

Lv.1：まずはここから

【Q9】

画面下部に固定で配置される、別の画面へ横断するためのナビゲーション。ナビゲーション以外にも重要なアクションを配置することがある。下部にあるため、ユーザーは素早く操作できる。

答え

タブバー（NavigationBar）

【Q10】

カテゴリの画面切り替えなどを行う。タブバーと違って画面をスワイプすることで画面遷移ができたり、項目数が多くなると画面外に項目を配置しスクロールするようにもできる。

答え

タブ（メニューバー）

【Q11】

主にiOSアプリで利用されるコンポーネント。よくある例として、中央にタイトル、左にバックボタンやクローズボタン、右にアイコンを配置して別の画面への動線やアクションのトリガーを作ることが多い。

答え

ナビゲーションバー（AppBar）

【Q12】

画面に表示されているコンテンツに対して、アクションの候補を表示するコンポーネント。画面下部におく場合タブバーと見た目は似ているが、役割が違う。

答え

ツールバー

【Q13】

アイコンのみで表現されたボタン。テキストでの説明がなくなるため、ユーザーにとって分かりやすい一般的なアイコンを選ぶ。

答え

アイコンボタン

【Q14】

枠や背景などをつけない文字だけのボタン。コンパクトにボタンを表現できる。

答え

テキストボタン

【Q15】

テキストフィールドに入力例などのテキストを薄く表示し、入力方法をユーザーに提示するもの。

答え

プレースホルダー（ラベル／入力プロンプト／ガイドプロンプト／ラベルプロンプト）

【Q16】

スマートフォンの電池残量や時刻、通信状況などを表す、画面最上部に表示されるコンポーネント。

答え

ステータスバー

【Q17】

下の画面の上に被せて一時的に確認や操作をさせるためのコンポーネント。表示されている間は元の画面の操作ができなくなるため、ユーザーに必ず行ってほしい操作や確認してほしい内容がある場合に使う。

答え

ダイアログ（ポップアップウィンドウ／モーダルウィンドウ／モーダルビュー）

【Q18】

【Q17】の中でも注意・警告を表すもの。特に、破壊的なアクションや取り消せない操作をさせる際に使う。

答え

アラート（アラートダイアログ／ポップアップウィンドウ／モーダルウィンドウ／モーダルビュー）

【Q19】

一覧画面やホーム画面などにおいて、同じ要素を繰り返し表示するためのコンポーネント。要素の並べ方は、縦方向、格子状、カルーセルといったさまざまなタイプがある。

答え

リスト

【Q20】

Excelのように行と列で構成されていて、複数の要素からなる情報を表示するためのコンポーネント。【Q19】がシンプルな情報を扱うのに対し、こちらは複雑な情報を扱いやすい。

答え

テーブル

【Q21】

データを何らかのグラフ形式で視覚化するコンポーネント。ダッシュボードなどで、テーブルと組み合わせて使われることが多い。

答え

チャート（グラフ）

【Q22】

関連するコンテンツを1つにまとめて並べるコンポーネント。リストの情報を置き換えることもでき、1項目の切れ目が分かりやすくなる。

答え

カード

Lv.2：パッと名前が浮かばないものも？

【Q23】

タップするとチェックのオン/オフが切り替わるコンポーネント。iOSでは標準コンポーネントとして用意されていないため、他の方法を採る。

答え

チェックボックス（チェックリスト）

【Q24】

特定の項目に対して、有効・無効を切り替えるコンポーネント。主にスマートフォンアプリやタブレットアプリで使われる。

答え

スイッチ（トグル／トグルボタン／スイッチボタン）

【Q25】

用意された複数の候補から1つだけ選択するためのコンポーネント。例えば決済方法など、どれか1つに必ず当てはまる場面で用いる。

答え

ラジオボタン

【Q26】

選択肢の中から1つを選択してほしいときに使うコンポーネント。用途は【Q25】と似ているが、たくさんの選択肢を少しのスペースで配置できる。一方、項目が多いと一覧性が低くなるという弱点もある。

答え

ドロップダウン（ドロップダウンメニュー／ドロップダウンリスト／プルダウン／プルダウンメニュー／セレクトボックス）

【Q27】

項目をクリックしたりタップしたりすることで、隠れている詳細画面を表示できるコンポーネント。長くなりがちなコンテンツをすっきり見せたいときに役立つ。

答え

アコーディオン（アコーディオンメニュー／ドリルダウン／ドリルダウンメニュー）

【Q28】

複数のコンテンツを、指定した条件で絞り込むためのコンポーネント。ユーザーが圧倒的な数の選択肢に直面した際、選択をコントロールできるようになる。

答え

フィルター（絞り込み／絞り込み検索／条件検索）

【Q29】

複数のコンテンツを、指定した順序で並べるためのコンポーネント。

答え

ソート（並び替え）

【Q30】

Webサイトにおいて、ユーザーが今どこにいるかを視覚的にわかりやすくした誘導表示のコンポーネント。Webページのリンクが階層順にリストアップされる。

答え

パンくずリスト

【Q31】

目立たない線で表現される、コンテンツを視覚的にグループ化するためのコンポーネント。分離したい方向によって水平方向、垂直方向どちらにも使われる。

答え

ディバイダー

【Q32】

つまみとなる要素を左右または上下にスライドし、値を調整するためのコンポーネント。音量や数値入力などを直感的にコントロールすることができる。

答え

スライダー（スライダーコントロール）

【Q33】

テキストを入力する際に画面上に表示され、マウスや指などで押下できる疑似的なキーボード。

答え

オンスクリーンキーボード（キーボード／OSK）

【Q34】

アプリの中にWebページを表示できる技術のこと。またその画面。

答え

Web View（アプリ内ブラウザ）

 

中級編・上級編はこちらから

お疲れさまでした！何問答えられましたか？鋭い方は一部の問題に「おや……？」と思った方もいるかもしれません。そう、同じ機能をもつUIのパーツでも、OSごとに広く使われる呼び方が異なる場合があります。

中級編や上級編では、そんなOSごとに呼称が異なるコンポーネントなども出てきます。ぜひ挑戦してみてください！