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

UIデザインを学んだり興味を持っているみなさんに向けて、UIコンポーネントに関する知識をクイズ形式で紹介するこのシリーズ。100種類のUIコンポーネントについての解説を、初級・中級・上級に分けて全3回でお届けしています。

中級編の今回は、基本の用語をマスターできた人たちに向けて、ソフトウェアデザインのプロと対等に話せるために知っておきたい重要コンポーネントを集めました。

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

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

Lv.3：正解できたらUI好き

【Q35】

アイコンをタップする、または画面をスワイプすると横から表示されるメニュー。

答え

ドロワー（ドロワーメニュー／ハンバーガーメニュー／スライドメニュー）

【Q36】

親ビューとの相互作用を防ぎ、閉じるために明示的なアクションを必要とするコンポーネント。焦点を絞ったモードでコンテンツを表示する。

答え

モーダル（ハーフモーダル／セミモーダル／半モーダル／モーダルビュー／モーダルウィンドウ／BottomSheet）

【Q37】

親ビューに対して機能を切り出すために使われるコンポーネント。【Q36】とは異なり、ユーザーはこのコンポーネント上の機能を使用しつつ、親ビューの現在のタスクにも直接影響を与えることができる。

答え

シート（非モーダルシート（仮称））

【Q38】

写真などの複数の項目を、画面外を含めて横方向に並べる表現方法。タップ／クリック、スワイプ、ドラッグなどで、中央部分の画像を次々に入れ替えていくことができる。

答え

カルーセル

【Q39】

画面内で2番目以降に重要なアクションをするためのボタン。背景色とボタン背景とのコントラストを抑えるなどで、プライマリボタンとの差を表現する。

答え

セカンダリボタン

【Q40】

現在いるページが全体のフローのうちどのステップにあたるのか、手続きが完了するまであとどのくらいのステップが必要なのかを示すコンポーネント。

答え

ステップバー（ステップインジケーター／ウィザード）

【Q41】

プロフィール写真、アイコン、イニシャルの文字列などを使って、ユーザーをグラフィックで表現するコンポーネント。

答え

アバター（ユーザーアイコン／ユーザーシンボル）

【Q42】

未読メッセージの件数など、ユーザーに確認してほしい情報の数を示し、注意を喚起するためのコンポーネント。

答え

バッジ

【Q43】

外部から刻々と配信されてくるデータの流れや、それらを時系列に一覧できるよう整理した画面。

答え

フィード

【Q44】

一つの話題に属する複数の発言や投稿を、一つの流れとしてグループ化した画面。

答え

スレッド

Lv.4：UIデザイナーなら知っておきたい

【Q45】

ユーザーが何かアクションをした際、実行に時間がかかったり、サービスに待ち状態が発生した場合、その進捗を伝えるためのコンポーネント。

答え

インジケーター（プログレスバー／プログレスインジケーター）

【Q46】

主にシステムが読み込み中や表示中であることを示すコンポーネント。用途は【Q45】と同様だが、かかる時間が短い場合や想定できない場合にこのコンポーネントを使うことが多い。

答え

スピナー（ローダー／アクティビティインジケーター）

【Q47】

ページ位置を示すコンポーネント。点の数はページの枚数によって増減し、現在のページ数が強調されて表示されることが多い。

答え

ページインジケーター（ページコントロール／ドットナビゲーション／バレットナビゲーション）

【Q48】

繰り返す要素が1ページに収まり切らない場合に、続きのページを表示するためのコンポーネント。Webサイトにおいて使われることが多い。

答え

ページネーション

【Q49】

操作や状態変更が完了したことを伝えるためのコンポーネント。主に画面下部に一定時間のみ表示される。モードを生じないため、ユーザーの行動を妨げない。

答え

トースト（Snackbar）

【Q 50】

用意された複数の候補から1つだけ選択するためのコンポーネント。主にスマートフォンやタブレットアプリで利用され、ホイール状に表示される。

答え

ピッカー

【Q51】

色を直感的に選択できる機能。選択するとその色が何かしらのアクションに反映される。

答え

カラーピッカー

【Q52】

日付を入力する場面で、ポップアップする小さなカレンダーからマウスやタップで簡単に入力できるようにするコンポーネント。

答え

日付ピッカー（Date Picker）

【Q53】

音楽や動画などの再生箇所を表示するためのコンポーネント。多くは時間軸を左から右へと進む棒状のUIで、ドラッグやタップ／クリックで任意の見たい位置を指定することができる。

答え

シークバー

【Q54】

スライダーコンポーネントのうち、単一の値ではなく範囲を指定できるもの。

答え

レンジスライダー（範囲スライダー）

【Q55】

背後のコンテンツの明るさをやわらげるために置かれる背景色。画像上のテキストを読みやすくしたり、モーダルなど前面のコンテンツを目立たせたい時に使う。

答え

スクリム（オーバーレイ）

Lv.5：UIデザイナーもど忘れしているかも？

【Q56】

ページ内で部分的な表示切替を行うためのコンポーネント。主にiOSで、タブバーの次の画面を切り替えるナビゲーションとしてよく利用される。

答え

セグメンテッドコントロール

【Q57】

ユーザーが特定の要素にマウスカーソルを合わせたり、クリックしたときに小さな吹き出しを使って補足情報を表示するためのコンポーネント。

答え

ツールチップ

【Q58】

【Q57】のように吹き出しの形状をしているが、元の画面に対しての操作を行ったり、状態変化や補足機能を表示するコンポーネント。

答え

ポップオーバー

【Q59】

数字のカウントを1つずつ増やしたり減らしたりするのに利用するコンポーネント。スライダーと同様に数値をコントロールするものだが、1つずつ確実に増減できるのが特徴。

答え

ステッパー（スピナーボタン／カウンター）

【Q60】

評価を入力したり表示するためのコンポーネント。星のアイコンなどで表現されることが多い。

答え

レイティングバー

【Q61】

ある情報に関連するキーワードを示すコンポーネント。複数のコンテンツを1つのトピックに関連付けることで、非階層的な方法でコンテンツを分類できる。

答え

タグ

【Q62】

選択されている操作対象に応じて、提示される項目が変化するメニューのこと。右クリックで表示されるメニューが代表的な例。

答え

コンテキストメニュー

【Q63】

ファイルをドラッグアンドドロップで入力できるエリア。

答え

ドロップゾーン

【Q64】

地図上で位置をマークするためのコンポーネント。タップ/クリックで場所の詳細情報やツールバーなどを表示することが多い。

答え

マーカー（マップマーカー）

【Q65】

アプリを起動してユーザーが最初に目にする画面。アプリの第一印象を表現するためのテキストや会社のロゴ、サービスのロゴマークなどが置かれることが多い。

答え

スプラッシュ

【Q66】

アプリのインストール直後によく見られる、アプリのメイン機能を教えてくれるいわば「取扱説明書」のような画面。複数枚のスライド形式になることが多い。

答え

ウォークスルー（オンボーディング画面）

 

さいごに

お疲れさまでした！前回より少し難易度が上がったと思いますが、何問答えられましたか？上級編では、OSごとに呼称が異なるコンポーネントについてもご紹介します。こちらからぜひチャレンジしてみてください！