【webデザイン制作に役立つ】スライダー画像を採用しているサイトのスライダーデザインを調査！

結構悩むスライダーのデザイン

スライダー画像を作る時って、あの小さなキャンバスの中で「テキスト」「デザイン」「配色」「レイアウト」など意外と考えるポイントが多いですよね。

いつもどう作ろう…と悩んでしまいます。

しかも、スライダーのレイアウトってなんだかんだマンネリしがちなんです(^_^;)

ということで、よりスライダー画像作りを上達させるため、スライダーを取り入れているサイトを調査してみました！

①固定キャッチコピー＋画像

こちらの参考サイトはセンターにキャッチコピーがありますが、左や右に固定されていて、その後ろで画像だけが変化するパターンです。

時間も手間もかからずに、おしゃれなサイトにできちゃうのでいいですよね！

済生会熊本病院

済生会熊本病院は、救急医療、高度医療、地域医療と予防医学、医療人の育成を柱に、やさしさとぬくもりのある質の高い医療を患者さんへ提供し、医療を通じて、地域社会に貢献します。

sk-kumamoto.jp

②一部テキストが変わる＋画像

こちらの参考サイトの素敵なところは、右側の画像がスライドされるごとに左側にある「for〇〇」の〇〇部分も同時に変わるんです。

作りはシンプルなので手間はかかりませんが、これだけで遊び心が感じられるサイトに様変わりしますね！

株式会社インターメスティック | INTERMESTIC INC.

【Zoff公式】おしゃれでリーズナブルなメガネをグローバル展開するZoff(ゾフ)の公式企業サイトです。

www.zoff.com

③テキスト＋画像がそれぞれ異なる

ここまで初回してきたのは大体テキストは固定で画像のみスライドのパターンでしたが、こちらの参考サイトは各ページへ飛ばすために１枚１枚オリジナルで作ったスライダー画像を流しています。

このパターンを使うのは、商品の多い会社や飲食系でした。

目的別・用途別・種類別…などカテゴリーが多い場合は、このように１枚１枚その商品にあったキャッチコピーや画像のレイアウトが必要なんですね。

おやつカンパニー(-^〇^-)／

ベビースターでおなじみの“たっぷりたのしい”「おやつカンパニー」オフィシャルサイトです。お楽しみコンテンツやキャンペーン情報・商品のご案内・会社案内等を紹介しています。

www.oyatsu.co.jp

まとめ

今回はスライダーを取り入れているサイトのスライダーデザインについて調査してみました！

調べてみて思ったのは、各サイトの目的によってスライダーのデザインやパターンが決められているということです。

例えばコーポレートサイトなら固定キャッチコピー＋画像でメッセージ性と会社のイメージを全面にアピールしたり、

商品を扱っているサイトならユーザーが各ページへ飛びやすいようにそれぞれデザインを変えリンクを貼ったり。

当たり前のようですが1つ1つにしっかりと意味があり、理にかなった仕組みだなと勉強になりました。