情報量過多でも問題なし！スクロールエフェクト効果を上手に活用したサイト13選

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

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

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

1.SWISS

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

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

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

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

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

4.TOKYO BASE CO.,LTD

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

5.Feedmusic

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

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

6.株式会社リクサス

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

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

7.KathArt

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

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

8.SCROLL EFFECTS

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

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

9.Alee Foroughi

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

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

10.LETTERS, INC

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

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

11.Melanie F

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

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

12.ENGAGE MARKETING

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

13.EPICURRENCE

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