カルーセル、スライダー、スライドショー

#現場で乱立する曖昧な用語

フロントエンドにあまり関心がない現場では、「スライダー」や「スライドショー」が曖昧に使用されている。 一方、デザイン中心の現場では、「カルーセル」「スライダー」「スライドショー」に独自の定義がされていたりする。

複数の現場で聞いた結果を表にまとめると次のようになる。

記憶違いがあるかもしれないが、これらの定義を検索してみると、実際様々な定義がされている。

#Web標準ではすべてカルーセルと呼称される

W3Cのドキュメントには、次のように「カルーセルは、複数のアイテムを一度に1つずつ表示する機能。「スライドショー」や「スライダー」とも呼称される」と記載されている。

Carousels show a collection of items one at a time. They are also known as “slideshows” and “sliders”.

加えて、Web標準に関わっている企業のドキュメントにおいて、スライドショーやスライダーと呼ばれるようなものは、「カルーセル」と説明されている。

スライダーやスライドショーは「カルーセル」の俗称であり、1枚の表示でも複数枚でも、自動でも手動でも、構造としてはすべて親概念である「カルーセル」に内包されていると考えられる。

#スライダーは名前が被っている

スライダーは、数値入力用UIと名称が被っている。

例えば、Material Designでは、「スライダー」とは音量や明るさを調整するための「数値入力用のつまみ」を指している。

#モダンなUI設計におけるアプローチ

以上のことを踏まえると、現代のコンポーネント設計においては、以下のように扱うのが合理的だと思われる。

• コンポーネント名の統一: 別々の要素として分けるのではなく、すべて「カルーセル（Carousel）」という単一のUIとして定義する。
• プロパティによる状態管理: 見た目や動きの違いは、カルーセルが持つプロパティ（設定値）として管理する。
  • 1枚だけ表示したい場合: 表示枚数の設定を「1」にする
  • 自動で動かしたい場合: 自動再生の設定を「オン」にする

用語の曖昧な使い分けを廃止し、標準に沿って「カルーセル」に名称を統一することで、チーム内の認識のズレを防ぐことができる。