混同しやすいUIの名称について考える

スライダーとカルーセル
ポップアップとモーダルとダイアログ
アコーディオンとドロップダウン
おわりに

デザインをしている中で、
「これはカルーセルなのか？それともスライダー？そもそも違いあるの？」というように、UIの名称に迷う場面があります。

なんとなく理解しているつもりでも、いざ言葉にしようとすると曖昧になってしまったり、
人によって呼び方が違って少し混乱してしまうこともあるのではないでしょうか。

そこで今回は、混同しやすいUIの名称について、自分の整理もかねて違いをまとめてみたいと思います。
経験のある方には当たり前に感じる内容もあるかもしれませんが、これからデザインを始める方や、用語に迷いを感じたことがある方の参考になれば嬉しいです。

スライダーとカルーセル

スライダーとカルーセルは、見た目も動きも似ているため、実務でもほぼ同じ意味で使われることが多いUIです。
ただ、厳密に見ると少しだけ違いがあります。

スライダーは、1つのコンテンツを順番に切り替えて見せるUIで、画像が1枚ずつ切り替わるようなイメージです。
一定時間ごとに自動で切り替わるものや、左右の矢印で操作するものが一般的で、最後まで進むと止まる、
もしくは最初に戻ってループ再生されるパターンもあります。

一方でカルーセルは、複数の要素が横に並んだ状態でスライドしていくUIを指します。
カードが横並びのまま動いていき、端まで進むと途切れずに循環する（ループする）動きが特徴です。
この「ぐるぐる回る」ような挙動は、語源である回転木馬（メリーゴーランド）に由来しており、
名前の通り循環し続ける表現と相性が良いUIです。

つまり、スライダーは「1つずつ見せる」、カルーセルは「複数並んだものを動かす」という違いがあります。
加えて、カルーセルの方が“循環して見せる”ニュアンスが強い、と捉えるとイメージしやすいです。
とはいえ、現場ではスライダーとカルーセルがはっきり区別されず、どちらの呼び方も使われている印象があります。
カードが複数並んでいるかどうかや、ループするような動きかどうかを基準にすると、違いをイメージしやすそうです。

ポップアップとモーダルとダイアログ

ポップアップ、モーダル、ダイアログは、どれも画面の上に表示されるUIのため、同じような意味で使われがちです。
ただ、それぞれ役割やニュアンスには違いがあります。

まずモーダルは、表示されたときに他の操作を一時的に制限するUIです。
操作を完了するまで、背面の画面を触れないのが特徴です。

次にダイアログは、ユーザーに確認や入力を求めるUIです。
モーダルと見た目は似ていますが、ダイアログは「ユーザーとのやり取り（確認や入力）」に重点があります。

そしてポップアップは、画面上に“突然ポンと表示される”表示形式のことを指します。
通知や案内などに使われることが多く、操作を制限するものもあれば、しないものもあります。
そのためポップアップは、特定のUIというよりも「表示のされ方」を表す言葉です。

つまり整理すると、
モーダルは「操作を制限する表示方法」、
ダイアログは「確認や入力を求める内容」、
ポップアップは「一時的に表示される方法の総称」
という違いになります。

アコーディオンとドロップダウン

アコーディオンとドロップダウンは、どちらも「クリックすると何かが展開されるUI」という点で似ているため、混同されがちです。
ただ、この2つは用途が大きく異なります。

アコーディオンは、コンテンツの表示・非表示を切り替えるためのUIです。
例えばFAQのように、質問をクリックすると回答が下に展開される場面で使われます。
すでにページ内にある情報を整理して見せる仕組みで、開閉に応じて他の要素が押し下げられるのが特徴です。

一方でドロップダウンは、複数の選択肢の中から1つを選ぶためのUIです。
クリックするとリストが表示され、その中から項目を選択します。
フォーム入力や条件選択など、「何かを選ばせる」場面で使われ、他の要素の上に重なるように表示されます。
※なお、「プルダウン」という呼び方もありますが、基本的にはドロップダウンと同じ意味で使われることが多い表現です。

つまり、アコーディオンは「情報を見せるためのUI」、ドロップダウンは「選択させるためのUI」という違いがあります。
見た目や動きが似ているため混同しやすいですが、「情報を開くものか、それとも選択させるものか？」という視点で考えると、使い分けしやすくなります。