ちゃんと名前で呼べますか？UIコンポーネントの名称クイズ100問【初級編】
こんにちは！Goodpatch UIデザイナーのharuです。突然ですが、皆さんはUIデザインの超基本となる「コンポーネント」についてどれぐらい知っていますか？
ユーザーインターフェースを構成するパーツのことを「コンポーネント」といいます。分かりやすい例としては、アクションや遷移のトリガーとなるボタンなどがあります。UIデザイナーは日々、ありとあらゆるUIコンポーネントを「用法用量（原則的な使い方）」に沿って使いこなしながら、デザインに取り組んでいます。
そこでこの記事では、UIデザインを学んだり興味を持っているみなさんに向けて、バラエティに富んだUIコンポーネントをクイズ形式で紹介します。用意した数はなんと100種類（！）。初級・中級・上級に分けて全3回でお届けしていきます。
まずは初級編。ソフトウェアデザインに関わる人たちの共通言語ともいえる、最も基本的なコンポーネントを集めました。
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ごとに呼称が異なるコンポーネントなども出てきます。ぜひ挑戦してみてください！
