メインビジュアルに使えるスクロールボタン7選 – CodePen

site-mainvisual

最近、ブラウザいっぱいにメインビジュアルを表示するウェブデザインが増えてきています。そのデザインにで必要になるのが、「この下にまだコンテンツが続きますよ」と教えてくれるスクロールボタン。下矢印が一般的ですが、他にどんな表現があるのか、CodePenの中にある作品をまとめてみました。

控えめなアニメーションのシンプルなボタン

See the Pen Scroll Down Arrow by Peter McGriff (@pmcgriff) on CodePen.


SVGとCSSアニメーションで再現されたボタン。シンプルな動きで使い勝手がよさそうです。

スクロールするとフワッと消えるボタン

See the Pen Scroll Arrow by robooneus (@robooneus) on CodePen.


矢印が画面外に出そうになった時に、自然に消えていきます。消える動きはjavascriptで実装されています。

下から食い込んだスタイリッシュなボタン

See the Pen Scroll Down Animation by Alex (@akwright) on CodePen.


鋭角なデザインが特徴的です。すべてCSSで作成されています。

ネオンのように光るボタン

See the Pen svg scroll down arrow by junjun (@postor) on CodePen.


サイバーな雰囲気のするデザインです。すべてCSSで作成されています。

かわいらしくはねるボタン

See the Pen Scroll down by Wojtek Tymicki (@panweb) on CodePen.


ぽよんぽよんと跳ねる動きが、とってもかわいいボタン。すべてCSSで作成されています。

マウスをモチーフにしたボタン

See the Pen Animated Mouse-scroll Down Button by Sven (@svenschebaum) on CodePen.


マウスのスクロールボタンのようなデザインで直感的なインフォグラフィック。すべてCSSで作成されています。AWWWARDなど最近ノミネートする作品でよくみる表現です。

セクションごと移動する機能に変化するボタン

See the Pen Scroll Down Page Button by Graham Clark (@Cheesetoast) on CodePen.


最後は変わり種。メインビジュアルをすぎると右側に移動し、セクションをスキップするボタンに変化します。

ところでこのパーツなんて呼ぶの?

色々なパターンがあるので、自分がデザインするときの参考になりそうです。
ところで「この下にまだコンテンツが続きますよ」と教えてくれるボタン。一般的になんと呼ぶんでしょうね。
日本語でも英語でもこれと言った言葉がみつからなくて困りました。ちなみに一番多かった表現は「Scroll Down Button」でした。なので今回は「スクロールボタン」と呼んでみました。

ウェブデザインの本


少ないページ数に内容がぎっしりつまっているので、概要を掴むのにもってこいの「プロとして恥ずかしくない」シリーズ。ウェブの最新号が現在予約受付中みたいです。

  • このエントリーをはてなブックマークに追加
« »

経営者と経営者の妻が沖縄で楽しく生きるためのアレコレ デザイン・カメラ・ロードバイク・旅・畑

© 2017 やまぐち家の生態