CREATOR BLOG

イケてる「ページトップへ戻る」ボタンサイトを集めてみた

2014/08/07
タムラ
  • このエントリーをはてなブックマークに追加

最近は応援してるJリーグサッカーチームが
好調で喜びのあまりお酒が止まらないタムラです。

そして、夏になると音楽フェスに海にBBQに楽しみが尽きないですね。
年甲斐なく焼けてしまうので今年から日焼け止めをぬりたくってます。
(可愛い日傘があれば購入を検討中)

今回はかわいいページトップのうごき
おもしろいものデザインテイストが素敵なものなどを紹介したいと思います。

ページの上部に戻るタイミングでアニメーションっぽい表現

ページトップ(back to top)ボタンをクリックした後にアニメーションっぽく表現される3サイト紹介します。

1.webleeddesign http://www.webleeddesign.com/

pagetop_01

2.janploch http://www.janploch.de/

TOPに戻るタイミングで水が満タンになっていくアニメーションがとても可愛いです。
pagetop_03

3.More Hazards More Heroe http://morehazards.com/

ページトップに戻ってる途中に背景のフワってする動きが素敵です。

pagetop_02

 動きが凝っている

ボタンを押した時の動きが面白いサイト5サイト紹介します。

1.株式会社LIG http://liginc.co.jp/

とっても激しく動きます。こだわりまくってます!一瞬しか表示されない広告枠をなんとしてもクリックしたくなりますね。面白い発想です。
pagetop_04

2.エアリーカールマスカラ スーパーフィルム http://www.isehan.co.jp/heroine/superfilm_mascara/

かわいい猫ちゃんがページトップまで誘導してくれます。
pagetop_05

 3.ロマンシング佐賀 http://romasaga.jp/

サイトもとてもおもしろいのですがページトップボタンを押した時の動きにびっくりします。footer付近の火のアイコンをクリックしてみてください。全力でページトップへ戻ります!pagetop_06

 4.東京スカイツリー TOKYO SKYTREE http://www.tokyo-skytree.jp/

ソラカラちゃんと一緒にスカイツリーを登るようにしてページトップします。かわいい!!
pagetop_07

 5.JTB 女子旅つくるプロジェクト http://jtpj.jp/

ページTOPのボタンが滑走路になってますね。さすがJTB。面白いのでぜひ見てみて下さい。
pagetop_08

 ギャグが織り交ざってる

ギャグっぽい上の戻るボタンをおいているサイト3サイト紹介します。
斬新なPAGE TOPボタンです。

1.分かりすぎて困る!頭の悪い人向けの保険入門 http://hokensc.jp/kikaku/atama_warui.html

バーグハンバーグバーグが制作されてる、とっても保険のことが学べるサイト←
ページトップボタンにちょっとイラッとします(笑)
pagetop_09

 2.Mutations Studio http://www.mutationsltd.com/

したまでスクロールすると宝箱を発見できます。その中空ページトップボタンを発見できればいいのですが・・・・
pagetop_10

3.オモコロ あたまゆるゆるインターネット  http://omocoro.jp/

動きが斬新すぎる!さすがバーグハンバーグバーグ!!!
pagetop_19

デザインが凝っている

デザインが可愛いサイトを紹介します。キャラクター使用していたり、サイトコンセプトにマッチしているページトップボタンをみると「おっ!」っと思いますね。
ちょっとした動きをつけたりデザイン性を持たせることでさらにこだわったサイト作りができるのではないでしょうか??
pagetop_15

動きを実装できる参考プラグイン

どうでしたでしょうか?デザイナーさんがコーディング部隊に依頼するときに参考サイトのような動きを指示してあげてもいいですね。
一部に動きやちょっとした遊び心を見せてあげることでより楽しいサイトがつくれますね★
多いのはスクロールしたら固定位置に表示させてあげるようなサイトがとても多かったですよー!

Recent Entry

CSSの単位まとめ pxからvm/vh/vmin/vmaxまで

レスポンシブHTMLメールを作ってみての感想

CSSのリファクタリングでした5つのこと

大人が読んでも頭を使う絵本の紹介

サイト内にうまくInstagramを取り入れてるサイト11選

Category

Archive