Interface)の略。ユーザーと製品・サービスの接触面を指すのでユーザーが視覚でとらえることのできる情報全てが「UI」になります。そんなUIデザインにも様々なUIパターンがありますが、今回はカルーセルスライダー(カルーセルUI)に絞って、メリット・デメリットや実装・デザインする際のコツを解説いたします!ちなみにカルーセルとは回転木馬(メリーゴーラウンド)という意味だそうですよ。カルーセルスライダーがどんなものか分からないという方は、下記の記事に簡単な説明と様々なデモサンプルがありますのでチェックしてみてくださいね!カルーセルスライダーのメリットファーストビューで多く情報を表示できるWebサイトでとにかく重要なのがファーストビューです!ユーザーはファーストビューから目的の情報があるかどうかを判断し、サイト内を遷移もしくは離脱をしてしまいます。縦スクロールを少なくできるコンテンツの数など情報量が多いとWebサイトは縦方向に長くなってしまいますよね。なると縦スクロールが長くなり、ページ下部にあるコンテンツまでユーザーがたどり着けないかもしれません。縦スクロールを少なくできれば、少しでもユーザーがコンテンツに接触できる機会が増えるので、コンテンツを並列に並べてコンパクトに表示できるカルーセルスライダーはコンテンツ情報量の多いサイトにメリット大です!カルーセルスライダーのデメリット表示順によっては見てもらえない可能性も...上記のメリットで複数のコンテンツを並列に並べてコンパクトに表示できることがメリットだということを紹介しましたが、その反面コンパクトにした分コンテンツを一部隠してしまうことになります。隠れてしまったコンテンツは自動で表示されるのを待つかユーザーがクリックまたはタップをしないと表示されないので、カルーセルスライダー内に格納したコンテンツの表示順によってはユーザーに気づいてもらえない可能性があるというのがデメリットになります。上のサンプルには8つの画像がカルーセルスライダー内に格納されているが、ほんとんどの画像が隠れてしまっている。デザインのコツ表示画像(コンテンツ)は5つ程度にするデメリットのところでも解説したように表示順が後半になるほど画像(コンテンツ)の見られる確率が低くなってしまいます。画像(コンテンツ)数が多くなればなるほどユーザーに見てもらえない画像(コンテンツ)が増えてしまうということですね。人間は多く画像(コンテンツ)を格納したところで全てを記憶することはできません。表示画像(コンテンツ)は5つ程度にするのがオススメです!何番目の画像が表示されているか明示するパッと見で何個中何番目の画像(コンテンツ)が表示されているのかわかった方が当然ユーザビリティ的に良いですよね!そこでよく用いられているのが表示画像(コンテンツ)の下部にドットやサムネイルを並べるUIです。ドットやサムネイルの色が順番に切り替わることによって何個中何番目の画像(コンテンツ)が表示されているのかを明示させています!上はサムネイル付きのサンプルです。一目で何個くらいの画像(コンテンツ)があるのか分かり、現在表示されている画像(コンテンツ)のサムネイルは色が薄くなるエフェクトがかけられている。ユーザーの意思で切り替えれるようにする気になる画像(コンテンツ)があっても自動で切り替わってしまって、再表示されるまで待たされるのはイライラしてしまいますよね。それはユーザビリティが非常に悪いということなので、左右に「<」「>」のような矢印をクリック、スワイプすることで表示画像(コンテンツ)を切り替えらるようにしたり、表示画像(コンテンツ)の下部のドットやサムネイルをクリック、タップで切り替えられるようにしましょう。ゴリラだけど意識高い系になりたい。クオリティの高いフリー画像サイト7選Web制作やブログ記事を作成する時などに「いい感じの写真入れたいなぁ〜」なんて思うことありますよね。商用利用可でクオリティの高い無料フリー画像サイト7選を紹介いたします。ジャングルオーシャン。