スライダー（スライドショー・カルーセル）は本当に必要？その役割と必要性について。

2019年07月04日
2019年10月05日

こんにちは。デジタル事業部の冨江です。

スタートミーアップデジタル事業部ではホームページの制作を行なっています。
今回は、ホームページにおけるスライダー（スライドショーとかカルーセルとも言います）の役割や必要性について考えてみたいと思います。

スライダーとは

スライダーとは、複数枚の画像を次々と切り替えて表示する機能のことで、ホームページではトップページで見掛けることが多いのではないでしょうか。
クロスフェードで切り替わるもの、上下や左右にスライドして切り替わるもの、回転など複雑な動きをするものと、表現の仕方は様々です。

スライダーを導入した例（ユニクロ https://www.uniqlo.com/jp/）

スライダーを導入するメリット

ホームページにスライダーを使用することで、

ファーストビュー（サイトを開いて画面に表示される領域）に多くの情報を盛り込める。
動きが出ることで閲覧者の目を引くことができる。
オシャレで素敵なサイトに見える。

こんなメリットが生まれます。

スライダーを導入した例（トヨタ https://toyota.jp/index.html）

デメリットも理解する必要がある

スライダーを使用することで生まれるのはメリットばかりではありません。

皆さん、ホームページのトップページって何秒くらい見ますか？
目的を持ってアクセスしたサイトならじっくり時間を掛けて見るのでしょうが、「検索に引っ掛かったからとりあえず開いてみた」サイトだったら、さらっと目を通す程度しか見ないなんてことも多いんじゃないでしょうか。
そんなときの 1ページの滞在時間は数秒か、もっと短いかもしれません。

実はあまりクリックされていない

こんな検証結果があるのでご覧下さい。

スライダーの画像	クリック率（%）
1枚目	89.1%
2枚目	3.1%
3枚目	2.4%
4枚目	2.8%
5枚目	2.6%

これは、あるサイトが行なった「スライダーのクリック率」を検証結果をまとめたものです。
2枚目以降、ほとんどクリックされていないことがわかりますね。
1枚目と比較するとその差は歴然です。

情報が伝わっていないかもしれない

もう少しじっくりと見たいのに画像が替わっちゃってイラッ！
なんて経験ありませんか？わたしはあります…。
閲覧者の都合を無視して切り替わるスライダーは、情報が伝わりきらないデメリットもあると言うことも考慮しなければなりません。

素敵サイトのスライダー導入率は？

素敵なサイトを集めたまとめサイトに掲載されていた新着30サイトのトップページを確認してみたところ、こんな結果になりました。

静止画（写真・イラスト）^※	21サイト
スライダーを使ったホームページ	6サイト
背景に動画を使ったホームページ	3サイト

静止画のサイトが圧倒的に多かった！
ひと昔前に比べると、スライダーを使用したホームページは減ってきているのでしょうか。
※一部アニメーション画像を使用したサイトも含む。

明確な目的なく安易に導入するべきではない

結局のところ、スライダーが必要かどうかは、アクセス解析やABテストの結果で判断するしかありません。
ですが、前述の通り、2枚目以降はほぼクリックされていないという検証結果も出ており、最早、必要かどうかを考える必要もなさそうです。

ちなみに、スタートミーアップもスタキャリも RAKUSO も、スライダーは使っていません。
メインビジュアルは全て静止画です。

RAKUSO ではファーストビューに商品バナーを並べている

そう言えば、何年か前、Appleがスライダーの使用をやめたことが記事になりました。
現在はと言うと… 今でもスライダーは使用されていませんでした。

スライダー（スライドショー・カルーセル）は本当に必要？その役割と必要性について。

スライダーを導入する場合はその目的を明確に、ただ「オシャレに見えるから」とか「みんな使ってるから」とか、そんな理由でしかないなら静止画で十分です。
1枚の画像に精一杯の想いを込めて閲覧者に伝えてみましょう。

それでは、また :^)

この記事を書いた人

冨江恵: 2014年個人でデザイン事務所を開業後、2018年3月にスタートミーアップ合同会社へ。現在は、デジタル事業部のメンバーとして茨城県つくば市を中心にホームページ制作・グラフィックデザイン・CAD図面データ作成等を行なっています :‑D

ウェブサイト

【設定不要】WordPress で画像をふわっと拡大表示なら無料プラグイン「Easy FancyBox」で決まり！【2019年度版】Facebook（フェイスブック）ページのカバー画像をパソコン・スマホでピッタリ表示するには？最適なサイズ考察まとめ

コラム

関連記事

【プラグイン不要】WordPressで構築したホームページにdescriptionタグを簡単に設定する方法

【WordPress 5.0】新エディタ「Gutenberg（グーテンベルグ）」をプラグインを使って簡単に旧エディタに戻す方法とその手順。

インターネットの利用環境に関する調査結果から改めてモバイルフレンドリーについて考える。

WordPress に予約システムを構築するなら「Booking Package – 予約システム」が設定楽々でオススメ！

【公開までたった2時間】ペライチでホームページ立ち上げてみたら驚くほど簡単だった！

functions.php にコピペでOK！覚えておくと便利な WordPress 小技集