アコーディオン・カルーセル・タブ・モーダルウィンドウ（accordion / carousel / tab / modal window）
画面に収まらない情報を、開閉・切替・重ねで見せる部品。どれも「一度に見せる量を減らす」ための仕掛け。
もう少し詳しい説明
前提：ここでいう「画面」とは
ここで扱うのは、Webページやアプリの画面です。パソコンのディスプレイに映っているものも、スマートフォンに映っているものも、どちらも含みます。
画面には、一度に映せる広さに限りがあります。 パソコンなら縦に800〜1,000点ぶん、スマートフォンなら700点ぶんほどで、それより下は下へ送らないと見えません。
伝えたいことはそれより多い、というのがいつもの状態です。たとえば、よくある質問が30個ある。商品の説明が5種類ある。設定の項目が40個ある。これを全部そのまま並べると、どこに何があるのか分からない長い画面になります。
そこで、いま見せるものを減らして、残りはしまっておくという作りにします。そのためのしまい方に、決まった名前が付いています。 このページで扱う4つが、その代表です。
4つとも、目的は同じ
4つとも目的は同じです。一度に見せる量を減らすこと。違うのは、減らし方です。
| 部品 | 減らし方 |
|---|---|
| アコーディオン | たたんでおき、開いたものだけ見せる |
| タブ | 同じ場所に重ね、1枚だけ前に出す |
| カルーセル | 横に並べ、窓のぶんだけ見せて送る |
| モーダルウィンドウ | 前にかぶせ、後ろを止める |
アコーディオン
見出しだけを並べておき、押すと下に中身が開く部品です。楽器のアコーディオンが伸び縮みする様子から来ています。
よくある使い方は、よくある質問です。質問だけが並び、押した質問の答えだけが開きます。
| 長所 | 短所 |
|---|---|
| 全体の見通しが立つ | 中の言葉が検索やページ内検索に引っかからないことがある |
| 必要なところだけ開ける | 開く操作が1回増える |
複数を同時に開けるか、1つだけかは、作り方で決めます。説明を見比べたいなら複数、長い本文なら1つだけ、という選び方になります。
タブ
同じ場所に複数の面を重ね、見出しで切り替える部品です。書類のインデックスと同じ形です。
アコーディオンとの違いは、並ぶ向きと同時に見られるかです。
| アコーディオン | タブ | |
|---|---|---|
| 見出しの並び | 縦 | 横 |
| 中身の出る場所 | 見出しの下 | 見出しの下の、同じ1か所 |
| 同時に開けるか | 開ける作りにできる | 1枚だけ |
どちらも「比べる」には向きません。 並べて見たいものには、はじめから表を使います。
タブは見出しが横に並ぶので、数が増えると入りきらなくなります。目安として5つか6つを超えるなら、アコーディオンか、別のページに分けるほうが読めます。
カルーセル
複数の中身を横に並べ、窓のぶんだけ見せて送る部品です。回転木馬（カルーセル）から来ています。スライダーとも呼ばれます。
自動で送るものと、利用者が矢印を押して送るものがあります。
使いどころが難しい部品です。
| 問題 | なぜ起きるか |
|---|---|
| 2枚目以降が見られない | 多くの人は1枚目しか見ずに下へ進む |
| 読み終わる前に送られる | 自動送りの速さは、読む速さと合わない |
| 押そうとした瞬間に変わる | 送りと操作がぶつかる |
大事な情報をカルーセルの2枚目以降に置かない、というのが実務上の目安になります。
モーダルウィンドウ
前面に出て、閉じるまで後ろの画面を操作できなくする窓です。
「モーダル」はある状態（モード）に入っているという意味です。閉じるまでその状態から出られません。
対になる言い方がモードレスです。
| モーダル | モードレス | |
|---|---|---|
| 後ろの画面 | 操作できない | 操作できる |
| 使いどころ | 必ず答えてほしいとき | 作業の横に出しておきたいとき |
| 例 | 「本当に削除しますか」 | 文字の装飾パネル |
モーダルにする理由は、止めたいからです。削除のように取り返しのつかない操作では、先へ進む前に必ず応答させます。
逆に、止める必要がないものをモーダルにすると邪魔になります。読んでいる途中で広告がかぶさってきて、閉じるまで先に進めない、というのがその例です。
共通する注意：隠したものは気づかれない
4つとも、いま見えていない中身があるという形です。そこから同じ問題が出ます。
- 閉じている中身は、あると気づかれない
- 中の言葉が、ページ内検索で見つからないことがある
- 読み上げの順番が、見た目の順番とずれることがある
必ず読んでほしいことは、隠さずに置く。 これが共通の目安です。アクセシビリティの観点でも、隠す部品は確かめる点が増えます。
試験ではこう出る
ITパスポートと科目A（旧・午前）では、部品の名前と動きの組合せがそのまま問われます。「閉じるまで元の画面を操作できない」＝モーダル、「見出しを押すと開く」＝アコーディオン、という対応です。
モーダルとモードレスの区別も出ます。後ろを操作できるかどうかが分かれ目です。
応用情報では、画面設計の良し悪しを問う形で出ます。「必ず確認させたい操作に、後ろを操作できる窓を使っている」「重要な案内をカルーセルの3枚目に置いている」といった、使いどころの誤りを見つけさせます。
関連する用語
- ユーザビリティ
- 使いやすさ。部品の選び方はこの良し悪しに直結する
- アクセシビリティ
- 誰でも使えるか。隠す部品はここで問題になりやすい
- UX（ユーザエクスペリエンス）
- 使ったときの体験全体。部品はその一部でしかない
ミニクイズ
Webページで使われるUI部品のうち、モーダルウィンドウの説明として適切なものはどれか。
正解は 4番：前面に出て、閉じるまで元の画面を操作できなくする窓
モーダルウィンドウは、前面に出ているあいだ、後ろの画面への操作を受け付けなくする窓です。「モーダル」は「ある状態に入っている」という意味で、利用者に必ず応答させたいとき、たとえば削除の確認に使います。見出しをクリックして中身が開くのはアコーディオン、画像を入れ替えて見せるのはカルーセル、同じ場所に複数の面を重ねて見出しで切り替えるのはタブです。後ろを操作できるものはモードレスと呼び、区別されます。
この分野をまとめて解く → システム開発とユーザーインタフェースのミニテスト（全40問）
最終更新：2026-10-20