「あたりまえ」をアップデートしつづける

お問い合わせ

スライダーのUIについて考えてみた。

  • 投稿日 :
  • 最終更新日 :

読了目安 : 5分

富本
フロントエンドエンジニア(ビジネス・アーキテクツ/エンジニアリングUNIT)

地元・愛知県の印刷会社や広告会社のWeb制作部門にてウェブサイトのコーディングをメインに、大小様々なWeb制作に携わる。2014年頃、BAに入社しフロントエンドエンジニアUNITに所属。Webサイトのコーディング、ガイドラインやコンポーネントの設計・作成のほか、ディレクターとしてと開発・運用の進行管理なども行っている。好きなキャラクターはリラックマ。行きたい国はイタリア。

プロフィールアイコン(イラスト):フロントエンドエンジニア 富本

BAsixs参画企業、ビジネス・アーキテクツ(以下、BAと称する)でフロントエンドエンジニアをしている富本です。

今回は、Webサイトにおける「スライダーのUI」について考えてみました。

というのもUI/UXが重要視されるようになってから、スライダーの利用が減ってきていました。しかしそれでも、廃れるわけではなく利用し続けられるスライダー。

私は、ディレクター寄りのフロントエンドなのですが、お客様へのコンテンツの提案をする機会は多くあります。その際にも候補の一つとしてスライダーはあります。

今回は自分の勉強も兼ねて、スライダーについてメリットやデメリットなどを考えてみました。

私がオススメしたいスライダーの実例も3つご紹介していきます!

スライダーのUIについて考えてみた。

スライダーを導入する上でのメリット・デメリット:重要な情報をいかに漏らさず伝えるか

スライダーとは、複数のスライドを順番に表示させることにより、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つ以上の情報があることを明示的に示しています。

また、左右の矢印やスクロールバーによってコンテンツが横スライドすることも示しており、マウスでコンテンツを左右に移動させることも可能です。

参考

2.富士通

ファーストビューの下のコンテンツ記事紹介部分がスライダーになっています。

こちらのサイトも右端に切れているコンテンツがあり、3つ以上の情報があることを明示的に示しています。

また、左右の矢印によってコンテンツが横スライドすることも示しており、マウスでコンテンツを左右に移動させることも可能です。

マウスを任意のコンテンツにhoverすると、少し画像が大きくなり要素が薄くなるなどの動きが加えられています。

参考

3.SUPER NINTENDO WORLD™ | USJ

ザ・エンタメ特化型ですね。特殊スライダーとでもいいましょうか。

ぜひ、縦スクロールをしてみてください。酔うかと思うような動きで切り替えてくれます。

左のメニューをクリックすると色が反転しコンテンツを切り替えてくれるので、酔いやすい人はこちらをオススメします。

また、下のコンテンツから上にスクロールする場合には、比較的シンプルな切り替えの動きになっています。

縦スクロールでのスライド切り替えとクリックでのコンテンツ切り替えを組み合わせた面白いサイトです。

参考

最後に:UIを向上させるスライダーでサイト滞在率を上げよう!

今回は、スライダーのUIについて説明しました。良いUIのスライダーの条件はもっと多くあると思います。UIの向上によってユーザーの滞在率は上がります。

ユーザーが欲しい情報をシンプルに見ることができるようにし、サイト滞在体験を向上させましょう。

スライダーに限らず言えることですが、どういったUIが最適なのか考えながらページに取り入れていきましょう。

もちろん、効果測定も忘れないようにしましょう。

BAsixsでは、クライアント様へのWebサイトの制作実績が多数あり、その中でUIを最大限高める提案を日々行なっています。UI要素をを最大限高めたWebサイトをお求めの方は、ぜひご相談ください。

ユーザーが使いやすいWebサイトをお求めの方、BAsixs UI/UXデザイナーにご相談ください。

UI/UXに熟知したデザイナーが、ユーザー体験を考慮したデザインや設計を提案いたします。どんなことでもご相談ください。

お問い合わせ

こちらの記事も合わせて読む

  • Webマーケティング会社の選び方を解説!ポイントを抑えて、自社に合った会社を選定しよう!

    • 投稿日 :
    • 最終更新日 :
    • BtoBマーケティング
    • デジタルマーケティング
    • マーケティング

    もっと見る

  • Webマーケティングに効果的なWebサイトの制作・運用を行うには?手法や実績をご紹介!

    • 投稿日 :
    • 最終更新日 :
    • BtoBマーケティング
    • デジタルマーケティング
    • マーケティング

    もっと見る

  • 【Webマーケティング初心者向け】KPIの設定方法とは?具体的な指標や立て方を徹底解説!

    • 投稿日 :
    • 最終更新日 :
    • BtoBマーケティング
    • デジタルマーケティング
    • マーケティング

    もっと見る

この記事をシェアする

FACEBOOK
Facebookシェア
Twitter
Twitterシェア
はてなブックマーク
はてなブックマークに追加