Webデザインのスライダーやスライダーコントロールの使用について、デザイナーにとっては賛否両論です。好きな人もいれば、嫌いな人もいます。タイミングが悪いカルーセルパネルや、ギャラリーの自動スライダーは、サイトのより重要な項目からユーザーの気をそらしかねません。
一方で、手動で動かすスライダーであれば、ユーザーはWebサイトのさまざまなコンテンツの機能やオプションを素早く操作することができます。そのため、スライダーやスライダー操作を追及し、Webデザインにおいてもっとも便利な機会を突き止めましょう。
スライダーとは？
スライダーとは、Webサイトのスライドショーを表す用語です。たとえば、製品や写真を表示する回転式カルーセルが挙げられます。Webデザイナーはあらゆる種類のサイトにスライダーを組み込むことができます。
しかし、スライダーがもっとも有効なのは、企業が関連するコンテンツを表示したり、専門的なポートフォリオを展示したりしたい場合です。複数の選択肢を素早く表示して、それらをユーザーがすぐにソートできるようにしたいと思うとき、選択肢を絞るのにスライダーが便利です。
なぜ好みが分かれるのか？
スライダーについてWebで検索すると、検索結果の上位には、多くのデザイナーが主張した肯定的な意見と、それと同じ数のスライダーを嫌う人が書いた批判が見つかるでしょう。両者の立場にはいくつかの見解があります。
スライダーの事例（出展：Depositphotos）
批判側によれば、スライダーは混乱を招くと言います。というのも、スライダーはいくつかのオプションを一度に表示し、それらの重要度を同等に見なすからです。UXとは選択肢を明確にすることなので、ユーザーに混乱を招くあらゆることは避けるべきだと反対派は言います。また彼らは、スライダーが悪質なUXである理由について以下のことを挙げています。
- スライダーは広告と同じように見なされやすく、ユーザーがスキップしてしまう。
- スライダーはページの速度を低下させ、SEOやコンバーション率に影響を及ぼす。
- モバイルにうまく変換できないスライダーが存在する。
- スライダーを配置することで、ほかのコンテンツを配置する余地がなくなる。
- スライダーを使うと、企業は自分たちが強調したいことが定かでなく、すべての選択肢を同時に表示しようとしているという印象を与えかねない。
動くスライドショーは、自動で再生される動画と同じ悪影響を与える可能性があると批判する人もいます。スライダーを使用する代わりに、彼らは静的な画像とコピーを勧めています。
正反対に、スライダーを気に入って、スライダーの使用に賛成するデザイナーもいます。以下のような使い方の場合、コンテンツのスライダーが優れたUXを作り出します。
- スペースの節約：コンテンツがスライダーに集まり、１つのスクリーン内で表示できるようになる。
- ユーザーのエンゲージメント：コンテンツを見ようと、ユーザーが１か所に長く留まる。また、ページをスクロールし続ける前に休憩地点が生まれる。
- 画像を統合できる：ページに配置されたメディアは本文から注意をそらすが、スライダーは画像をすべて１か所にまとめるので、注意がそれずに済む。
- ユーザーがコンテンツをコントロールできる：ユーザーがいつでも、自分のペースでスライダーを進めたり、スライダーが探しているコンテンツでない場合は一気にスキップしたりできる。
スライダーを使うタイミング
すべてのWebサイトでスライダーが有効なわけではありません。しかし、スライダーが効果を発揮するものもあります。まずは、自分のユーザーが何を探していて、Webサイトの各ページがユーザーの目的を達成するのにどのように役立っているのかを分析するところから始めましょう。
スライダーがブランドイメージを固め、ユーザーからの信頼を増幅させる場合、スライダーはUXにおいて重要な部分になります。混乱を招いたり注意を散らしたりしてしまう場合は、コンバーションに悪影響を与えるでしょう。企業はそれぞれユニークなので、ある環境で問題なく機能するものでも、別の環境では悪い影響を及ぼすかもしれません。
スライダーのほかの事例（出展：Depositphotos）
ぎこちない水平スライドの代わりに、最小限のトランジションや柔らかいフェードをかけることで、スライダーがユーザーの注意をそらすのを避けましょう。「戻る」と「進む」の動作をわかりやすい矢印ボタンを使ってすることで、ナビゲーションを簡単にできます。モバイルユーザーにはスワイプを使ってください。また、画像サイズを最小限にすることでページのロード時間を最適化しましょう。カルーセルのあとから表示されるスライドに関しては、閲覧者は見ない可能性もあるので、読み込みを遅らせるようにしましょう。
編注：一部翻訳修正しました (2/28 10:50)
製品提供の流れにスライドを活用する
サイトを訪れたユーザーが大量の情報を目の当たりにすると、彼らは困惑してしまうでしょう。一連のステップを通して製品を提供する場合は、スライダーを使ってユーザーに物語のあるビジュアルを作り出しましょう。
たとえばスマートフォンを使ってクレジットカードの送金をしている企業があるとします。その企業のサイトにあるスライダーは、顧客がカードの支払い画面を提示して、従業員がデバイスをスワイプすることで、望んだアカウントに資金を送信する機能があるかもしれません。このように、以前はテキストを読むのに数分間かかっていたものでも、スライダーによって、ユーザーは数秒間で素早く理解することができます。新しいサイトやモバイルアプリのオンボーディングでも、同様のプロセスを適用することができます。
新しいコンテンツを目立たせる
はじめてWebサイトを訪問するユーザーの多くは、どのような選択肢があり何を提供するサイトなのかを知りたいと思います。そのため、ホームページのコンテンツスライダーを使って簡単な要約を提供し、訪問者が迅速に判断できるようにしましょう。
スライダーを使ってアップデートを表示する代替案（出展：Depositphotos）
定期的にサイトをアップデートする場合、スライダーを使えばアップデートを強調できるでしょう。ニュースサイトでは普通、コンテンツスライダーの焦点は最新の素材やもっとも衝撃的な素材に向きます。アップデートされると、最新のニュースや提供である限り、すべて最上部に表示されます。何らかの変更があれば、ユーザーは一目で知ることができるでしょう。
フォトギャラリーを表示する
画像を１枚のみ使うことで、力強いブランドメッセージを与える場合があります。一方で、画像のコレクションを表示するほうが、企業のクオリティや価値、信頼感などの説得力ある証拠になる場合もあります。スライダーとは、単に画像を陳列したものではありません。いくつかの小さい画像を組み合わせてフォトギャラリーを作成しようと、画面いっぱいに高画質なグラフィックを次々と表示しようと、どのような場合にも、スライダーは画像を体系づけて表示してくれるのです。
フォトギャラリーのスライダー（出展：Depositphotos）
不動産や車を販売する企業にとって、フォトギャラリーは必要不可欠と言えるでしょう。家を購入したい人は、直接家を見る前に、家の画像を複数見たいと思っています。このとき、スライダーを活用すれば、素早く目を通すことができます。
車のメーカーの場合、車の優れた機能や革新的なデザインのスクリーンを次々と表示して、細かい性能に購入者の関心を引きます。１つ１つイメージを選択しなくても、販売者は画像を素早く見せることができるでしょう。ユーザーとの摩擦が減るため、ユーザー体験が向上します。
オンラインでポートフォリオを表示する
アーティストやグラフィックデザイナー、Webエンジニアなどは、自分の製品やスキルを実証する方法を探しています。一方でクライアントは、全体的なクオリティや雰囲気を評価できるテイストや簡単な概要を見たいと思っています。デザイナーはスライダーを活用することで、柔軟なフォーマット上に成果を展示することが可能です。訪問者は自分の望むものを、多かれ少なかれ見ることができます。たとえ彼らが長く留まらなかったとしても、大まかな印象は残すことができます。
ECサイトのオプションを展示する
オンラインの起業家は、企業のもっとも人気のある製品や目をひく製品をいくつか展示して、ユーザーの関心を寄せたり、新しい嗜好や変化を強調したり、ユーザーが買い物しやすくするためのカテゴリーを表示したりできます。売上向上のためにECサイトのWebデザインのトレンドを調査しているデザイナーであれば、もっとも効果的なレイアウトのいくつかは、ミニマリズムのアプローチと多くのホワイトスペースを用いていることを知っているでしょう。そのため、スライダーが効果を発揮するのです。
効果性をテストする
ストーリーを伝えたり、閲覧中の操作をユーザーにゆだねたりする場合、スライダーは効果的です。自分のスライダーがユーザー体験を向上させているのかわからないのなら、テストしましょう。ページをデザインしている途中なら、A／Bテストを実施してください。スライダーに対してユーザーがどのようにインタラクションするのか、どのバージョンがより好まれるのかを検証できます。またどのバージョンにおいて高いコンバーション率や利益の増加があったのかも調べましょう。
既存のページにスライダーがある場合、ユーザーのインタラクションやクリックスルーのデータを追跡しましょう。そして、クリック数が減少し始めた地点を記録してください。多くの場合、ユーザーが多くのスライドを処理するにつれて関心が弱まります。その理由は、普通デザイナーはもっとも関心をひくコンテンツを最初に配置するからです。もし次に続く素材がユーザーの関心を集められていないなら、その素材はローディング時間を遅くするだけでしかありません。
結論
Webサイトは１つ１つ異なり、異なる訪問者を受け入れます。ユーザーが必要とするものから始まり、ユーザーの好みやインタラクションスタイルに合わせてコンテンツをデザインするデザイナーは、コンテンツを表示するために、多種多様なツールを使うものです。スライダーは正しく使うことで、より没入感のあるブラウジング体験を実装することができます。
