ページトップに飛ぶボタンデザイン 8選
ページトップに一気に飛べる！
今回は押すとページの一番上にビューンとスクロールするボタンをご紹介したいと思います。
ページのどの位置を見ていてもすぐにページ上部に移動したいときにとても便利な機能です。
最近のWEBページではよく使われて、ユーザビリティを上げたい方はぜひ取り入れていきましょう。
今回の実装ではスクロールをした後にボタンが出てくるようなJSアニメーションになっています。
ぱっと見は全て同じように見えますが、どんなボタンが出てくるかスクロールを楽しんでみてください。
それでは一緒に下にスクロールして見ていきましょう。
よく読まれている記事
矢印のページトップボタン①
丸ボタンの中にシンプルな矢印がついたようなアニメーションです。
一番よく見るようなデザインで、今回はテキストを入れましたが無しで使っても大丈夫です。
あまり目立たせたくない時におすすめです。
See the Pen
ボタンアニメーション by loa (@hana4525)
on CodePen.
矢印のページトップボタン②
片方の矢印が消えたような今っぽいデザインのアニメーションです。
あえてボタンっぽくないような矢印で、テキストも縦にすることでモダンなイメージになります。
見た目重視のおしゃれなサイトや美容系などに最適です。
See the Pen
ボタンアニメーション by loa (@hana4525)
on CodePen.
テキストで作るページトップボタン①
丸の中にテキストがあるよく見るようなアニメーションです。
一番わかりやすく無駄な要素がないボタンなので、テキストを好きな文言に変えてみても良いですね。
情報サイトなどのシンプルに文字だけのサイトに合いそうですね。
See the Pen
ボタンアニメーション by loa (@hana4525)
on CodePen.
テキストで作るページトップボタン②
立体的な四角の中にテキストがあるようなアニメーションです。
このボタンもシンプルなデザインですが、影を作ることでよりボタンを強調しています。
スマートな印象があるので、IT関係のデザインに合わせやすそうです。
See the Pen
ボタンアニメーション by loa (@hana4525)
on CodePen.
アイコンで作るページトップボタン①
縦長の四角に丸みのある矢印をいれたアニメーションです。
アイコンにしかないような丸みのある矢印は、優しい雰囲気のあるデザインにできます。
テキストがないのでボタンの背景色を少し強調してみてもいいかも。
See the Pen
ボタンアニメーション by loa (@hana4525)
on CodePen.
アイコンで作るページトップボタン②
飛行機が飛んでいるような遊び心のあるアニメーションです。
下から飛行機がビューン飛んでくることで、ボタンをつい押したくなるようなデザインです。
子ども向けのサイトに設置したら喜ばれること間違いなしですね。
See the Pen
ボタンアニメーション by loa (@hana4525)
on CodePen.
タブの形をしたページトップボタン①
インデックスタグのように出てくるようなアニメーションです。
ノートの横についているようなタグが右からぴょこっと出てくることで、コンテンツを邪魔せず設置できます。
余白があまりないサイトなどにぴったりですね。
See the Pen
ボタンアニメーション by loa (@hana4525)
on CodePen.
タブの形をしたページトップボタン②
半円の中にテキストと矢印を入れたようなアニメーションです。
あまり見ないようなデザインですが、サイズが大きく押しやすいデザインになっています。
お年寄り向けや目が見えにくい方に優しいボタンです。
See the Pen
ボタンアニメーション by loa (@hana4525)
on CodePen.
よく読まれている記事
まとめ
ページトップボタンのデザインをいくつかご紹介しましたが、いかがでしたでしょうか。
ページトップボタンは簡単に便利なサイトにすることができます。
メインの機能ではないので、コンテンツを邪魔しないようにさりげなく設置することが大事です。
今回はある程度スクロールをするとボタンが出てくるようなアニメーションでしたが、フッターに固定して設置する方法もあります。
サイトの用途にあわせて設置する場所やタイミングを調整してみてください。
最後までご覧いただきありがとうございました☆彡