ユニークな「ページの先頭へ」や「ページトップ」の実装例 10

ユニークな「ページの先頭へ」や「ページトップ」の実装例 10

そのページの先頭へ移動する要素として設置しているところも多い「ページの先頭へ」や「ページトップ」がユニークなサイトのショーケースです。コーポレートサイトのような堅めのデザインをする場合は凝り過ぎると浮いてしまう場合があるのでシンプルなものを使用することが多いと思いますが、ちょっとしたキャンペーンページやイラストをふんだんに使っているようなサイトであれば、こういった細かいところにも動きを付けてあげると遊び心があって面白いですね。

2014年4月19日 追記
他にもユニークなものがあると教えていただいたので、3サイト追加しました。

株式会社LIG [リグ]

株式会社LIG [リグ]

※注意:効果音が出ます

「ページの先頭へ」や「ページトップ」の要素がどうののレベルではなく、クリック後の動作など全体的に非常にユニークで、むしろこだわり過ぎと思うくらい凝ってます。

株式会社LIG [リグ]

少しスクロールすると画面右下に人物が現れ、それがページの先頭へ移動する要素になっています。
少し話題にもなったので見たことある方も多いと思いますが、クリックすると画面が揺れ始め、効果音付きで要素とともにページの先頭へとスクロールされます。
また、この要素には広告を表示させており、依頼すれば広告掲載もしてもらえるようです。

【特設視聴サイト】無料WEBドラマ『世界一即戦力な男』

【特設視聴サイト】無料WEBドラマ『世界一即戦力な男』

※注意:効果音が出ます

【特設視聴サイト】無料WEBドラマ『世界一即戦力な男』

少しスクロールすると画面右下に隕石のような物体が現れ、それがページの先頭へ移動する要素になっています。
こちらも先ほどのものと同様で、クリックすると効果音付きで要素とともにページの先頭へとスクロールされ、移動した後にも仕掛けがあります。

DONGURI

DONGURI

※注意:各要素のマウスオン時に効果音が出ます

DONGURI

少しスクロールすると画面右下現れるアローボタンがページの先頭へ移動する要素になっており、この時点ではよく見かけるような感じのものですが、クリックするとそれがアニメーションしながらドングリのキャラクターに変化し、その要素とともにページの先頭へとスクロールされます。

東京スカイツリー TOKYO SKYTREE

東京スカイツリー TOKYO SKYTREE
東京スカイツリー TOKYO SKYTREE

ページをスクロールしていくとページ上でふわふわと浮かんでいたりポイント毎にポーズを変えたりするソラカラちゃんが下部までいくとページの先頭へ移動する要素になり、クリックするとソラカラちゃんが上昇しつつページの先頭へとスクロールされます。
また、下層でも同じくソラカラちゃんがページの先頭へ移動する要素になっていますが、トップとはまた違う動きとなっています。

女子旅つくるプロジェクト

女子旅つくるプロジェクト
女子旅つくるプロジェクト

旅行に関連するサイトなので、フッター手前(ページ右側)にある滑走路がページの先頭へ移動する要素になっています。
マウスオンでその滑走路が伸び、クリックすると飛行機が出現して飛んでいくというアニメーションをしながらページの先頭へとスクロールされます。

たかみ幼稚園

たかみ幼稚園
たかみ幼稚園

ページ下部にいる風船を持った男の子がページの先頭へ移動する要素になっており、クリックすると風船の力で飛んでいくようなアニメーションをしながらページの先頭へとスクロールされます。

レンタルサーバー ヘテムル

レンタルサーバー ヘテムル
レンタルサーバー ヘテムル

全体的に宇宙をイメージしたデザインとなっており、ページ下部までいくと出現する宇宙船のようなものがページの先頭へ移動する要素になっています。
クリックすると宇宙船とともにページの先頭へとスクロールされ、そのまま宇宙船はふわっと上に消えていきます。

uno

uno
uno

フッター手前(ページ右側)にある商品がページの先頭へ移動する要素になっており、クリックするとスプレーの噴射力で上に飛んでいるようなアニメーション付きでページの先頭へとスクロールされます。

医療法人 白山歯科クリニック

医療法人 白山歯科クリニック
医療法人 白山歯科クリニック

ページ右下の動物がページの先頭へ移動する要素で、はじめは草むらに隠れていて、マウスオンすると草むらから出てくる感じになっています。
今までのものに比べると動きは非常にシンプルですが、このように要素を少し組み合わせて簡易的なアニメーションを付けるだけでも、ただ置いてあるより可愛らしい感じになります。

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

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

「ページの先頭へ」とはちょっと違う感じもするんですが、デザインの一部にもなっているドアが各セクションに移動するための要素として設置されており、ページ下部のものに関してはページの先頭へとスクロールされる要素となっています。
このデザインだとパッと見でこれがどのような動きをするものかが分かりづらいので、もう少し工夫して設置した方が良いのではないかという気もするんですが、このように隠し要素的な感じで置くのも面白いなと思います。

以上、「ページの先頭へ」や「ページトップ」がユニークなサイトのショーケースでした。
「LIG」のように全体的にこだわっているものもあれば、「女子旅つくるプロジェクト」のようにシンプルながらもサイトに関連するアイテム使ってアニメーション付きで実装するなど、こうやって見るとどれも同じようにページの先頭にいくという動作をするためのものですが、デザインも動きも様々なタイプがあります。
同じようなことを実装しようする場合はそれなりにデザインやプログラミングに時間をかける必要があるものもありますが、「白山歯科クリニック」のように簡易的なアニメーションでもデザインとの組み合わせ方によってはユニークで可愛らしい感じにもできたりもするので、余裕があればこういった遊び心を取り入れていきたいですね :)

簡易的なもの向けではありますが、以下でjQueryを使用してスクロールされたら表示されるページトップの実装方法を幾つかまとめているので、ちょっとしたアニメーションを付けるだけであれば参考にしてみてください。

追記:3サイト追加しました

@OZPAさんからTwitterで教えていただいたものを含め、新たに3サイト追加しました。
いずれも予め表示されているタイプのものです。

KYT 鹿児島読売TV

KYT 鹿児島読売TV
KYT 鹿児島読売TV

ページ右下に予め表示されているクマとヒヨコのキャラクターがページの先頭へ移動する要素になっており、スクロールするとEXILEのようにぐるぐる踊っている動きに見えます。

リノプラ

リノプラ
リノプラ

ページ右上に予め表示されているパラシュート(?)のようなものがページの先頭へ移動する要素になっており、スクロールすると遅れて追従してくるタイプです。

TOKYO NO BORDER FASHION FESTIVAL

TOKYO NO BORDER FASHION FESTIVAL
TOKYO NO BORDER FASHION FESTIVAL

こちらも同じく予め表示されていて、スクロールすると追従してくるタイプです。
ページ右に表示されているハサミがページの先頭へ移動する要素になっており、ファッション関連のサイトというのもあって、スクロールするとページを裁断しているような感じで追従してきます。

Back to Top

ユニークな「ページの先頭へ」や「ページトップ」の実装例 10

ユニークな「ページの先頭へ」や「ページトップ」の実装例 10

/ Inspiration

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。