スライダーはWebサイトのコンテンツを見せる上でよく活用されているデザイン構成です。
ウェブサイト上で複数のメッセージや画像を効果的に表示し、また、自動で動く特性があるためユーザーの関心を引き付けます。
本記事では適したコンテンツや利用する際の注意点などもまとめながらスライダーについてご紹介していきたいとおもいます。
スライダーとはコンテンツを切り替えて表示させる仕組み
Webサイトのスライダーは、Webサイト上でのスライドショーを表す単語で、
複数の画像、テキスト、ビデオなどのコンテンツを一定の時間間隔で切り替えて表示する仕組みです。
一般的には水平方向にスライドする形式で表示されますが、縦方向や斜め方向にスライドするデザインもあります。
スライダーのメリット
スライダー型のコンテンツを活用する一番のメリットとしては、少ないスペースで複数の情報をコンパクトに表示できることが挙げられます。特集記事やプロモーション情報をスライドで切り替えることで、多くの情報を伝えることができます。
- 限られたスペースでコンテンツの紹介できる
- コンテンツを目立たせることができる
- ユーザがスクロールする必要なく、閲覧ができる
スライダー型の利用が適しているコンテンツ
スライダー型のコンテンツは、Webサイトで広範な情報を効果的に表示するための優れたツールです。以下に、スライダー型のコンテンツが適している場合とその理由をいくつか説明します。
複数のメッセージをコンパクトに伝えたい場合
限られたスペースで複数のメッセージや画像を表示するのに適しているスライダーは、自動スライドとユーザーが操作して各スライドを見ることができ複数の情報を少ないスペースでに伝えることができます。例えば、紹
介したい商品やサービスが多くある場合・特集記事やプロモーション情報などです。
目立たせたいコンテンツがある場合
ユーザの目を引くための重要な情報を強調するのに役立ちます。また
目立たせたいコンテンツをスライダーの最初に配置することができます。ユーザーはスライダーを見たときに目立つコンテンツに注目しやすくなります。
視覚的な要素を活用したい
商品やプロジェクトのポートフォリオ、観光地の写真など、
画像やビデオを魅力的にスライダーで表示する事により、ユーザーの興味を喚起することができます。
スライドを上手に活用したデザイン事例
HugMug
親子で楽しむファッションやライフスタイル情報をWeb・雑誌で紹介するサイトです。ウィンドウを開くごとにサイトのメインカラーが変化します。カード型
記事を2列にまとめ、わかりやすく伝わるデザインにまとめられています。
出典:https://hugmug.jp/
おかねチップス|お金と仕事のTIPSをサクサク検索
フリーランスや副業で働く方々に向けて、お金や仕事、働き方に関する役立つ情報を紹介するサイトです。トップにピックアップ記事をスライドさせる動きが特徴的です。イエローとブルーの
アクセントカラーがポップでインパクトのあるデザインに生かされています。
出典:https://okanechips.mei-kyu.com/
大分移住手帖
Wellulu (ウェルル) – 気づいたら、ウェルビーイング
ウェルビーイング傾向の診断コンテンツや多様なウェルビーイングを促進する情報を集めたWebメディアです。トップはスライドに合わせて記事のサイズが変化する動きが特徴的です。
PCはスライド、スマホは整列など、コンテンツによって効果的なデザインされています。
出典:https://wellulu.com/
ここち | デザインパートナー
ロゴデザイン、各種グラフィック、web、サイン計画などをデザインパートナーとして活動するデザイナーのサイトです。PC、スマホ共に縦×横のスライドが生かされています。カード型の記事は
ホワイト系を基調とした、丸みのあるデザインが柔らかで優しい印象です。
出典:https://cocochi.design/
ひろしま公式観光サイト Dive! Hiroshima
BIG UP!zine
社会福祉法人 愛和会
兵庫・大阪3拠点を中心に介護・福祉事業に取り組んでいる福祉サイトです。トップは写真メインのコンテンツ見出し記事がスライドされます。正しい情報、
わかりやすく伝えるため、明解でシンプルにまとめ<られています。
出典:https://swc-aiwakai.jp/
読むふるさとチョイス
地域のチャレンジを応援し、新しい取り組みを伝えるWebマガジンサイトです。
ピックアップされた20記事以上がスライドさせる動きが特徴的です。PCサイトはカーソルに合わせて動きがあり、スマホサイトはコンテンツごとに記事の整列を変化、あしらいを生かしたユニークなデザインで表現されています。
出典:https://yomu.furusato-tax.jp/
LIONS GOOD NEWS 2020
スライダーのデメリット
スライダーを使用する場合には、いくつかの注意点もあります。
たとえば、スライダーのナビゲーションやコントロールがユーザーフレンドリーで直感的に操作できるように考慮したり、また、画面幅が狭いモバイル時にどうするかデザイン設計する必要があります。
スライダーが適している場合でも、以下の点に留意して導入を進めましょう。
- スライダー内の全てのコンテンツを見てもらえない
- ページの速度を低下させる可能性がある
- スライダーを使うと強調したいポイントがぼやける
Yuka Fujimoto
美大にいた頃に画面ひとつで世界中の人と繋がれるWebの機能性やデザインへ興味を持つ。インターンを経てIT企業へ就職後、そこで出会った小日向とKOHIMOTOを立ち上げる。ズーキーパーが得意。
