つなweB事例ウォッチング！　スライドショーの活用法が上手なWebサイト事例5選

スライドショーは、スライダーやカルーセルとも呼ばれ、画像など複数の要素を次々に見せていくことができる演出です。Webサイトの表現手法としてはお馴染みのものですが、ちょっと見せ方をアレンジするだけで、ハッとするような演出に変えることができます。今回はそんな印象的なスライドショーの見せ方に成功しているWebサイト事例を5件紹介しましょう。

熊本県にあるリゾートホテルのホームページ。ファーストビューには、複数の動画をスライドショーで配置。ゆったりとした動きの動画が画面いっぱいに表示され、ラグジュアリーで上質なリゾートライフを予感させてくれます。このファーストビューの動画スライドショーは、「コンセプト」や「客室案内」などサイト内のコンテンツとリンクしているのですが、グローバルナビゲーションの強調色がスライドショーに連動して変わるため、表示している動画がどのコンテンツに対応しているかがわかりやすくなっています。トップページをスクロールしていくとさらに複数のスライドショーパーツが並んでいますが、それぞれ静止画をゆっくりと横に動かす演出がラグジュアリー感を高めてくれます。

背景画像がスライドとシンクロ
BCL カンパニー コーポレートサイト
 

コスメ商品の製造・販売を行う企業のコーポレートサイト。トップページの「BRAND」エリアと「NEWS」エリアには、どちらも共通フォーマットのスライドショーパーツが配置されています。このスライドショーは、スライド要素に連動して背景画像も変化する点が見どころ。スライド要素が半透明のボックスになっているため、背景画像の全体像を感じ取ることができます。

 

つなweBエディターの注目ポイント

パーツを半透明にすることで奥行きのあるデザインに

事例詳細はこちら

---

要素を絞った印象的なトップ
POSTAD
 

WEBマガジン「POSTAD」のトップページは、ほぼスライドショーだけのシンプルな構成。創刊号から最新号までを1枚ずつのスライドで誘導しています。PCでアクセスすると、右側半分にイメージビジュアル、左側半分に各号の特集テーマが表示される構成。左側半分はビビッドなグラデーションが敷かれ、隣のイメージビジュアルと組み合わさることで力強い印象が伝わってきます。また、時間によるスライドの自動切り替えをオフにしていることで、最新号にしっかりと誘導したいという意図も感じ取れます。

 

つなweBエディターの注目ポイント

ビビッドなグラデーションと組み合わせた印象的なスライドショー

事例詳細はこちら

---

水面のゆらめきに無常感
FEEL KIYOMIZUDERA
 

「FEEL KIYOMIZUDERA」は、清水寺のさまざまな姿を印象的な写真と文で紹介するWebサイトです。トップページには各記事に誘導するためのスライドショーが画面いっぱいに表示されますが、注目ポイントはトランジション（切り替え）の演出です。水面が激しく揺らめいて、それまで映し出されていた景色が消えてしまうような、独特の演出が施されています。少し物悲しいような無常感が感じられる演出は、ハッとするような写真やサイト全体の雰囲気にピッタリとマッチしています。

 

つなweBエディターの注目ポイント

Webサイト全体の雰囲気を効果的に伝えるトランジションの選択

事例詳細はこちら

---

トップスライドで会社を語る
西口校具製作所
 

黒板やホワイトボードなどを製造・販売する企業のWebサイトです。トップページに表示されるスライドショーは、実に10枚ものスライドが配置されています。1枚1枚にキャプションが添えられており、企業の成り立ちやものづくりの考え方、自社の技術力が語られています。トップページ冒頭のスライドショーにこれだけ多くの枚数を掲載するのは、珍しいパターンではないでしょうか。しかし、会社のコンセプトやメッセージをトップページ内ですべて語りきることで、Webサイト全体の構成や導線は非常にすっきりとしています。

 

つなweBエディターの注目ポイント

シンプルなサイト構成だからこそ活きる情報満載のスライドショー

事例詳細はこちら

---

一口にスライドショーと言っても、その演出にはさまざまなバリエーションがあります。数多くのWebサイトを制作してきた制作会社なら、その演出の引き出しも豊富に持っているはず。企業のブランドイメージやアピールしたい商品などにピッタリの見せ方を提案してくれるはずです。プロの提案を元に意見交換を積み重ね、魅力的なWebサイトを作りあげて行きましょう。