【UIデザイン】カルーセルスライダー実装のメリット・デメリット

みなさん、こんにちわ！
ジャングルオーシャンのラファエロです！

Webサイトをデザインするうえで、ユーザーの目をひく”見栄えの良さ”をデザインすることも大事ですが…

ユーザーの”使いやすさ”をデザインする「UIデザイン」も同じく大事です！

UIとは、ユーザーインターフェイス（User Interface）の略。
Interface とは「接点・接触面」という意味で、UI はユーザーと製品・サー
ビスの接触面を指すのでユーザーが視覚でとらえることのできる情報全て
が「UI」になります。

そんなUIデザインにも様々なUIパターンがありますが、今回はカルーセルスライダー（カルーセルUI）に絞って、メリット・デメリットや実装・デザインする際のコツを解説いたします！

ちなみにカルーセルとは回転木馬（メリーゴーラウンド）という意味だそうですよ。

カルーセルスライダーがどんなものか分からないという方は、下記の記事に簡単な説明と様々なデモサンプルがありますのでチェックしてみてくださいね！

カルーセルスライダーのメリット

Webサイトでとにかく重要なのがファーストビューです！

ユーザーはファーストビューから目的の情報があるかどうかを判断し、サイト内を遷移もしくは離脱をしてしまいます。

なので、複数のコンテンツを並列に並べてコンパクトに表示できるカルーセルスライダーは、Webサイト内で最も注目の集まりやすいTopページのファーストビュー部分によく使われているのをよく見かけますよね！

Topページに訪れたユーザーがファーストビューで少しでもコンテンツに接触するチャンスを増やすためにカルーセルスライダーは有効なんです♪

コンテンツの数など情報量が多いとWebサイトは縦方向に長くなってしまいますよね。

そうなると縦スクロールが長くなり、ページ下部にあるコンテンツまでユーザーがたどり着けないかもしれません。

縦スクロールを少なくできれば、少しでもユーザーがコンテンツに接触できる機会が増えるので、コンテンツを並列に並べてコンパクトに表示できるカルーセルスライダーはコンテンツ情報量の多いサイトにメリット大です！

上記のメリットで複数のコンテンツを並列に並べてコンパクトに表示できることがメリットだということを紹介しましたが、その反面コンパクトにした分コンテンツを一部隠してしまうことになります。

隠れてしまったコンテンツは自動で表示されるのを待つかユーザーがクリックまたはタップをしないと表示されないので、カルーセルスライダー内に格納したコンテンツの表示順によってはユーザーに気づいてもらえない可能性があるというのがデメリットになります。

上のサンプルには8つの画像がカルーセルスライダー内に格納されているが、ほんとんどの画像が隠れてしまっている。

デメリットのところでも解説したように表示順が後半になるほど画像（コンテンツ）の見られる確率が低くなってしまいます。

つまり、画像（コンテンツ）数が多くなればなるほどユーザーに見てもらえない画像（コンテンツ）が増えてしまうということですね。

また、人間は多く画像（コンテンツ）を格納したところで全てを記憶することはできません。なので、表示画像（コンテンツ）は5つ程度にするのがオススメです！

パッと見で何個中何番目の画像（コンテンツ）が表示されているのかわかった方が当然ユーザビリティ的に良いですよね！

そこでよく用いられているのが表示画像（コンテンツ）の下部にドットやサムネイルを並べるUIです。

ドットやサムネイルの色が順番に切り替わることによって何個中何番目の画像（コンテンツ）が表示されているのかを明示させています！

上はサムネイル付きのサンプルです。一目で何個くらいの画像（コンテンツ）があるのか分かり、現在表示されている画像（コンテンツ）のサムネイルは色が薄くなるエフェクトがかけられている。

気になる画像（コンテンツ）があっても自動で切り替わってしまって、再表示されるまで待たされるのはイライラしてしまいますよね。

それはユーザビリティが非常に悪いということなので、左右に「＜」「＞」のような矢印をクリック、スワイプすることで表示画像（コンテンツ）を切り替えらるようにしたり、表示画像（コンテンツ）の下部のドットやサムネイルをクリック、タップで切り替えられるようにしましょう。