「カルーセルスライダー」の使いどころをUIデザインから学ぼう!

「カルーセルスライダー」の使いどころをUIデザインから学ぼう!

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

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

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

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

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

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

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




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

ファーストビューで多く情報を表示できる

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

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

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

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

縦スクロールを少なくできる

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

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

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

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

表示順によっては見てもらえない可能性も…

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

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

スライダーサンプル

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

デザインのコツ

UIデザイン イメージ

表示画像(コンテンツ)は5つ程度にする

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

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

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

何番目の画像が表示されているか明示する

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

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

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

スライダーサンプル2

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

ユーザーの意思で切り替えれるようにする

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

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

関連記事もチェックしよう!

いかがだったでしょうか?

実際にカルーセルスライダーを実装してみたという方は、下記の記事にslickを使ったカルーセルスライダーのサンプルがありますので参考にしてみましょう!

UIデザインをしっかり学びたいという方は、下記の記事にオススメの書籍やWebサイトをまとめていますのでこちらもチェックしてみてくださいね♪

以上、ラファエロでした!




デザインカテゴリの最新記事