【基礎解説】Webサイトを彩るスライダー機能とは

1. 【スライダー機能】とは、スタイリッシュな画像変遷機能

まずはスライダー機能についての基礎から解説します。

スライダー機能とは見た目のカッコいいスタイリッシュな画像変遷機能です。

3秒～5秒くらいの時間をおいて自動で画像が切り替わっていきます。

その切り替わり時のアクションですが、横に流れていく「スライダー形式」と、ふんわり消えて次の画像に切り替わる「フェードイン形式」の２種類が主流です。

また、切り替わる画像の一覧をミニ画像もしくはドットで示す「告知型」と、何も表示しない「無告知型」に分かれます。

スライダーのパターンを選ぶなら、だいたいこのあたりの中から実装するWebサイトにピッタリなものを選びます。

場合によっては告知型の派生形で、切り替わった画像と次に切り替わる画像を左右に少し覗かせておくパターンが採用されることもあります。

なにはともあれ、実物を見てみないとわからないというところもありますのでサンプルを用意しました。

クリックすると僕が運営する「you's Next」というWebサイトのデモページにジャンプしますが、怪しいサイトではないのでご安心ください。

【スライダー形式・告知型（ドットタイプ）】

【フェードイン形式・告知型（サムネイルタイプ）】

【スライダー形式センタータイプ・告知型（ドットタイプ）】

このように見せ方を変えるだけで、サイトの雰囲気もガラっと変わります。

スライダーの設置に１番多い場所は、やはりランディングページのトップ部分です。（サイトを訪問すると１番最初に表示されるページの最上部）

ここにアピールしたい画像をスライダーで表示するのが主流です。

多くの場合、企業案内や商品案内で採用されており、いくつもまとめてアピールしたい内容があるならスライダー機能の出番ですね。

スタイリッシュに表示してユーザーにインパクトを与えましょう！

2. 【スライダー機能】のメリット２つ

ここからスライダー機能についてのメリットを２つお話します。

「見た目」と「機能」という視点に分けると「スタイリッシュなだけでなく印象に残りやすい」ということと「画像をコンパクトにまとめて表示できる」というように分解することができます。

そのあたりのところを詳しく解説していきますね。

2-1. 【スライダー機能のメリット①】スタイリッシュなだけでなく印象に残りやすい

画像が次々に切り替わる機能はスタイリッシュでカッコいいだけでなく、インパクトも大きいので印象に残りやすいというのもポイントです。

人間は動くものを目で追う習性があるので、画像が切り替わるとユーザーは無意識にスライダーに視線を移してしまいます。

結果、アピール力が強く印象にも残りやすいので、宣伝効果抜群です。

企業内容や商品画像にスライダー機能を活用する理由もここにあります。

知っていて活用するのと、知らないで活用しているのでは大きな差を生み出しますので、狙ってアピールしていきましょうね！

ウエノ

2-2. 【スライダー機能のメリット②】複数の画像をコンパクトにまとめられる

アピールしたい商品画像、例えば新商品やセール商品を画像で表示したいとき、１つずつ表示していてはやたらページが縦に長くなってしまうことがあります。

そうなるとユーザーのスクロール回数が多くなってしまい、わずらわしさを感じさせてしまうかもしれません。

そんなときにもスライダー機能の出番です。

スライダー機能で画像を切り替えながら表示すれば、１か所でまとめてアピールすることができます。

このように複数の画像をコンパクトにまとめて、スッキリと表示することができるのもスライダー機能のメリットの１つです。

スライダー機能はサイトの見出しに使うだけでなくページのどこにでも小窓のように設置すれば、その良さを遺憾なく発揮してくれますよ！

ウエノ

3. 【スライダー機能】のデメリット３つ

スライダー機能についてメリットがわかったところで、次にデメリットについても解説します。

こんなに人気で素晴らしい機能なのにデメリットなんてあるの？と、思われるかもしれませんが、それがあるのです。

しかも３つも。

ということでその３つについて詳しく見ていきましょう。

3-1. 【スライダー機能のデメリット①】重くSEO的に不利

画像を何枚も使用しますので、単純に「読み込みに時間」と「表示する処理時間」が長くなり、１か所に画像が集中するため「負荷」が大きくなりとても重くなります。

検索結果で上位を狙うならWebサイトの表示速度を早くしなければならないので、スライダー機能はSEO的には不利な機能となります。

Webサイトをいかに早く表示させるかを問われれば、画像を少なくするのが手っ取り早いといわれるように、とにかく画像が多いほど処理時間がかかります。

それをまとめて切り替えながら表示するわけですから、とにかく読み込みに時間がかかり動作が重くなります。

そこで対策が必要です。

スライダー機能を使うなら１つ１つの画像を圧縮してファイルサイズを軽くすることが大切です。

そのままの画像を使用してはファイルサイズが大きいので、見た目に影響がでないくらいに画像を圧縮して、ファイルサイズを半分くらいに減らすのが得策です。

オンライン画像圧縮サービスにTinyPNGというサイトがありますので、こちらで１度画像を圧縮してから使用するのがベストですよ。

TinyPNGを見に行く

TinyPNGは私もよく使うサイトで、規格外の大きいファイルでなければ無料で使用できます！私が知っている中でも超優良サービスサイトの１つです！

ウエノ

3-2. 【スライダー機能のデメリット②】画像の優劣が伝えられない

画像を複数切り替えて表示するので、優先順位がつけられません。

この新商品画像を１番アピールしたいから１番はじめに表示して…のように設定しても、サイトの読み込み時間や、スライダー機能のある場所に到達するタイミングもみなそれぞれ違いますので、画像の優先順位についてはユーザーには伝わりません。

Aさんのパソコンはハイスペックなのでスライダー画像の１枚目から見れたが、Bさんのスマートフォンでは通信環境が悪かったので５枚目から見れた、のようなケースも普通に発生します。

これについての対策はありませんので、仕様として飲み込むしかありません。

どうしても気になるようであれば、素直にスライダー機能をあきらめて別の方法で表現しましょう。

どうしてもアピールしたい画像があればその画像だけスライダー機能ではなく、表示するコンテンツを作成したほうが良いです！

ウエノ

3-3. 【スライダー機能のデメリット③】ユーザーが立ち止まってくれないと全部見せられない

スライダー機能は画像が切り替わっていく仕組みですので、ユーザーがスライダーの場所で立ち止まってくれないと画像を全部見せることができないので、アピールしきれません。

そこで注意としては、見てもらえなった画像はユーザーにとっては「なかったもの」となるので、重要なお知らせをスライダー機能に組み込むのは危険です。

「〇〇イベントは〇月〇日にやります」というような重要な告知はスライダー機能に組み込まず、１つのコンテンツとして常に表示しておきましょう。

これはすごい大切なのでしっかりと覚えておいてくださいね！

イベント開催情報をスライダー機能に組み込んでしまっているサイトをちらほら見かけます。ここまで読み進めてきたみなさんならメリット・デメリットを理解しているので大丈夫ですが、知らないとこのように機会損失に繋がることをしてしまうこともあります。

ウエノ

4. 【まとめ】スライダー機能はスタイリッシュで便利だけど、デメリットをよく理解してから使いましょう

スライダー機能にはメリットとして、

1. 人間は動くものを目で追うという習性を利用して画像に注目させる。
2. 複数の画像を１か所にまとめてコンパクトに表示できる。

というものがあり、逆にデメリットとして、

1. 画像自体がファイルサイズが大きく、１カ所にまとめて表示するので処理に時間がかかり負荷もかかるため、「サイト表示速度は速い方が良い」というSEO対策としては不利。
2. 画像表示タイミングがユーザーの閲覧環境によって様々なため、画像の優劣（優先順位）が伝えられない。
3. 見てもらえなかったらユーザーにとっては「なかったもの」となる。

というものがあります。

スライダー機能を実装する上で本当に大切なのはデメリットであり、これが飲み込めないようであれば実装すべきではありません。

特に、「見てもらえないと困る」という画像は専用のコンテンツを用意して常に表示すべきであり、「SEO対策を最優先したい」のであればスライダー機能はおすすめしません。

実装の際は、本当に必要なのかをよくご検討ください。

SEO対策としては不利ですが、機能的にも見た目としても優れていますので、どちらを優先すべきかはみなさん次第です。

総括するとスライダー機能はスタイリッシュで便利ですが、デメリットも無視できない重要なものなので、そのあたりをよく理解してから実装するようにしましょう。

このブログがみなさまのお役に立てれば幸いです。

最後まで、ご閲覧いただきありがとうございました。

2022-12-12