あぁこれがパララックス効果の使い方かと納得のパララックスWebデザイン7つ
0
今回は、パララックス効果を用いた結果、口コミで広がり、海外でもわりと多くのシェアを誇るサイトを7つご紹介。
実は2014年のトレンドの一つとして、海外では
- 表示速度をあげる
- 六角形（蜂の巣）
- 軽量化
- 最小限
- モバイルファースト
- コンテンツ最優先表示
というのが上げられていまして、もしかすると今年パララックスは減少傾向になると予測されています。
しかし、コンテンツ最優先表示では、いまだパララックスがもっとも適しているとも言われ、判断が難しいところです。また、これは海外の事情でして、日本では最小限というWebサイトが成功しているところが驚くほど少なく、今年も日本独自のテキスト大量主義は変わらない気がします。
日本人は、短いキャッチコピーよりも、たとえ少し長くなっても、感情を動かされるテキストを愛する傾向にあるんですよね。
クリエイティブなパララックス7つ
3On3の紹介ですが、躍動感が半端ないですね。
正直、いままで色々なパララックスを取り入れてきたサイトを見てきましたが、これは「あ、これがパララックス効果のある意味正しい使い方か」と納得するほどのものです。
パララックス効果のメリットが、スクロールによって大きなフルスクリーン画像を、テキストとテキストの間に埋め込むことが出来るという利点ですが、これを最大限に引き出している秀作です。
普通のページでは、これほどまでの躍動感は演出できないと思いますので、すごく参考になりますよ。
フリーのグラフィックデザイナー、ALEE Foroughi氏のポートフォリオサイト。
パララックス体験の一つとして、works（仕事）の情報にスクロールが到達した時、これまで作成してきたロゴ、Webサイト、ブランドの数がカウントされ始めます。これは非常にインパクトがあって面白いですよね。
また、滑り出しのところで、パララックスがアクセントとして入っていると、最後までスクロールしてみようかなと思わせる吸引力があります。
ASCAP 100 Years in 100 Days: Film, Song and Interactive Timeline
年代をパララックス効果に落とし込んだアイデア。
ただ、年代ごとにスクロールが到達してから読み込みを開始するため、若干表示にラグがあり、テンポが少し遅れてしまうのが残念。
このページの素晴らしいところは、パララックス効果を全面に出すのではなく、あくまでもポイントごとにさり気なく演出しているところ。
実は少し前まで、全体的に躍動感のあるパララックス効果を取り入れていたページだったんですが、リニューアル後、ごくわずかなポイントごとにパララックスを導入するようになっていました。このリニューアル、非常にクールだなぁと感じた次第です。
スクロールが表示ウィンドウごとに進むスタイル。
なにげなく、トップのこの画面。人にマウスを当てると人にフォーカスがあたり、背景のテキストっぽいところにマウスを当てると、背景にフォーカスが移動するんですが、これも素敵ですよね。
Visual history of computing by Akita Systems
2010年から、10年ずつ遡っていく形のWebデザイン。やっぱり年代系の使い方としては、パララックスが非常に役立つように見えます。
テキストが複雑ではないため、Google翻訳しても普通に日本語で閲覧出来ます。
First Aid Dorset (UK) – First Aid Training Courses
最後はこちら。
パララックス効果の王道的な使い方です。
あくまでもテキストがメインであり、そのテキストを読み進めるところで、内容に沿ったイメージ画像を入ってくるというもの。
こうしてみると、ブログのように、テキストばかりの内容でも、途中に画像が入ってくるだけで読みやすくなるという利点を、上手くパララックスに活用しているところがわりと海外ではよく紹介されているような気がします。
それでは、また。
