エムタメ!について twitter

マーケティング担当者のために
マーケティングに関わるためになる情報をためていく

  1. TOP
  2. デザイン
  3. ダサイと廃れた「グラデーション」が、おしゃれになってトレンドデザインに!

ダサイと廃れた「グラデーション」が、おしゃれになってトレンドデザインに!

記事公開日:2018/09/05
最終更新日:2023/10/26
ダサイと廃れた「グラデーション」が、おしゃれになってトレンドデザインに!

1.ダサいと廃れた「グラデーション」

これまでグラデーションは、Webといういわゆる2D空間で立体感や奥行きを生みだすために利用されてきました。
しかしWebの発達、普及を経てマルチデバイス化に対応するため、立体感や質感などの視覚効果を削ぎ落としたシンプルな「フラットデザイン」が登場しました。

フラットデザインが世に広く知られるきっかけになったものの一つとして、Windows8やiOS7のUIが挙げられます。
これらのデザインが発表された当時は視認性やチープさを指摘する声もありましたが、時が経つにつれ受け入れられ、浸透してきました。

フラットデザイン

このようなフラットデザインの流行により、正反対の性質を持つグラデーションを多用した立体的なデザインは「ダサい」と感じられ、廃れていったのです。

2.なぜ今になってトレンドデザインに?

一度廃れたはずのグラデーションですが、Instagramのアイコンに使用されたり、フラットデザインと組み合わせてデザインされたり、様々な使い方で再流行しています。

現在流行っているグラデーションデザインは、以前のように立体感や質感を強調させるためのものではありません。
ブランドカラーのイメージを強く押し出すために画像の上に大胆に乗せたり、背景にテクスチャとして敷き詰めたりと、フラットデザインと調和するように利用されています。

グラデーションを用いることにより、他にはないオリジナリティのある色が出せるため、ブランドのカラーを強く推し出すことが可能になるのです。

グラデーション

3.「グラデーション」の参考サイト

同系色のグラデーションや異なる色のグラデーションであったり、背景やボタンに用いたり、画像の上にかぶせたりと、グラデーションにもいくつか種類や使い方があります。
今回は大きく分けて3種類のグラデーションを用いたサイトを紹介します。

画像の上にかぶせて使用する

https://www.rainbow.co.jp/

画像の上にかぶせて使用する

コンテンツごとに異なる色のグラデーションを用い、各コンテンツそれぞれのイメージを際立たせています。
異なる色のグラデーションといっても、明度や彩度を合わせ、ちぐはぐにならないよう綺麗にまとめられています。

背景に使用する

http://donatello.jp/

背景に使用する

メインイメージやコンテンツにグラデーションを用い、インパクトのあるデザインになっています。
オフィス街のイラストにもグラデーションがかかっており、未来を見据えた先進的なキャッチコピーとマッチしています。

文字やボタンに使用する

https://www.desamis.co.jp/

文字やボタンに使用する

文字やボタンにグラデーションカラーを使用することで、他の情報に埋もれることなく瞬時に目に飛び込んできます。
また、オンマウスでグラデーションが変化し、動きのあるサイトになります。

4.まとめ

一度は廃れた「グラデーションデザイン」ですが、これまでとは異なった使い方や色の組み合わせによりこうしてまたオシャレなデザイントレンドとして復活しました。
インパクトやオリジナリティを追求するために自由度の高いグラデーションデザインを取り入れてみてはいかがでしょうか。

関連キーワード

Web制作

特集

はじめての展示会物語

はじめての展示会出展までの道のりを描いたドッタンバッタン劇場

メールマーケティング

この記事を共有