これまでグラデーションは、Webといういわゆる2D空間で立体感や奥行きを生みだすために利用されてきました。
しかしWebの発達、普及を経てマルチデバイス化に対応するため、立体感や質感などの視覚効果を削ぎ落としたシンプルな「フラットデザイン」が登場しました。
フラットデザインが世に広く知られるきっかけになったものの一つとして、Windows8やiOS7のUIが挙げられます。
これらのデザインが発表された当時は視認性やチープさを指摘する声もありましたが、時が経つにつれ受け入れられ、浸透してきました。
このようなフラットデザインの流行により、正反対の性質を持つグラデーションを多用した立体的なデザインは「ダサい」と感じられ、廃れていったのです。
一度廃れたはずのグラデーションですが、Instagramのアイコンに使用されたり、フラットデザインと組み合わせてデザインされたり、様々な使い方で再流行しています。
現在流行っているグラデーションデザインは、以前のように立体感や質感を強調させるためのものではありません。
ブランドカラーのイメージを強く押し出すために画像の上に大胆に乗せたり、背景にテクスチャとして敷き詰めたりと、フラットデザインと調和するように利用されています。
グラデーションを用いることにより、他にはないオリジナリティのある色が出せるため、ブランドのカラーを強く推し出すことが可能になるのです。
同系色のグラデーションや異なる色のグラデーションであったり、背景やボタンに用いたり、画像の上にかぶせたりと、グラデーションにもいくつか種類や使い方があります。
今回は大きく分けて3種類のグラデーションを用いたサイトを紹介します。
コンテンツごとに異なる色のグラデーションを用い、各コンテンツそれぞれのイメージを際立たせています。
異なる色のグラデーションといっても、明度や彩度を合わせ、ちぐはぐにならないよう綺麗にまとめられています。
メインイメージやコンテンツにグラデーションを用い、インパクトのあるデザインになっています。
オフィス街のイラストにもグラデーションがかかっており、未来を見据えた先進的なキャッチコピーとマッチしています。
文字やボタンにグラデーションカラーを使用することで、他の情報に埋もれることなく瞬時に目に飛び込んできます。
また、オンマウスでグラデーションが変化し、動きのあるサイトになります。
一度は廃れた「グラデーションデザイン」ですが、これまでとは異なった使い方や色の組み合わせによりこうしてまたオシャレなデザイントレンドとして復活しました。
インパクトやオリジナリティを追求するために自由度の高いグラデーションデザインを取り入れてみてはいかがでしょうか。