BLOG

【2016年版まとめ】スクロールエフェクトが素晴らしいサイト15選

2016.12.24  Wrote by Takuro Nakayama

 

最近のWebサイトのインプットが少なくなってきているなと感じていて、丁度パララックス(視差効果)など、スクロールエフェクトを駆使した参考サイトを探していたこともあり、その中で見つけた素晴らしいサイトをまとめてみました。

商品イメージや伝えたいことと動きが連動していないか、ページが重くなりがちなのでユーザビリティとクリエイティビティとのバランスをどうとるか、など課題は多いと思います。

ただスクロールしてかっこいいだけではなく、商品のユーモラスな部分や繊細さ、クリエイティブな面などを伝えるときに是非使いたい「2016年版おすすめスクロールエフェクトサイト15選」をお届けします。

因みにパララックスエフェクトのイメージは以下のサイトをご参考にしてください。
How to create a parallax scrolling website
 

スクロールエフェクトが素晴らしいサイト15選

CRISP SALAD WORKS

www.crisp.co.jp

動画で始まるファーストビューから、スクロールしたりメニューをクリックしたときの動きが気持ちよく、企業のコンセプトが楽しく伝わるアクティブなサイトになっています。

 

CONCRETE LCDA

www.concrete-beton.com

スクロールすると画像が変わります。動きがミニマルで繊細なイメージの印象を与えます。

 

Finesse Design Atelier

finesseatelier.com

デザイン会社のサイトでしょうか。インパクトのある赤と画像が印象的で、スクロールすると世界観に没入していくような感覚になります。

 

SIX

www.madebysix.com

デザイン会社のサイトのようです。シンプルで無駄がなく、でもクリエイティブな側面ではインパクトがあります。

 

PYRAMID FILM QUADRA

www.pfq.co.jp

インタラクティブ広告制作プロダクションのサイトです。スクロールすると背景のピラミッドが回転して、テクノロジーとクリエイティブの強みが伝わるような作りになっています。

 

Tio Luchin

www.tioluchin.com

スペインレストランのサイトでしょうか。画像の動きや動画が織り交ぜられており食欲を刺激しつつ、スペシャルな世界観を演出しています。

 

Rezo Zero

www.rezo-zero.com/fr

制作会社のWebサイトでケーススタディなどのコンテンツを軽やかなアニメーションを使ってシンプルに魅せ方が非常に参考になります。

 

jQuery 最高の教科書

jquery.shiftbrain.co.jp

制作会社シフトブレインさんの著作書籍の専用LPです。デザインや動き、構成に関してスクロールサイトとしてお手本のようなサイトなのでピックアップしました。

 

PHIVE

phive.pt

スクロールすると左右にレイアウトされた表示が切り替わっていきます。インタラクティブなエフェクトがフィットネスの躍動感などを表現するために重要な役割をしています。

 

The Spice Hunter

www.spicehunter.com

一本のラインに導かれるように自然とスクロールしていくことにより、コンテンツを最後まで見せることが出来ていて、参考になる面白いアイデアですね。

 

ANDREA BRUGI

andreabrugi.com

スクロールするとランダムにレイアウトされた商品が、商品の持つナチュラルな素材感と織り交ざりショップの持つ世界観を作っています。

 

TOKYO BASE CO.,LTD.

www.tokyobase.co.jp

メインでの動画の作りやスクロール時のアニメーションの動きなど参考になる部分がたくさんあります。

 

VNSTAR

vnstar.com.ua/en

少々サイトが重いですが、スクロール時のアニメーションの動きのリッチ感やデザインの秀逸性は、投資系企業の未来性や先見性を印象付けるものとなっています。

 

Cesetti Designer

cesettidesigner.it

ストーリー性があり、クリエイティブなアニメーションについスクロールしたくなります。メンバーページのスクロールするとメンバーが切り替わる部分も気持ちいい動きになっています。

 

Star Wars Ⅳ

swanh.net

スターウォーズ4をインフォグラフィック風に解説しており、ひたすらスクロールしていくという結構な大作ページです。興味がある方はご覧ください。

 

まとめ

いかがでしたか?

ただ動きがアクティブでかっこいいというだけではない、クリエイティブの素晴らしさを堪能できたのではないでしょうか?

個人的には、こんなクリエイティブなWebサイトをもっとたくさん作っていきたいなとモチベーションを高めることができました。

ではまた次回。

その他の記事を見る