AI
Business
最近の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サイトをもっとたくさん作っていきたいなとモチベーションを高めることができました。
ではまた次回。
–>
