ホームページ制作でトップページのデザインを決めるとき、スライドショーを入れるかどうかで迷う方は多いのではないでしょうか。スライドショーは複数の内容を見せられる一方で、2枚目以降が見られにくいなどのデメリットもあります。
この記事では、トップページにスライドショーを使うメリットとデメリット、ホームページ制作でスライドショーを使うときに決める枚数などを解説し、当社がスライドショーを導入した事例も紹介します。
トップページにスライドショーを使うメリット
トップページにスライドショーを使うと、限られたスペースで多くの情報をユーザーに見せられます。ここでは、スライドショーを使うメリットを紹介します。
複数のサービスや商品をファーストビューで紹介できる
ファーストビューはユーザーがトップページを開いて最初に目にする範囲で、使える画面の大きさには限りがあります。
1枚の画像では1つのサービスや商品しか大きく見せられませんが、スライドショーを使えば同じスペースで複数のサービスや商品を順番に紹介できます。たとえば、住宅の新築とリフォームの両方を手がける工務店であれば、新築の外観とリフォーム後の室内をスライドで切り替えて見せることで、どちらを探しているユーザーにも対応範囲がひと目で伝わります。
事業や看板商品が複数ある会社ほど、スライドショーでファーストビューを使い分ける効果は大きくなります。
会社や店舗の雰囲気を複数の写真で伝えられる
会社や店舗の雰囲気は、1枚の写真だけでは伝わりきらないことがあります。
スライドショーで外観や内装、働くスタッフの様子などを順番に見せれば、ユーザーは実際に訪れたときの様子を具体的に想像できます。飲食店であれば店内の席と料理と調理風景、美容室であればカット席と待合スペースのように、ユーザーが来店前に知りたい場面を複数の写真でまとめて伝えられます。
トップページで雰囲気が伝わると、初めてのユーザーでも問い合わせや来店への不安が小さくなります。
動きのある画面でユーザーの目を引ける
人の目は止まっているものより動いているものに向きやすく、スライドショーの切り替わりはユーザーの視線をトップページの上部に集めます。画像が切り替わる演出があるだけで、静止した画像だけのホームページより印象に残りやすくなります。
同業他社のホームページを比べながら見ているユーザーにとっては、画面の動きが自社のホームページを覚えてもらうきっかけになります。
キャンペーンなど期間限定の情報を差し替えやすい
スライドショーは1枚ごとに画像を入れ替えられるので、キャンペーンやセール、イベントの告知など期間限定の情報を載せる場所として使えます。
トップページのデザイン全体を変えなくても、スライドを1枚追加したり差し替えたりするだけで、新しい情報をユーザーの目に入りやすい位置へ出せます。季節ごとの商品やキャンペーンが多い店舗であれば、時期に合わせてスライドを入れ替えることで、トップページを開くたびに新しい情報がある状態を作れます。
WordPressの管理画面からスライドを差し替えられるようにしておけば、制作会社に頼まなくても社内で更新できます。
トップページにスライドショーを使うデメリット
スライドショーはトップページを華やかに見せられる一方で、使い方によっては成果につながりにくくなります。ここでは、トップページにスライドショーを使うデメリットを紹介します。
2枚目以降のスライドはほとんど見られない
多くのユーザーはトップページを開くとすぐにスクロールするか、メニューから目的のページへ移動します。
スライドが切り替わるのを待って最後まで見るユーザーは少なく、2枚目以降のスライドはほとんど見られないまま次の行動に移られます。特にスマホでは、ページを開いた直後に下へスクロールするユーザーが多く、1枚目が表示されている数秒の間に見られる範囲が決まってしまいます。
スライドショーに複数のサービスを並べても、2枚目以降に載せたサービスはユーザーに届いていない可能性があります。
伝えたい内容が分散してメッセージが弱くなる
スライドショーで複数の内容を順番に見せると、1枚ごとに伝える内容が変わり、トップページ全体で何を一番伝えたいのかが分かりにくくなります。
ユーザーはトップページを数秒見て、自分に関係のあるホームページかどうかを判断します。その数秒の間にサービスの紹介や会社の雰囲気を伝える画像が次々に変わると、どれも印象に残らないまま離れてしまうことがあります。
キャッチコピーもスライドごとに変わるので、会社の強みを1つの言葉で覚えてもらうことが難しくなります。
画像の枚数が増えて表示速度が遅くなりやすい
スライドショーは複数の画像を読み込むので、1枚の画像だけのトップページよりもデータ量が大きくなります。
ファーストビューに使う画像は大きなサイズで作ることが多く、枚数が増えるほどトップページが表示されるまでの時間が長くなりやすくなります。表示が遅いと、ユーザーは内容を見る前に戻るボタンを押して別のホームページへ移ってしまいます。
表示速度は検索順位を決める要素の1つでもあるので、スライドショーの画像が重いとSEOにも悪い影響が出る可能性があります。
ホームページ制作でスライドショーを使うときに決めること
スライドショーは、使い方を細かく決めておくことでデメリットを小さくできます。ここでは、ホームページ制作でスライドショーを使うときに決めることを紹介します。
スライドの枚数
スライドの枚数は、トップページで伝えたい内容の数から決めます。
主要なサービスが3つある会社なら3枚、雰囲気を伝える写真と看板商品を見せたい店舗なら2〜3枚のように、1枚に1つの内容を割り当てる考え方です。スライドショーの枚数は3〜5枚程度にするのが一般的で、それ以上増やすと最後のスライドまで見るユーザーがほとんどいなくなり、読み込む画像も増えて表示速度が落ちます。
載せたい内容が多い場合は、ホームページ制作の段階で優先順位をつけ、スライドショーで見せる内容を絞り込むことが大切です。
スライドが切り替わる速さ
スライドが切り替わる速さは、1枚が表示されている時間と、次のスライドへ移るときの演出の2つで決まります。
1枚あたりの表示時間は4〜6秒程度が多く、キャッチコピーを読み終える前に切り替わると内容が伝わらず、長すぎると2枚目に進む前にユーザーがスクロールしてしまいます。キャッチコピーの文字数が多いスライドや、高齢のユーザーが多いホームページでは、表示時間を少し長めにすると読みやすくなります。
切り替わりの演出は、画像がふわっと入れ替わるフェードや横にスライドする動きなどがあり、ホームページ全体のデザインの印象に合わせて選びます。
スライドを操作するボタンを付けるか
スライドショーには、前後のスライドへ移動する矢印、何枚目かが分かるドット、自動の切り替えを止める一時停止ボタンなどを付けられます。
操作ボタンがないと、ユーザーは見逃したスライドに戻れず、キャッチコピーを読みたいときにも切り替わるのを待つしかありません。アクセシビリティのガイドラインでも、自動で動き続ける表示にはユーザーが止める方法を用意することが求められています。
スマホでは指で左右にスワイプして操作できるようにしておくと、矢印が小さくて押しにくいという問題も防げます。
各スライドに載せる画像とキャッチコピー
各スライドに載せる画像とキャッチコピーは、1枚で伝える内容を1つに絞ったうえでセットで決めます。
新築の住宅を紹介するスライドなら完成した外観の写真と注文住宅の強みを伝えるキャッチコピー、店舗の雰囲気を伝えるスライドなら内装の写真と居心地のよさを伝えるキャッチコピーのように、画像と言葉の内容をそろえることで1枚ごとのメッセージがはっきりします。
スライドごとに写真の明るさや色味、キャッチコピーの文字の大きさや位置がばらばらだと、切り替わるたびに別のホームページのように見えてしまうので、トーンをそろえることも決めておきます。
各スライドから移動するリンク先
スライドショーを見て興味を持ったユーザーが、そのまま詳しい内容を確認できるように、各スライドから移動するリンク先を決めます。
サービスを紹介するスライドならそのサービスのページ、キャンペーンのスライドならキャンペーンの詳細ページへつなげるのが基本です。スライド全体をリンクにするか、詳しく見るなどのボタンを置くかも合わせて決めておくと、ユーザーがクリックできる場所に迷いません。
リンク先がないスライドを作る場合は、クリックできそうに見えるボタンを置かないようにして、押しても何も起きないとユーザーが戸惑う状態を避けます。
トップページにスライドショーを使うときの注意点
スライドショーは作り方しだいで、ユーザーに内容が伝わらないトップページになってしまいます。ここでは、トップページにスライドショーを使うときの注意点を紹介します。
画像の中に文字を入れすぎない
スライドショーの画像にキャッチコピーや説明文をたくさん入れると、PCでは読めても、スマホで画像が縮小されたときに文字が小さくなり、ユーザーが読めなくなります。スライドは数秒で切り替わるので、文字が多いと読み終わる前に次のスライドへ移ってしまい、伝えたい内容が最後まで届きません。
文字が画像の大部分を覆うと、写真で見せたい商品や店舗の雰囲気も見えにくくなります。スライドの画像に入れる文字は短いキャッチコピーなど最低限に絞り、詳しい説明はスライドから移動するリンク先のページで伝えることが大切です。
スマホで画像が切れずに表示されるか確認する
スライドショーの画像を枠いっぱいに表示する作り方では、PCで横長に見える画像も、スマホでは縦長の画面に合わせて左右が切れて表示されます。
人物の顔や商品が画像の端に写っていると、スマホでは見せたい部分が画面から外れてしまうことがあります。画像の幅を画面に合わせて縮小する作り方なら切れることはありませんが、画像全体が小さくなり、写っているものが見えにくくなります。
ホームページ制作の段階で、スマホでスライドショーがどう表示されるかを実際の端末で確認し、見せたい部分が中央に収まる画像を選ぶか、スマホ用に別の画像を用意するかを検討します。
重要な情報をスライドショーの中だけに載せない
スライドショーに載せた内容は、トップページを訪れたすべてのユーザーに見られるとは限りません。
サービスの紹介やキャンペーンの告知など問い合わせにつながる重要な情報は、スライドショーだけでなく、トップページの本文やメニューからも見られるようにしておきます。スライドで紹介した複数のサービスをファーストビューの下にサービス一覧として並べておけば、スライドを見逃したユーザーにも必要な情報が届きます。
営業時間の変更や休業日のお知らせのように、見落とされると困る情報は、新着情報など確実に目に入る場所へ載せることが大切です。
当社がホームページ制作でスライドショーを導入した事例
当社では、ホームページ制作でアピールしたい内容が複数あるお客様に、トップページのスライドショーを提案しています。複数のサービスや商品を持つ会社では、ファーストビューを1枚の画像に絞ると、ほかの内容をトップページの上部で見せられません。スライドショーを使えば、同じスペースで複数の内容を順番に紹介できます。
ただし、スライドショーの2枚目以降は、見てもらえたらよいという位置付けで考えています。トップページを開いてすぐにスクロールするユーザーも多く、すべてのスライドが見られるとは限りません。そこで、お客様がしっかり見てほしい内容は1枚目に載せるよう提案しています。
あわせて、スライドが切り替わる速さをターゲットに合わせて調整し、ユーザーが見たいスライドに戻れるよう操作するボタンも設置しています。
スライドショーを導入したあと、トップページから下層ページへの誘導率の向上や直帰率の低下といった数値の変化は見られませんでした。それでも、お客様はスライドショーを入れたトップページを非常に気に入っており、当社としては良い結果だと感じています。
スライドショーは、ホームページ制作の費用がそこまで高くなる機能ではありません。お客様が自分のホームページを気に入ると、新着情報やスライドの更新にも前向きになり、更新頻度にも良い影響が出ます。数値だけでは測れない効果も含めて、スライドショーを導入して良かったと考えています。
まとめ
トップページのスライドショーは、どのホームページにも必要なものではありません。アピールしたい内容が複数ある会社には有効ですが、2枚目以降は見られにくいことを前提に、枚数や1枚目に載せる内容を決めることが大切です。
当社では、ヒアリングでホームページの目的やアピールしたい内容を確認したうえで、スライドショーを使うかどうかから提案しています。スライドショーを使う場合も、ターゲットに合わせて切り替わる速さや操作するボタンまで調整します。トップページのデザインに迷っている、ホームページのリニューアルを考えているといったお悩みがあれば、お気軽にご相談ください。
