ちゃんと名前で呼べますか？UIコンポーネントの名称クイズ100問【上級編】
UIデザインを学んだり興味を持っているみなさんに向けて、UIコンポーネントに関する知識をクイズ形式で紹介するこのシリーズ。100種類のUIコンポーネントについての解説を、初級・中級・上級に分けて全3回でお届けしています。
上級編となる今回は「名前や用法用量がパッと言えると、UIデザインのプロとして一目置かれそう」、そんなコンポーネントを集めました。また、OS独自で利用されるコンポーネントや機能をAndroid、iOS/watchOS、iPadOS/macOSの3つに分けてご紹介します！
関連記事：UIデザインとは？ 大切な5つのポイントや取り組み事例を紹介
UIコンポーネントの名称クイズ
以下の画像と説明を見て、コンポーネントの名称を当ててみてください。答えの部分をクリック（タップ）すると正解例として、UIデザインの場で広く使われている呼び方が表示されます。上級編は全部で34問。前回からの続きで、Q67からスタート！
Lv.6：即答できたらUIのプロ！
【Q67】
画面の上にオーバーレイやポップアップを表示し、各ボタンの機能や、コンテンツが何を意味しているかなどを説明するUIのこと。アプリの初回起動時に表示されることが多い。
答え
コーチマーク
【Q68】
画面に表示するデータが読み込まれるまでの間、そのコンテンツの枠組みだけを事前に表示させるUIのこと。ユーザーの体感として、通常のインジケーターよりもこのUIの方が待機時間を短く感じると言われている。
答え
スケルトンスクリーン
【Q69】
画像や動画をクリックした際、そのイメージを拡大表示するためのコンポーネント。
答え
ライトボックス
【Q70】
ドロップダウンリストとテキストボックスを組み合わせた選択式フォームの一種。テキストボックスに自由入力することも、リストの選択肢から選ぶこともできる。
答え
コンボボックス
【Q71】
通常サーチバーとセットで実装される、検索範囲を指定するためのコンポーネント。セグメンテッドコントロールと見た目は似ているが、画面全体を切り替えるといった機能は持たない。
答え
スコープバー
【Q72】
クリックまたはマウスオーバーで開くドロップダウンメニューの1種。通常のドロップダウンメニューと比べて広いスペースを確保し、項目をグループごとに表示したり、写真やアイコンを使ってユーザビリティの高いメニューにしたもの。
答え
メガメニュー（メガナビゲーションメニュー／メガドロップダウン）
【Q73】
テキストが右から左へとスクロールしていくUIのこと。視点の位置を移動させずにテキストを読むことができるようになる。
答え
マーキー
【Q74】
タップやクリックで波紋のようなアニメーションが広がる「リップルエフェクト」を利用したボタン。ユーザーが操作を完了できたという実感を持ちやすくなると言われている。リップルエフェクトは、Material Designでよく利用される効果。
答え
リップルボタン
【Q75】
特定のタスクやオブジェクトを配置する矩形領域のこと。通常、デスクトップアプリやWebサイトで1画面内に複数配置される。
答え
ペイン
【Q76】
アイコンを使ったメニュー表示のこと。視認性がよく、一目で直感的にどんな項目があるか認識しやすい。iPhoneのホーム画面やLaunchpadもこのUIを利用しているといえる。
答え
スプリングボード
Android編
【Q77】
Androidで基本操作を行うためのボタンが配置されたバーのこと。Android 8.0までは3つのボタンを配置したものが主流だったが、Android 9.0では2つのボタンに変更になった。iOSにおける「同名」のコンポーネントとは別のものを指すので注意。
答え
NavigationBar
【Q78】
Androidでよく利用されるボタンで、右下部に浮遊させ、サービスのメインアクションの引き金として用いることが多い。
答え
FloatingActionButton（FAB）
【Q79】
iOSでいうナビゲーションバーと同様の役割を担うAndroidコンポーネント。画面タイトルやドロワー、バックボタン、ページに対するアクションなどを配置できる。
答え
TopAppBar
【Q80】
【Q79】と同じ役割のナビゲーションを画面下部におくコンポーネント。デバイスが大きくなる傾向にある今、画面下部に主要なナビゲーションがある方が使いやすいため、このコンポーネントの利用事例が増えている。
答え
BottomAppBar
【Q81】
iOSでいうタブバーと同様の役割を担うAndroidコンポーネント。【Q80】とは併用できないため、注意が必要。
答え
BottomNavigation
【Q82】
アプリのメインナビゲーションメニューを表示するドロワー型のコンポーネント。ドロワーアイコンをタップしたり、画面の左端からスワイプをすると表示される。
答え
NavigationDrawer
【Q83】
アイコンを縦に並べることで3〜7つのナビゲーションを設置できるコンポーネント。【Q81】が画面下部に配置されるのに対し、このコンポーネントは画面横に配置されるため、大きな画面サイズでもスペースを有効活用できる。
答え
NavigationRail
【Q84】
iOSのアクションシートと似たような役割で、コンテンツに対するアクションの提示などに用いる。
答え
BottomSheet
【Q85】
トーストと同じような役割をもつAndroidコンポーネント。フィードバックに対して1つだけアクションをつけることもできる。
答え
Snackbar
【Q86】
情報の入力、選択、コンテンツのフィルタリング、アクションのトリガーなど様々な用途で使うことができる、タグに似た形のAndroidコンポーネント。このコンポーネントは複数のグループとして使うことが推奨されている。
答え
Chips（Chip）
iOS / watch OS編
【Q87】
ホーム画面に戻るための目印になるコンポーネント。iPhone X以降のFace ID搭載モデルで画面の下部に設置された。
答え
Home Indicator（Home Bar）
【Q88】
コンテンツに対するアクションの提示などに用いるコンポーネント。アラートとは異なり複数の選択肢を表示でき、確認・警告以外の目的でも利用できる。
答え
Action Sheet
【Q89】
他のアプリへのクイックアクセスやメッセージング、印刷など、共有アクティビティを表示するコンポーネント。デバイスと向きに応じてシートまたはポップオーバーとして表示される。
答え
Activity View（Share Sheet）
【Q90】
画面の右上隅から下に（iPhone SEとiPhone 8以前は画面の下端から上に）スワイプすると出てくる画面。頻繁に利用する便利なコントロールやAppに瞬時にアクセスできる。
答え
Control Center
【Q91】
Appから別のAppにすばやく切り替えることができる機能。
答え
App Switcher
【Q92】
ホーム画面やロック画面に表示させることで、お気に入りの情報にすぐにアクセスできるようにするコンポーネント。
答え
Widgets
【Q93】
デバイスのTrueDepthカメラシステムを生かして、ディスプレイ上部で通知を受けたり、画面上部を小さな操作パネルとして活用できる機能。iPhone 14以降の一部の機種でのみ使用できる。
答え
Dynamic Island
【Q94】
watch OSで、ウォッチフェイスに関連情報をタイムリーに表示する画面。天気やアクティビティ、インストール済みのAppの情報などを確認できる。
答え
Complications
【Q95】
Appの一部をコンパクトに表示し、完全版のAppをインストールしていなくてもAppのタスクをすばやく実行できる機能。例えば、スマート家電の初期設定でこの機能を利用すると、Appのインストールなしですばやくタスクを完了できる。
答え
App Clip
mac OS / iPad OS編
【Q96】
Macのホーム画面の端に配置される、帯状のアプリケーション一覧のこと。
答え
Dock
【Q97】
Macですべてのアプリケーションを表示したり開いたりするための場所。
答え
Launchpad
【Q98】
Mac上のアプリケーション、書類、メール、およびその他の項目を素早く検索できる機能。
答え
Spotlight
【Q99】
Macで開いているウインドウ、App、デスクトップの操作スペースなどすべてを鳥瞰的に表示して、簡単に切り替えることができる機能。
答え
Mission Control
【Q100】
2つのアプリケーションを画面上に表示したり、1つのアプリを2画面に表示して操作できる機能。iPadとMacのアプリケーションで使える。
答え
Split View
さいごに
これで100問クイズはおしまいです。チャレンジした皆さま、本当にお疲れ様でした！
このようにコンポーネント1つ1つに注目してみると、普段何気なく使っているアプリやWebのUIは、それぞれに役割をもつUIコンポーネントの組み合わせでできていることが分かってきます。
このクイズが、皆さんの学習や興味の深掘りのお役に立てれば幸いです。それではまた！