017年のWEBデザイントレンドも、引き続きシンプル・ミニマルなデザインが大きな流れを占める中、シンプルゆえに単調になったり、無個性になることを避けるための工夫を凝らすことが必須になってきています。例えば、メイン画像や動画のクオリティを高めたり、アニメーションやページ遷移時のエフェクトに凝ったり、サイト全体にパララックスを取り入れたりといったものです。

今回はこうしたクオリティや細部へのこだわりが活きているのあるサイトをご紹介します。自社のホームページにシンプル・ミニマルデザインをと考えている方はぜひ参考になさってください。

パララックスサイト

パララックスとは「視差効果」と呼ばれるエフェクトで、スクロールをするときに、複数のレイヤーにある視覚要素を異なるスピードで動かすことで視差を生み出し、立体感や奥行きを演出する手法です。すでに技法としては使われ慣れてこなれた感があり、「その応用」とも呼べるような新しいパララックスサイトも増えてきています。

TOKYO BASE　CO.,LTD.

http://www.tokyobase.co.jp/

PEUGEOT

http://web.peugeot.co.jp/bluehdi/

DOOMSDAY

http://www.doomsdayent.com/

トップページの高品質なアニメーションや動画

デザインを極力までにシンプルにする代わりに、トップページにハイクオリティの動画やアニメーションを配置するサイトが増えています。そのクオリティ、メッセージ性、デザイン性の高さをもって、ブランドのなんたるかを語るのが狙いですので、各サイト力の入れようが半端ではありません。

STANDARD

http://standardfilms.tv/

TAKUMI　HASEGAWA

https://tkmh.me/

アニメーションを活用したページ遷移・画面遷移

サイト内のページ遷移や画面の遷移の際に、ローディング時間を感じさせないようにするためのアニメーションのあしらいをするエフェクトは、いままでもたくさんありましたが、最近のWEBサイトにおけるアニメーション技術は次元が違うほどに進化しています。

サイト全体の画面遷移がすべてアニメーションで構成されているもの、アニメーションの動き自体が美しくアート性のあるものなどさまざまですが、昨今はさまざまなjavascript のプラグインも発表されているので、試してみるのもいいでしょう。

waaark

http://waaark.com/

Tokyo Mild Foundation

http://tokyomildfoundation.com/

まとめ

いかがでしたか。弊社のデザイナー・エンジニアの間でも最近話題になることが多いのがページ遷移・画面遷移に関するjavascript に関する事柄です。それだけシンプル・ミニマルなデザインにしたいが、作りは凝ったものにしたいと希望するクライアントが多いからかもしれません。

ぜひ自社サイトの作成、リニューアルの際の参考になさってください。