デザイナーがよく使うスクロールダウン 7選
スクロールダウン取り入れてますか？
今回はスクロールダウンについてご紹介したいと思いますが、みなさんは使ったことはありますか？
スクロールダウンは最近のWEBデザインでよく見かけるようになった機能ですね。
スクロールダウンにもアニメーションを使ったものが多く、訪問者を誘導するのにとても効果的です。
WEBサイトはスクロールさせることが難しく、訪問者がファーストビューで離脱してしまうことも多いです。
まだ取り入れたことのない方は、積極的に取り入れていきましょう。
スクロールダウンとは
まずは、スクロールダウンについて簡単に解説したいと思います。
表示されている画面の下側に誘導したい時に、下側に移動させることを「スクロールダウン」と言います。
最近のデザインはファーストビューを画面いっぱいに表示するものが主流になっているため、下側にもコンテンツがあることを訪問者に知らせるためにも設置されていることが多いです。
このスクロールダウンが設置できると、デザインの幅も広がるので実装していきましょう。
よく読まれている記事
縦線を動かしたスクロールダウン
縦線が上から下にスマートに動くアニメーションです。
できるだけデザインを邪魔しないように文字も縦向きになっています。
SCROLLの文字をクリックすると、意図したページにジャンプさせることもできます。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
黒丸を動かしたスクロールダウン
黒丸が縦線をなぞるように動くアニメーションです。
丸がスマートに下へ誘導するデザインは人気のスクロールダウンです。
ページの端に表示させるのもおしゃれです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
下矢印を動かしたスクロールダウン
下矢印がふわふわ動くようなアニメーションです。
矢印があるので視覚的に誰でも下に何かあることがわかるようになっています。
サイズも小さめなので、どこにでも設定できて便利です。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
下矢印と丸でできたスクロールダウン
丸の中の下矢印ちょんちょんと動くようなアニメーションです。
他のアニメーションに比べて動いてる箇所が少ないので、他のデザインを邪魔したくない時におすすめです。
丸があることでボタンの役割もあるため、クリックしやすいこともメリットです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
マウスのようなスクロールダウン
マウスの中の丸が下に動くようなアニメーションです。
このブログのフッターにも使用しているように、丸の動く向きを変えてスクロールアップにも使用できます。
デザインもおしゃれですが、ボタンのようにも見えるので視覚的にもわかりやすくておすすめです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
波紋が広がるスクロールダウン
矢印のまわりに波紋が広がっているようなアニメーションです。
シンプルな動きですが、動く部分が大きいので訪問者の目を引いてくれます。
スクロールを確実にしてほしいときにおすすめです。
See the Pen 矢印が上から下に順番に流れ続けるようなアニメーションです。 上から下に動く事で、下の方に動かせるイメージを伝える事ができます。 メインビジュアルの隙間が気になる時に、重宝しそうなデザインです。
See the Pen よく読まれている記事 今回はスクロールダウンについてのアニメーションをご紹介しました。 ご紹介したデザインはよく使うものを厳選しましたので、仕事で使えるものばかりだと思います。 ファーストビューがなんとなく物足りない時にもかなり役立ちます！ スクロールダウンはアニメーションしていないものも多いですが、目立たせてスクロールしてもらうためにも動きを加えて実装してみてください♪ 最後までご覧いただきありがとうございました☆彡
Untitled by loa (@hana4525)
on CodePen.
矢印が流れ続けるスクロールダウン
Untitled by loa (@hana4525)
on CodePen.
まとめ
関連するタグ
