この記事を書いた人
- 富本ディレクター／フロントエンドエンジニア（ビジネス・アーキテクツ）
地元・愛知の印刷会社や広告会社にてWeb制作に携わる。2014年頃、フロントエンドエンジニアとしてBAに入社。現在、ディレクターとして開発・運用の進行管理やWebサイトのガイドライン作成やコンポーネントの設計・作成を担当しています。好きなキャラクターはリラックマ。イタリアとスイスに行きたい。
BAsixs参画企業、ビジネス・アーキテクツ（以下、BAと称する）でフロントエンドエンジニアをしている富本です。
今回は、Webサイトにおける「スライダーのUI」について考えてみました。
というのもUI/UXが重要視されるようになってから、スライダーの利用が減ってきていました。しかしそれでも、廃れるわけではなく利用し続けられるスライダー。
私は、ディレクター寄りのフロントエンドなのですが、お客様へのコンテンツの提案をする機会は多くあります。その際にも候補の一つとしてスライダーはあります。
今回は自分の勉強も兼ねて、スライダーについてメリットやデメリットなどを考えてみました。
私がオススメしたいスライダーの実例も3つご紹介していきます！
スライダーを導入する上でのメリット・デメリット：重要な情報をいかに漏らさず伝えるか
スライダーとは、複数のスライドを順番に表示させることにより、1つのエリアで複数の情報を魅せることの出来るスライドショー機能です。
Webサイトのメインビジュアル部分で使われるなど、複数のコンテンツ・製品・写真などを見せるのに最適な表現方法です。
導入にあたっては以下のようなメリット、デメリットがあります。
スライダーのメリット
- 省スペースでコンテンツの紹介が可能
- ファーストビューに掲載することで、より多くの情報をファーストビューに表示が可能
- 動きがあることで、より目立つため、ユーザーの目を引くことができる
- ユーザーがコンテンツを閲覧するために、1ヶ所に長く留まりユーザーのエンゲージメントが向上する
スライダーのデメリット
- スライダーは広告と同じように認識されやすいので、ユーザーがコンテンツをスキップする
- スライダーはページの速度を低下させることが多く、SEOや直帰率に影響する可能性がある
- スライダーを使うと情報が並列になるので、強調したいポイントとして情報の優先順位がなくなる
- スライダーの2枚目以降の情報が最初は隠れているため、情報が伝わりきらずに2枚目以降のクリック率が下がることがある
スライダーを安易に導入するにはデメリットが大きいことがわかります。
特に「伝えたい情報が伝わらない可能性がある」ことが最も大きいデメリットになります。
これらのメリット、デメリットをしっかりと検討した上で、効果的なスライダーの導入を検討するようにしましょう。
UIの良いスライダーを作る上での5つの必須条件
UIが良いといっても条件はいろいろあると思います。いくつか挙げてみましょう。
下記の5つの条件の中で、なるべく多くの条件を満たすようにすることで、よりUIの良いスライダーとなるでしょう。
1.全スライダーで「今どの画像が表示されているのか」をわかるようにすること
スライダーの周辺にサムネイルをつけるなどして、現在表示しているスライドがどれなのか、全体像がわかるようにすると、ユーザーが迷うことも減る上に他にどれだけスライダーに使っているコンテンツがあるのか分かるようになります。
2.スライダーの再生中にもユーザーが別のスライドに任意で切り替えができること
スライドが自動で切り替わる場合でも、ユーザーが任意で別のスライドに切り替えられることができるようにし、モバイル表示時には、ユーザーがスワイプできるようにすることが大切です。
自動で流れる動きに身を任せるしかないスライダーはUXを著しく下げます。表示している時間しかその内容を伝えられないのは損失になるので、ユーザーの操作に合わせて任意にスライダーの内容が切り替えできるのが良いでしょう。
3.ユーザーの注意がそれるのを避けるための適切な動きを設定すること
フェードやトランジションなどを利用してスムーズに要素が切り替わるようにすることも大切です。
スライダーの動きを整えることでユーザーの目がしっかりと画像に入り、注意が外れないようにすることで、スライダーの内容を無理なく余すことなく伝えることができます。
4.「戻る」「進む」の動作をわかりやすく、見たい画像にすぐ戻れるようにすること
上記2にも関連するのですが、任意で切り替えができるのと同時に「進む・戻る」というところもわかりやすいと、より操作性が増します。
操作性を高めるために、スライダー内に矢印ボタンを使うなど視覚的に理解しやすい表現を使うと操作性が上がります。
5.直帰を防ぐために、ページのロード時間を最適化すること
これはスライダーに限らず、Webサイト全体に言えることですが、画像サイズを最小限にして、スライダーのロード時間を最適化することがスライダーにおいても大切です。
読み込みが遅いと、直帰率を高めてしまう深刻な要因になります。
また、カルーセルの2P以降に表示されるスライドは、ユーザーが見ない可能性もあるので読み込みを遅らせるようにすることも大切です。
UIが良い・見せ方にこだわっている・面白いと思うスライダー3選！
UIが良いもの、見せ方にこだわっているもの、面白いものを選んでみました。
1.スタディサプリ
Case Studyのコンテンツ紹介部分がスライダーになっています。
右端に切れているコンテンツがあり、3つ以上の情報があることを明示的に示しています。
また、左右の矢印やスクロールバーによってコンテンツが横スライドすることも示しており、マウスでコンテンツを左右に移動させることも可能です。
参考
- スタディサプリ BRAND SITE.リクルート.(参照 2022-01-12)
2.富士通
ファーストビューの下のコンテンツ記事紹介部分がスライダーになっています。
こちらのサイトも右端に切れているコンテンツがあり、3つ以上の情報があることを明示的に示しています。
また、左右の矢印によってコンテンツが横スライドすることも示しており、マウスでコンテンツを左右に移動させることも可能です。
マウスを任意のコンテンツにhoverすると、少し画像が大きくなり要素が薄くなるなどの動きが加えられています。
参考
- 富士通.富士通.(参照 2022-01-12)
3.SUPER NINTENDO WORLD™ | USJ
ザ・エンタメ特化型ですね。特殊スライダーとでもいいましょうか。
ぜひ、縦スクロールをしてみてください。酔うかと思うような動きで切り替えてくれます。
左のメニューをクリックすると色が反転しコンテンツを切り替えてくれるので、酔いやすい人はこちらをオススメします。
また、下のコンテンツから上にスクロールする場合には、比較的シンプルな切り替えの動きになっています。
縦スクロールでのスライド切り替えとクリックでのコンテンツ切り替えを組み合わせた面白いサイトです。
参考
- SUPER NINTENDO WORLD™ | USJ.USJ.(参照 2022-01-12)
最後に：UIを向上させるスライダーでサイト滞在率を上げよう！
今回は、スライダーのUIについて説明しました。良いUIのスライダーの条件はもっと多くあると思います。UIの向上によってユーザーの滞在率は上がります。
ユーザーが欲しい情報をシンプルに見ることができるようにし、サイト滞在体験を向上させましょう。
スライダーに限らず言えることですが、どういったUIが最適なのか考えながらページに取り入れていきましょう。
もちろん、効果測定も忘れないようにしましょう。
BAsixsでは、クライアント様へのWebサイトの制作実績が多数あり、その中でUIを最大限高める提案を日々行なっています。UI要素をを最大限高めたWebサイトをお求めの方は、ぜひご相談ください。