ホームページは、掲載する情報が多くなるほど、縦長にスクロールする形になっていきます。
縦長のホームページでは、より多くの情報を伝えるため、「ユーザーに面倒に思われず、如何に自然にスクロールしてもらうか」が課題となります。

今回は、その課題を解決する方法の一つである「スクロールエフェクト(スクロール効果)」を上手に取り入れた"クールなサイト"をご紹介します。
ページを直接確認していただき、それぞれのページのスクロールエフェクトを、ぜひ体感してみてください。

上手にスクロールエフェクトを活用したサイト13選

1.SWISS

01_SWISS.png
http://www.world-of-swiss.com/en
スイスの国営航空会社のプロモーションサイトでは、航空会社らしく、まるで空を飛んでいるかのようなスクロール効果を取り入れています。
各カテゴリのポイントをクリックすると、また違ったスクロールエフェクトが登場し、様々な情報をわかりやすくまとめられているのが特徴です。
スマートフォンでは、スクロールエフェクトがシンプルになっています。

2.工学院大学 先進理工学部

02_工学院大学_先進理工学部.png
http://www.kogakuin.ac.jp/ae/
東京にある工学院大学・先進理工学部の紹介サイトでは、スクロールすると、後ろの水玉が上下に、そのほかにも風車やDNA模型などが合わせて動く仕組みになっています。ユーザーである受験生はもちろん、サイエンスに興味がある方にとってもモチベーションが上がるでしょう。

3.森山直太朗オフィシャルWebサイト

03_森山直太朗オフィシャルWebサイト.png
http://naotaro.com
シンガーソングライターの森山直太朗さんのオフィシャルサイトです。
ホームページ上では、顔が背景で固定されており、スクロールすると様々な落書きと重ね合わせることが可能で、ファンを飽きさせないユーモラスなコンセプトが印象的です。

4.TOKYO BASE CO.,LTD

04_TOKYO_BASE_CO._LTD.png
http://www.tokyobase.co.jp
東京・渋谷発のファッションカンパニー「TOKYO BASE」の企業サイトです。
「FROM JAPAN TO THE WORLD」の文字とともに、スクロールするごとにページの中心部の四角形に様々な情報が飛び込んできます。
ページの左側にハンバーガーメニューを配置しているのもユニークです。

5.Feedmusic

05_Feedmusic.png
http://www.feedmusic.com
デジタル経済の中で個人データをビジネスにも活かそうとしている「Feedmusic」のホームページです。
最初に飛び込んでくるナレーション文字は、まるでスターウォーズのイントロ部分を観ているような感覚になります。

上部に表示されたメニューでは、そのカテゴリの中でどれくらいコンテンツを読み進めたかがプログレスバーでわかるようになっています。

6.株式会社リクサス

06_株式会社リクサス.png
http://www.lixus.co.jp
1961年、たった1台のトラックから始まったという株式会社リクサスの企業ページは、まさに自分が運輸に関わっているかのような感覚を持たせてくれるホームページです。

ページのまわりには道路が敷設されており、スクロールするごとにトラックが走り抜けます(しかし、スクロールを戻してもトラックが逆走しないのはよく考えられています)。
一緒に走りながら、会社が社会にどのように貢献しているのかを楽しく知ることができます。

7.KathArt

07_KathArt.png
http://tour.kathart.dk
デンマークのデザイン会社 KathArtのホームページでは、一瞬動画を取り入れているのかな?と思われるくらいスムーズな展開のスクロール効果が実装されています。

企業ページは「商品に関する紹介」をメインに構成されてますが、社内の様子がアピールされており、会社の雰囲気と技術力の高さが容易に想像できるようになっています。

8.SCROLL EFFECTS

08_SCROLL_EFFECTS.png
http://www.scrolleffects.com
「スクロールエフェクト」と、今回のテーマそのものがホームページ名となっているこちらですが、実はAdobe社のAdobe Muse CCの機能紹介サイトです。
Adobe Muse CCを使うとこのようなスクロールエフェクトが使えます、というのがわかりやすく紹介されています。

ソースコードも公開されているので、気になった方は、ぜひ確認してみてください。

9.Alee Foroughi

09_Alee_Foroughi.png
http://aleeforoughi.com
20もの賞の受賞暦を持つ実力派Webデザイナー、Alee Foroughiさんのポートフォリオサイトです。

クロール効果を使った魅力的な見せ方が特徴で、配色も白・黒・ミントグリーンを使った印象的なホームページに仕上がっています。

10.LETTERS, INC

10_LETTERS__INC.png
http://letters-inc.jp
電子回路のような、幾何学的な模様を効果的に使った、東京中野区にあるWeb制作会社LETTERS, INCのホームページです。

直線の動きが印象的で、スクロールするたびに直線が伸びたり縮んだりします。白と黒しか使っていないところも大胆で、シックながらも可愛らしさを感じるホームページです。

11.Melanie F

11_Melanie_F.png
http://melanie-f.com/en/
フランスにあるレディース向けのシューズメーカ"Melanie F"のホームページでは、動くカタログを眺めているのかのように、次々と可愛らしい靴が登場してきます。

動きのある文字のエフェクトもユニークで、まるでおとぎ話の世界にいるかのようなファンタジックな音楽を聞きながら靴を見ることができます。

12.ENGAGE MARKETING

12_ENGAGE_MARKETING.png
http://engage-marketing.jp/
BtoBマーケティング支援を行うエンゲージマーケティングのホームページでは、モノクロの写真とインパクトのある太字の白抜き文字が最初にインパクトを与えます。
マーケティング用語は一見すると難しそうなものが多いですが、グラフや数字などにもスクロール効果を使って読みやすくわかりやすくなるように設計されています。

13.EPICURRENCE

13_EPICURRENCE.png
https://www.epicurrence.com
こちらは、デザイナーやクリエイターによるカンファレンスならぬ「ノン・カンファレンス」を謳ったイベントのホームページです。
クロールすると、様々なパーツが時差的に動き出すので、まるで宇宙の無重力を感じているかのような感覚になります。
トップページで使われているキャンプファイヤーの火のシネマトグラフも思わず見とれてしまいます。

まとめ

様々なスクロールエフェクトを使ったホームページを見てきましたが、いずれも「思わずスクロールしてしまう」ホームページばかりだったのではないでしょうか。

クロールエフェクトを使うことで、ページの上部から下部まで高い満足度を得ながら見ることができます。
ぜひ取り入れられそうなテクニックがあれば採用してみてください。