エムタメ!について facebook twitter

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

理想動画制作会社

スグ見つかる!

動画を探す

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2018/09/05
ダサイと廃れた「グラデーション」が、おしゃれになってトレンドデザインに!

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.まとめ

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

セミナー情報

セミナー情報

無料資料ダウンロード

BtoBマーケティングハンドブック 表紙

BtoBマーケティングハンドブック

無料ダウンロード

展示会の効果を最大化させる12の手法 表紙

展示会の効果を最大化させる12の手法

無料ダウンロード

関連キーワード

web制作

エムタメ!ニュース

デジタルマーケティングについての
最新情報やお役立ち資料を自動受信

登録する(無料)

Follow us!

twitter hatena google Eight rss follow us in feedly

特集

WEBリニューアル物語

WEB制作のよくある失敗に全て引っ掛かるけど憎めない青木の奮闘記

はじめての展示会物語
メールマーケティング