応用情報技術者試験過去問を解いてみた 19 UI構造
はじめに
今回も、応用情報技術者試験の過去問を解いていきます。
問題（令和6年度 春期 午前 問25）
Webページの構成要素のうち、図のような固定の表示領域内でマウス操作やタッチ操作を行うことによってスクロールし、複数の画像などが横方向に順次表示されるものを何というか。
ア：アコーディオン
イ：カルーセル
ウ：タブ
エ：モーダルウィンドウ
解答
正解：イ カルーセル
解説
この問題で問われているのは、横方向にコンテンツを切り替えながら表示するUIの名称です。
図のように、画像やバナーを順番に表示し、「◀」「▶」で移動したり、●アイコンでスライド位置を表示する仕組みは 「カルーセル（carousel）」 と呼ばれます。
カルーセルは、Webサイトのトップページや商品紹介ページなどでよく使われています。自動再生やループ表示などを組み合わせることで、視覚的な訴求力を高められるのが特徴です。
問題の用語解説
カルーセルの体系的位置づけ
カルーセルの構造的な位置づけを、上位から下位まで整理してみましょう。
🔺 上位概念
| レベル | 名称 | 解説 |
|---|---|---|
| ① | ユーザーインターフェース（UI） | 人とシステムをつなぐ全体的な枠組み |
| ② | UIコンポーネント | UIを構成する各種部品（ボタン・メニューなど） |
| ③ | ナビゲーション系UIコンポーネント | コンテンツの切り替えや遷移を担う要素 |
▶ 横並びの概念
カルーセルと同レベルで比較されるUI部品には以下のようなものがあります。
🔻 下位概念（構成要素）
| 要素 | 内容 |
|---|---|
| スライド | 表示される画像や内容 |
| ナビゲーションボタン | 「◀」「▶」などの移動用アイコン |
| インジケーター | ●などで現在の位置を示す |
| 自動再生機能 | 一定間隔で自動的に次へ進む |
| ループ機能 | 最後のスライドの次に最初が出る |
🧭 図解
まとめ
カルーセルはWebサイトでよく使われるUIコンポーネントの一つで、横方向のスライドによって視覚的に情報を伝えるのに効果的です。体系的に理解すると、他のUIとの比較もできて設計力が上がります。
