Blog
Webデザイン

Webデザインの参考にしたい遊び心あふれる「ページトップ」ボタン9個

2013-09-06 15:30
この記事は約 3 分で読めます。

Webサイトを閲覧中に、ページ上部に戻るための「ページトップ(スクロールトップ)」ボタン。ページの機能としての重要性は低く、あまり目立たない(目立たせない)ものです。そんな中でも、おっと思わせる遊び心のあふれる「ページトップ」ボタンをご紹介します。

ページトップ(スクロールトップ) ボタン

女子旅つくるプロジェクト|JTB × KOBE COLLECTION / TOKYO RUNWAY

pagetop-design01
http://jtpj.jp/
旅のサイトということで、滑走路と雲が現れ、飛行機が離陸します。

台東区でウェブ制作なら 株式会社LIG [リグ]

pagetop-design02
http://liginc.co.jp/
凄い勢いで飛び出るアニメーションは、広告バナー付き。

ブランディング、デザイン|アートディレクションカンパニーDONGURI

pagetop-design03
http://www.don-guri.com/
一見、普通のボタンですがクリックすると、どんぐりのキャラクターに変身して飛び上がります。

東京スカイツリー TOKYO SKYTREE

pagetop-design04
http://www.tokyo-skytree.jp/
ページのガイドを務めたソラカラちゃんが、スカイツリーのてっぺん目指して飛びあがります。

福岡市西区拾六町の動物病院|16動物病院

pagetop-design05
http://16animal.com/
数字の3をモチーフとしたコアラ(?)が木をしがみ付きます。

猫本専門書店 書肆 吾輩堂

pagetop-design06
http://wagahaido.com/
猫の手が出てきて、必死によじ登ろうとします。

株式会社博報堂DYインターソリューションズ

pagetop-design07
http://www.hakuhodody-inter.co.jp/
ドアを開けると、ページトップへ繋がるエレベーター(?)

uno | 資生堂

pagetop-design08
http://www.shiseido.co.jp/uno/index.html
スプレーの噴射力でスクロールします。

格安ホームページ作成サービスなら「グーペ」お試し無料!

pagetop-design09
こんなに簡単!店舗向けホームページがすぐ始められる「グーペ」[AD]
その乗り物は・・・

おわりに

いかがでしたでしょうか。なかなか力を入れて作る機会もないかもしれませんが、こういった細部にこそ、制作者の腕の見せ所と言っていいかもしれませんね。
上記で紹介した以外にも、「こんなのあるよ」など、twitterやFacebookでご紹介いただけると嬉しいです。

> > >
あわせて読みたい