ユーザビリティ

Webサイトデザインのスライダーについて考える

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
Webサイトデザインスライダー02

Webデザインの中でメインビジュアルがスライドするスライダーは一時期、省スペースで効率的に情報提供が可能であることから、大流行しました。しかし、最近のWebデザインではスライダーもしくはスライダーコントロールの使用について、UX/UIの観点から賛否が分かれています。

今回はスライダー使用の目的は何か?もしくは、あなたのWebサイトにとって最適か?この視点を軸にスライダーについて触れていきます。

スライダーとは?

赤枠内のように、スライドするスライドショーを指す用語です。

スライダー例

参考:パナソニック

よく使われるのはWebサイトのメインビジュアルで、省スペースで企業が提供したい情報を組み込むことができるので、多くのサイトで実装され、今でも多く使われています。

なぜスライダーの賛否が分かれてきたのか?

WebサイトのUI/UXの重要性にフォーカスが当たるようになってから、批判の声が多くなったような気がします。

「UI/UX?」となった方も安心してください。別に全く新しい考え方の基準というわけではありません。
ここでは少しだけUIとUXについて触れます。

WebサイトのUI

UI=ユーザーインターフェース

ユーザーとサービスとの接触面を表します。

要するに「ユーザーの目に触れる部分及び使用する部分全て」をUIと見なします。

具体的にはデザイン、フォント、製品画像等々、視覚に触れる部分全ての情報です。

それに付属してよく言われるのはUX。

WebサイトのUX

UX=ユーザーエクスペリエンス

ユーザーがWebサイトを利用して獲得できる体験を表します。

UIと混同してしまうケースが多いんですが、

具体的には・・・

・デザインがキレイ
・フォントが読みやすい
・お問い合わせフォームや購入ページまでの導線がわかりやすい

上記のような表層的な側面から

・商品を注文したらすぐに届いた
・対応が丁寧だった

といったサービスの質に関わる部分もUXの分野に含まれます。

サービスを利用する行動の中で、ユーザーが感じたこと全てがUXになると捉えて問題ないです。

UI/UXなんて昔から言われていること

UIとかUXとか言われるから新しい考え方みたいに言われてますけど、昔からWebサイトを活用して商売しているようであれば、ユーザビリティ(使い勝手)は重要で、提供サービスの品質は大事だってだけなので、あんまり構えて考えなくて大丈夫です。

しかし、本件のスライダーの賛否が最も分かれる点はUXの「導線がわかりやすい」という点です。

スライダーは悪なのか?

一概にスライダーは悪とは言えません。反対に正とも言い切れません。
スライダーはWebサイトの利用体験を提供する上でデメリットも含んでいるので、デメリットとメリットを以下に記載します。

【スライダーのデメリット】

・スライダーは広告と同じように認識されやすいので、ユーザーがスキップする
・スライダーはページの速度を低下させ、SEOや直帰率に影響する
・モバイルで上手く使えないスライダーもある
・スライダーを使うと強調したいポイントがぼやける

【スライダーのメリット】

・省スペースでコンテンツの紹介が可能になる
・ユーザーがコンテンツを見るために1か所に長く留まるため、スクロールの休憩地点となる
・動くことにより目立つ

上記に挙げられるのがスライダーの一般的なデメリットとメリット。

上記に合わせて、筆者がスライダーの採用で最も重要視しているのは優先順位有無です。

スライダーの並列配置は優先順位をぼやけさせる

スライダーは基本並列配置です。

しかし、導線のわかりやすさ(UI/UX)で重要なのは優先順位の明確化にあります。

ユーザーに「どうぞこのページを見てください」という優先順位が並列配置ではぼやけてしまいます。

弊社はユーザーのニーズによって「ホームページ制作」「アクセス解析」「ユーザビリティテスト」といったサービスは並列なので、特に問題ないかもしれませんが、オススメ商品があるようなネットショップ(例えば売れ筋、利益率が高い)等があるようであれば、優先順位がぼやけるので、ユーザーを特定のコンテンツに集中させるのは困難となります。
※弊社ではサイト表示が遅いことの方がユーザーにとってストレスであると考えるので、あまりスライダー等の動きは取り入れていません。

あなたのWebサイトがどんな情報を提供したいのか?それは並列なのか?優先順位は明確なのか?そういった条件によってスライダーの効果は大きく変容します。

スライダーが有効なパターン

上記にある通り、スライダーは使い方次第で効果が変容します。
ここではどんな条件下、パターンであれば有効であると考えられるかを記載します。

新着コンテンツを目立たせる

定期的に更新するWebサイトであり、新着情報や新着商品を強調したいのであれば、下記のようなスライダーは有効だと言えます。

新着情報スライダー例

スライダーメリットの一つである、目立たせることができる。を有効活用することで、ユーザーに有益な情報を的確に提供することができると考えられます。

フォトギャラリーを表示する

画像を複数表示させることで、企業や商品の価値・安心感を提供したい場合、任意で操作できるスライダーは有効だと言えます。

ユーザーの得たい画像を選択させる際に多くの縦スクロールをさせるのではなく、一か所にまとめてしまうことで、一か所に留まり、ユーザーのストレスを軽減させることも重要なUI/UXの改善だと言えます。

フォトギャラリー例

まとめ

スライダーは多くのWebサイトで採用されている機能ですが、メリットとデメリットが混在します。

「よく使われているから使う」のではなく、用途と目的を吟味して採用するべきです。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

無料相談のお問い合わせはこちら

現状のWebサイトを改善したい。新しくWebサイトを立ち上げたい・・

御社のお困りごとを解決する最善策をご提案いたします。
ご相談は無料です。

お気軽にお声がけください。

お問い合わせはこちら

hiroshioda