MENU
CLOSE
デザイン Edit : 2023.06.22 Update : 2024.11.07

Webサイトでスライダー(カルーセル)を利用すると良い場面・デザインについて

スライダーはWebサイトのコンテンツを見せる上でよく活用されているデザイン構成です。
ウェブサイト上で複数のメッセージや画像を効果的に表示し、また、自動で動く特性があるためユーザーの関心を引き付けます。

本記事では適したコンテンツや利用する際の注意点などもまとめながらスライダーについてご紹介していきたいとおもいます。


スライダーとはコンテンツを切り替えて表示させる仕組み

Webサイトのスライダーは、Webサイト上でのスライドショーを表す単語で、複数の画像、テキスト、ビデオなどのコンテンツを一定の時間間隔で切り替えて表示する仕組みです。
一般的には水平方向にスライドする形式で表示されますが、縦方向や斜め方向にスライドするデザインもあります。

スライダーのメリット

スライダー型のコンテンツを活用する一番のメリットとしては、少ないスペースで複数の情報をコンパクトに表示できることが挙げられます。特集記事やプロモーション情報をスライドで切り替えることで、多くの情報を伝えることができます。

  • 限られたスペースでコンテンツの紹介できる
  • コンテンツを目立たせることができる
  • ユーザがスクロールする必要なく、閲覧ができる

スライダー型の利用が適しているコンテンツ

スライダー型のコンテンツは、Webサイトで広範な情報を効果的に表示するための優れたツールです。以下に、スライダー型のコンテンツが適している場合とその理由をいくつか説明します。

複数のメッセージをコンパクトに伝えたい場合

限られたスペースで複数のメッセージや画像を表示するのに適しているスライダーは、自動スライドとユーザーが操作して各スライドを見ることができ複数の情報を少ないスペースでに伝えることができます。例えば、紹介したい商品やサービスが多くある場合・特集記事やプロモーション情報などです。

目立たせたいコンテンツがある場合

ユーザの目を引くための重要な情報を強調するのに役立ちます。また目立たせたいコンテンツをスライダーの最初に配置することができます。ユーザーはスライダーを見たときに目立つコンテンツに注目しやすくなります。

視覚的な要素を活用したい

商品やプロジェクトのポートフォリオ、観光地の写真など、画像やビデオを魅力的にスライダーで表示する事により、ユーザーの興味を喚起することができます。

スライドを上手に活用したデザイン事例

HugMug


親子で楽しむファッションやライフスタイル情報をWeb・雑誌で紹介するサイトです。ウィンドウを開くごとにサイトのメインカラーが変化します。カード型記事を2列にまとめ、わかりやすく伝わるデザインにまとめられています。
出典:https://hugmug.jp/
 

おかねチップス|お金と仕事のTIPSをサクサク検索


フリーランスや副業で働く方々に向けて、お金や仕事、働き方に関する役立つ情報を紹介するサイトです。トップにピックアップ記事をスライドさせる動きが特徴的です。イエローとブルーのアクセントカラーがポップでインパクトのあるデザインに生かされています。
出典:https://okanechips.mei-kyu.com/
 

大分移住手帖


大分県への移住を応援するウェブマガジンサイトです。コンテンツごとに区切りラインを生かし、スッキリ整えられたシンプルで統一感のあるデザインで表現されています。
出典:https://oita-ijyutecho.com/

Wellulu (ウェルル) – 気づいたら、ウェルビーイング


ウェルビーイング傾向の診断コンテンツや多様なウェルビーイングを促進する情報を集めたWebメディアです。トップはスライドに合わせて記事のサイズが変化する動きが特徴的です。PCはスライド、スマホは整列など、コンテンツによって効果的なデザインされています。
出典:https://wellulu.com/
 

ここち | デザインパートナー


ロゴデザイン、各種グラフィック、web、サイン計画などをデザインパートナーとして活動するデザイナーのサイトです。PC、スマホ共に縦×横のスライドが生かされています。カード型の記事はホワイト系を基調とした、丸みのあるデザインが柔らかで優しい印象です。
出典:https://cocochi.design/

ひろしま公式観光サイト Dive! Hiroshima


広島県周辺地域の魅力的な観光・旅行情報をお届けする公式サイトです。コンテンツごとに記事をスライド、整列など変化させた構成が特徴的です。カード型記事のあしらいが統一感あるデザインに表現されています。
出典:https://dive-hiroshima.com/

BIG UP!zine


アーティスト,ファン,クリエーターをつなぐwebマガジンサイトです。トップに30記事以上スライドさせる動きが特徴的です。コンテンツごと記事が整列構成され、配置バランスがよくまとめられています。
出典:https://big-up.style/zine/

社会福祉法人 愛和会


兵庫・大阪3拠点を中心に介護・福祉事業に取り組んでいる福祉サイトです。トップは写真メインのコンテンツ見出し記事がスライドされます。正しい情報、わかりやすく伝えるため、明解でシンプルにまとめ<られています。
出典:https://swc-aiwakai.jp/

読むふるさとチョイス


地域のチャレンジを応援し、新しい取り組みを伝えるWebマガジンサイトです。ピックアップされた20記事以上がスライドさせる動きが特徴的です。PCサイトはカーソルに合わせて動きがあり、スマホサイトはコンテンツごとに記事の整列を変化、あしらいを生かしたユニークなデザインで表現されています。
出典:https://yomu.furusato-tax.jp/
 

LIONS GOOD NEWS 2020


世界最大規模の広告・コミュニケーションフェスティバルのPR10年を記念して作られたサイトです。トップはピックアップされた記事をアーチ型にスライドさせる動きが特徴的です。記事ごとに背景色を変え、明解なデザイン構成されています。
出典:https://cannesprlions.com/lionsnews/

スライダーのデメリット

スライダーを使用する場合には、いくつかの注意点もあります。 たとえば、スライダーのナビゲーションやコントロールがユーザーフレンドリーで直感的に操作できるように考慮したり、また、画面幅が狭いモバイル時にどうするかデザイン設計する必要があります。 スライダーが適している場合でも、以下の点に留意して導入を進めましょう。

  • スライダー内の全てのコンテンツを見てもらえない
  • ページの速度を低下させる可能性がある
  • スライダーを使うと強調したいポイントがぼやける

Yuka Fujimoto

美大にいた頃に画面ひとつで世界中の人と繋がれるWebの機能性やデザインへ興味を持つ。インターンを経てIT企業へ就職後、そこで出会った小日向とKOHIMOTOを立ち上げる。ズーキーパーが得意。