はじめに
最近、ボランティアで
ホームページ作成をしています。
参考サイトを見ていると、
写真が横に切り替わる表現を
見つけました。
手動でも動かせて、
自動でもスライドする。
見た目としてはおなじみのアレですが、
普段のエンプラ系開発では
あまり見ない気がします。
そこで気になったのが、
カルーセル と
スライダー の違いです。
この記事では、
この2つの違いを
初心者向けにざっくり整理します。
そもそも何て呼ぶんだっけ？
最初に引っかかったのは、
「これって何て呼ぶのか」
という点でした。
横に動く写真を見ると、
スライダーとも呼ぶし、
カルーセルとも呼びます。
でも、自分で使おうとすると、
この2つの違いが
少し曖昧に感じます。
今回は生成AIでも整理しつつ、
自分が参考サイトを見て
感じたことも交えて書いています。
カルーセルとスライダーは、かなり近い言葉
結論からいうと、
この2つはかなり近い言葉 です。
現場でも、
わりと混ざって使われます。
ただ、ざっくり分けるなら
次の理解で十分そうです。
- スライダー
1枚ずつ切り替えて見せる - カルーセル
複数枚を並べて流す
名前の違いというより、
見せ方の重心が違う。
そんな感覚です。
スライダーは「1枚を主役に見せる」感じ
スライダーは、
1枚を順番に見せるUI
と考えると分かりやすいです。
たとえば、
トップページの大きな画像が
数秒ごとに切り替わるものです。
特徴としては、
- 1枚を大きく見せやすい
- 自動再生と相性がよい
- メインビジュアル向き
といったあたりです。
写真やバナーを
印象的に見せたいなら、
まずスライダーを想像すると
よさそうです。
カルーセルは「複数枚を並べて見せる」感じ
カルーセルは、
複数の項目を横に流すUI
という印象です。
こちらは画像だけでなく、
記事一覧や実績紹介でも
よく使われます。
特にPCでは、
3枚や4枚を並べて
横に送る形が多いです。
そのため、
一覧を少しおしゃれに見せたいときは、
カルーセルの発想が合います。
WordPressでも、
投稿カードを横に流したいなら
こちらの考え方に近いです。
違いを見るなら、”PCで複数枚出せるか”
見分けるポイントは、
画面が広いときの表示枚数です。
スマホではどちらも
1枚表示っぽくなりやすいので、
差が見えにくいです。
でもPCで見たときに、
- 1枚を大きく切り替える
→ スライダー寄り - 複数枚を並べて動かす
→ カルーセル寄り
と考えると、
かなり整理しやすいです。
この違いは、
実装部品を選ぶときにも
そのまま効いてきます。
エンプラ系であまり見ないのは、用途が違うから
業務システムでは、
見せることより操作性が優先です。
エンプラ系の画面では、
必要な情報がすぐ見えて、
迷わず使えることが大事です。
そのため、
自動で動くUIや
横に流すUIは、
あまり優先されません。
一方でホームページでは、
写真の見せ方や第一印象が
かなり重要です。
この違いを考えると、
Webサイトで
カルーセルやスライダーを
よく見かけるのも自然です。
まとめ
カルーセルとスライダーは近い言葉ですが、
ざっくり分けると理解しやすいです。
今回整理してみて、
自分の中では
次のように考えると
しっくりきました。
- 1枚を主役に見せるなら スライダー
- 複数枚を並べて流すなら カルーセル
特に、
PCで複数枚出すかどうか
は分かりやすいポイントです。
ボランティアでサイトを作っていると、
普段の業務開発では
気にしなかった部品に
出会えて面白いです。
これから実装を考えるなら、
まずは
「1枚を見せたいのか」
「一覧を流したいのか」
を決めるところから
始めるのがよさそうです。
