1. ホーム
  2. デザイン
  3. 【デザイン】最近のトレンドカラー、グラデーションとフラットデザイン2.0について

【デザイン】最近のトレンドカラー、グラデーションとフラットデザイン2.0について

目次

  1. はじめに
  2. フラットデザインとグラデーション
  3. オススメのグラデーションの作成方法
  4. まとめ

はじめに

グラデーションはWebデザインでよく使われてきた基本の手法です。
ワンポイントとして使うサイトもあれば、背景に大きく使うサイト、写真にオーバーレイして使用するサイトなどグラデーションの用途は様々です。

最近のトレンドカラー、グラデーションとフラットデザイン2.0について

しかし、2012年頃から「フラットデザイン」が広く使われるようになり、グラデーションを使用する人はほとんどいなくなりました。ボタンは単色で塗りつぶされ、背景なども1色でまとめるデザイナーがほとんどでした。「時代遅れ」として一時期あまり使われていなかったグラデーションですが、2016-2017年に入り、また今年の「トレンド」として紹介されることが多くなってきました。

本記事では、フラットデザインの歴史と共にグラデーションの使い方とこれからみなさんがご自身のサイトでグラデーションを使用するときに押さえておきたいポイントをいくつかご紹介します。

フラットデザインとグラデーション

2012年頃、スマートフォンの普及が進み、小さい画面でも機能的で美しい「最小限」のデザインが求められました。そんな中、立体的ではなくミニマルなフラットデザインがトレンドとなり、多くのデザイナーの指示を集めました。
フラットデザインの特徴として影やハイライト、グラデーションなどが全く使用できないことが挙げられます。

フラットデザインの典型例、buffalo

しかし、このようなデザインで問題となったのが、「ユーザビリティ」です。平面的なデザインでは何がクリックできるのか、どこに文字を入力するのかがわかりにくいです。実際にUX調査をしている会社、ニールセンノーマングループフラットデザインのユーザビリティを批判しています。

そこで2014年頃に作られて今も推奨されているのが「フラット2.0」もしくは「フラットデザイン2.0」です。こちらは「フラットデザイン」で提唱されている「最小限」のデザインはとり入れつつ、「フラットデザイン」が設けた影やハイライトを使用してはいけない、という厳しいルールを緩めたものです。全体的にフラットな雰囲気は残したまま、影やハイライト、そしてレイヤー(部品の重なり)を使い、ユーザーに何がクリックできるのか、どの部分がページの上のレイヤーに位置するのかなどをわかりやすくしています。

image.png (241.5 kB)

「フラット2.0」についてもっと知りたい方は、こちらのデザインのもっとも有名な一例であるGoogleの「マテリアルデザイン」を参考にすると良いと思います。

Screen Shot 2017-04-21 at 11.56.08 AM.png (124.5 kB)

「フラット2.0」時代と共にまた使われ始めたのが「グラデーション」です。最近になってグラデーションがまた指示を集めている理由は大きく2つあります。

1. フラットな空間にレイヤーや奥行きをつくることができる

「フラット2.0」時代に入り、レイヤーや画面の中で奥行きやスキュモーフィズムをあらわすのによく使われるようになったのがグラデーションです。
グラデーションはごちゃごちゃ影やハイライトを追加せずに奥行きを表現することができます。グラデーション自体が1つの色として作用するため、「最小限」のデザインをキープしたまま丸の立体感や背景の奥行きを表現することができます。

2. サイトがユニークになる

例えばサイトの特徴を出すためにブランドカラーを使用する、といっても実際にはすでに同じ色が他のサイトで使われていたり、似たような色があったりと単色でサイトの特徴を表すのはなかなか大変です。しかし、グラデーションを使用することによって、サイトに一種の「新しさ」が生まれます。2色、多ければ3,4色でグラデーションを作成し、複数の色をWebサイトの「カラー」として使用することができるためサイトの特徴やユニークさを表現しやすい、というメリットがあります。

オススメのグラデーションの作成方法

では、実際にどのようにグラデーションを作成すれば良いのでしょうか?
今回は私が個人的に色を選ぶためによく使うサイトをご紹介します。

1. 雰囲気を決める

0からグラデーションを作れ、と言われてもなかなか難しいのがデザイナーの本音。私はよく他のサイトを眺めたりして、だんだんと色を絞り込み、イメージを膨らませていきます。

雰囲気を決める際にグラデーションをすぐに選びに行くこともありますが、大体サイト全体の雰囲気を決めてから色をだんだんと絞り込んでいくもの。みなさんもう使っている方がほとんどかと思いますが、PinterestDribbleを使用してサイトの雰囲気を決めてみてください。Pinterestではそのサイト用のボードを作って、そこに気になったサイトやパーツを集めていきます。
グラデーション

また、Dribbleは色検索などもできるので、色が1つ決まって、その色と組み合わせたい色を探すときに便利です。
グラデーション

また、デザインの参考になるサイト、パーツ、写真やファイルを自分で細かくタグ付けしたり、まとめたい!という方にはDropmarkがオススメです。
グラデーション

2. グラデーションを選ぶ

WebGradients

WebGradients はWeb上で使うためのグラデーションを180個用意してくれているサイトです。SketchユーザーでもPhotoshopユーザーでもすぐにダウンロードして使用することができます。また、サイトからCSSをコピーすることもできます。
webgradients

colorful gradients

colorful gradients こちらも様々なグラデーションから自分が使いたいものや色を選ぶことができるサイトです。こちらのサイトはWebGradients と違い、コンピューターにより毎日48個グラデーションが自動生成されるサイトなので、1つ1つのグラデーションの質は落ちる気がします。

uiGradients

uiGradientsは決まられた色の中から自分が使用したい色を一色選び、その色と相性の良い色グラデーションを作成してくれるサイトです。迷いすぎて、とりあえずコンピューターにほとんど決めてほしい!という方にはオススメです。

Blend

Blend は自分で選んだ2色のグラデーションを作成してくれるサイトです。
CSSも書き出してくれるので便利です。

最近のトレンドとして、フラットデザインの色を使用して作成したグラデーションやツートーン(デュオトーン)グラデーションもあります。ただ、他のサイトにもよく使用されているものが多いので、本当にユニークなものを作りたい方はやはり時間をかけて色を選ぶのが良いかもしれません。

3.グラデーションの使い方

使用したいグラデーションを選んだら、最後にグラデーションをどのようにサイトに採用するのかを選びます。

背景にグラデーションを使用する

wpcres
wpcrew

画像にグラデーションをオーバーレイする

nycPRIDE
グラデーション

いくつかのグラデーションを組み合わせる

stripe
Screen Shot 2017-04-21 at 10.51.32 AM.png (1.0 MB)

CSSconf
CSSconf

文字上にグラデーション

linesconference

まとめ

普段何気なく使用したり避けたりしているグラデーションですが、最近グラデーションがまた徐々に使われ始めた理由はデザイナーが「ユーザビリティ」に配慮したデザインを作ろう!と意識した結果だったようです。そういった背景を知りながらデザインを作ったりサイトをみたりしているとまた違ったものが見えて来るかもしれません。

この記事は
参考になりましたか?

PAGE TOP