スライダー各種のご案内

皆様、ホームページを作る上で、トップページのスライダーをこうしたいなーというイメージがある方もいるのではないでしょうか？
もしくは、

基本は、

• スライド
• フェード

の２パターンですが、いろんな応用ができるので、基本から応用まで紹介します。

【基本・メインビュー】スライドパターン（１枚ずつ）

スライド表示時間2.5秒、切り替え0.5秒です。

タイトル１、タイトル２とそれぞれ切り替える事ができます。

【基本・メインビュー】フェード

フェード表示時間2.5秒、切り替え0.5秒です。

タイトル１、タイトル２とそれぞれ切り替える事ができます。

少し変更して、メッセージだけずーっと出るようにすることも可能です。

【メインビュー】文字が見やすく！左右に表示したり、ボタンを配置したり…

【応用・トップ】背景やメッセージはそのまま、画像だけスライドするパターンもあります

逆パターンで、人が写っている画像を背景に、メッセージだけをスライダーやフェーズで変更して見せる…というのもあります。

背景ありで中だけスライダー

落ち着いた雰囲気でアピールができます。導入事例やお客様の声のページに誘導するのに使っています。

【ポイント使い】サービスなどの紹介で使うケースも…

個人的には、トップページ上では、商品やサービスなどメインになるものはスライダーにするのはおすすめしません。
（見たい商品やサービスに気づかないと、機会損失！！）

ですが、ブログやコラム等々の下の方で、「こんなサービスやってますよ～」的な感じでちらっと見せて興味を持ってもらう…という手法ではありだと思います。

【ポイント使い】シームレスに動くスライダー

いっぱい事例や写真があるけれど、言葉で書くのが野暮ったい…というケースもあるかと思います。
そんな場合におすすめしたいのがスルスル動くスライダーもありです。スルスル動くので、鬱陶しさがないのに目が行くのが特徴です。

流し読み、流し見で良いものはこれだと自然と目が行きます。

【ポイント使い】もっと強調してきちんと一つずつ見せたいシリーズ

流し見よりも、一つずつちゃんと見てもらいたい！！という場合はこちらのほうがお勧めです。

スライダーアイテムの中心以外が半透明

スライダーアイテムの中心以外が白黒

スライダーアイテムの中心以外をぼかす

スライダーアイテムの中心以外のコントラストを弱める

スライダーアイテムの中心が拡大
(CSSとしては中心以外が縮小)

スライダーアイテムの中心が全表示 下揃え
(CSSとしては中心以外が上余白で下部分が見切れている)

投稿を見せるのもあり！

投稿者プロフィール

越尾税理士法人YFPクレア　SEO/コンテンツ制作担当

入社半年から自社サイトの運営を担当。
最初は300PV、社内の支援も特になかったのですが、コツコツ続けてると手伝ってくれるスタッフも増え、今では月間20,000PVをキープ。
２年目からは求人も自社サイト＋indeedで行う。
１求人当たり20,000円以下で採用ができている。

税理士法人YFPクレアのお客様とお会いして、
中小企業の３大悩みは「お金」「集客」「採用」と気づき、
自社サイトを通じて得られたノウハウを使って、顧問先のお客様やこれから創業されるお客様に貢献したいと思い、ホームページ制作サービスを開始。

最新の投稿

• 2025年4月22日スライダー各種のご案内
• SEOやサイト運営の雑談2023年11月8日Notionで旅行計画！こんな項目を作ってみた！（ハワイ編）
• コンテンツSEO2023年11月7日【実例あり】寄り添う姿勢の新PASONAと旧PASONAの徹底比較
• SEOやサイト運営の雑談2023年10月5日旅行準備にはnotionを活用しまくろう！！