最近縦長のページを見かけることが多くなってきています。
コンテンツをページ分割せずに1ページ完結で見せるサイトもあります。
嘘かホントか、最近では、スクロールよりクリックの方がユーザーにとっては負担になるということも聞きます。
スクロールの方が確かに楽な気がしますね。
さらにそのスクロールに合わせて、コンテンツを動かしたり、メニューが変化したり、
といったアニメーションを加えてリッチなサイトにしているのも増えてきています。
今回はそんなサイトを紹介したいと思います。
ソフラン｜ライオン株式会社
いわゆるランディングページみたいな感じで展開してます。
スクロールによって、キャラクターが動きます。
メニューも上部に固定されていて、縦長のサイトでは、上部もしくはサイドに固定するのが、オーソドックスかもしれません。
渋谷ヒカリエ/Shibuya Hikarie
来週オープンとなる渋谷の新しい買い物スポットです。
かのDeNAもここにいるそうで。。。
このサイトはスクロールするとフロアごとの説明がしたからでてきて、
それと同時に背景のビルの写真も下から上へと動いています。
実際の所、あまりwebに詳しくないユーザーはこのサイトを見て、
どういう反応をするのか気になります。
WEB SMILE 笑顔咲かせるライフスタイル情報マガジン
1ページ完結型で、スクロールすると、背景の雲なんかが動いたりします。
マウスホイールではなく、スクロールバーで動かすと、よりわかると思います。
メニューボタンを押した時の動きがいい感じですね。
キヤノン：一枚からのECO。
こちらはメニューがスクロールすると、上部に固定され、
スクロールの位置によって、該当部分のメニューが変化します。
フロッシュ | 商品紹介 | 旭化成ホームプロダクツ
サイドバーが固定されていて、
スクロールの位置によって、該当メニュー部分に下線が引かれています。
こちらもサイドメニューがスクロールすることによって変化していますね。
コンテンツ部分の人が動いていたりするのは、gifアニメーションのようですね。
gifアニメーションもこうゆうのに合わせてまた利用されるようになるかもしれないですね。
TokioLab! Realizzazione Siti Web Milano
こちらは文字がスクロールによって消えていきます(薄くなっている)
時折、背景も変わったりと、賑やかなサイトのように見えます。
サッカー好きにとっては熱い内容のサイトですが、
スクロールの際のアニメーションも多様しており、その点においても
いけてるサイトだと思います。
スカイツリーに対抗してなのか、随分と縦長のサイトです。
いきなり文字がバラバラに動いたときから「おぉ」ってなります。
ただ、スクロールかなりしないと下まで進まないですね・・・
今後このようなサイトが増えてくるかと思いますので、
ためしになにか作ってみたいですね～