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

Web

みなさんこんにちは!

「Webサイトエンジニア」×「臨床検査技師」のハイブリットおじさんこと、ウエノです。

今回はWebサイトにインパクトを与え、そして華やかに彩る「スライダー機能」について解説します。

スライダー機能とは画像が次々に切り替わるシステムであり、その見た目のカッコよさから実装するWebサイトはとても多いです。

みなさんも1度は必ず目にしているはずです。

Webサイトを開くと、まず目に飛び込んでくる冒頭の画像がその場でスライドして切り替わるアレです。

大きく分けて2つのタイプがあり、横にスライドして切り替わるタイプと、ふんわり消えて次の画像に切り替わるタイプがあります。

Webサイト制作をしている私としても、スライダー機能はやはりカッコいいなと思いますね。

しかし、そんなスライダー機能にもメリットとデメリットがあり、実装するなら絶対に知っておいてほしいこともあります。

ということで、スライダー機能についてこれから詳しく解説していきますね。

みなさんがWebサイトについての知識を1つでも多く得てもられるように、知識をふんだんにバラ撒きますので、ぜひ最後まで見ていってください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ウエノアイコン

ウエノ

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

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

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

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

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

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

ウエノアイコン

ウエノ

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

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

しかも3つも。

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

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

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

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

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

そこで対策が必要です。

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

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

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

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

ウエノアイコン

ウエノ

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

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

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

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

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

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

ウエノアイコン

ウエノ

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

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

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

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

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

ウエノアイコン

ウエノ

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

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

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

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

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

というものがあります。

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

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

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

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

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

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

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

関連ブログのご案内

Web

Webサイト開設にはサーバーが必要であり、数あるサーバーの中からエックスサーバーを選ぶユーザーが多く、またWebサイトエンジニアの僕としてもおすすめするサーバーです。そのエックスサーバーについて「使ってみたいけどどうやればいいのかわからない」という人向けに、契約手順やWordPressの始め方を画像付きで解説します。また、初心者向けに基礎の解説も行います。

Web

Webサイトに設置するボタンデザインは制作者の好みに合わせて作ればよいのかというと、ある程度は好みで決めて良いですが注意するべき項目が6つあります。その項目とは「色」「形」「大きさ」「テキスト内容」「アニメーション活用」「設置数」です。ユーザーに好まれやすいボタンデザインについてそれぞれ詳しく解説します。

Web

アコーディオン機能を使えばQ&Aのような全員が全員見なくても良い回答部分を隠すことができる、Webサイトにおいてとても便利な機能です。設置するとそんなテキストだらけになりがちなの部分をスッキリさせることができるのが特徴です。今回のブログでは、このアコーディオン機能についての概要、メリット、デメリット、実装時のコツを解説します。

TOPへ戻る