うまく使えば今っぽいデザインに！グラデーションを取り入れる前に知っておきたい基本

グラデーションの種類

昨年は「デュオトーン」というカラートレンドも流行しましたが、このデュオトーンというのは「2色」という意味であり、ほとんどグラデーションに近いでしょう。

ただし、デュオトーンは一時期のトレンドとして現れたものの、現在では「2色塗り」よりもフェード感を持った「グラデーション」の方がよく見られます。

ここでは、デザインで使われているグラデーションの種類について見ていくことにしましょう。

1. フラットグラデーション

フラットデザインに通じるところもあるのが、同系色で濃淡をつけた「フラットグラデーション」とも呼ぶべきグラデーションの使い方です。
全体的にUIまわりも含めてフラットなデザインを踏襲しているのが特徴で、フラットデザインにアクセントをつけたり、マテリアルデザインに遊びをつけたりするために使われることがあります。

フラットグラデーションはある種1色だけを使っているように見えますが、色の濃淡が影や光を取り入れているようにも見えるので、より立体的に画面を表現することができます。

2. ツートーングラデーション

最も一般的とも言えるグラデーションが、相性の良い2つの異なるトーンカラーをフェードして表示している*「ツートーングラデーション」*とも呼ぶべきカラーです。

ツートーンの組み合わせがうまくいくのは、色相環で距離の近い2色を選ぶことです。
色相が近いとたいていの場合は自然に見えますが、色相が遠いと場合によっては不自然に見えてしまうことがあります。

3. バックグラウンドオーバーレイ

グラデーションを使って背景全体にオーバーレイをかける「バックグラウンドオーバーレイ」なる手法もよく見かけます。
全画面の画像に、表現したいイメージにあうオーバーレイを上手にかけることができれば、単に画像を配置するよりも印象付けて表示することができるようになります。

グラデーション選択に役立つツール

グラデーションを使うとさまざまなメリットを享受できますが、2色以上の色を選択するにはどうすればいいのでしょうか。
自分で1色ずつ選びながら決めていくのもよいですが、次のようなツールを効果的に使ってみるのもよいかもしれません。

1. uiGradients

uiGradientsは2色のグラデーションの組み合わせを次から次へと提示してくれる便利なツールです。
単色に「赤」や「青」というような名前がついているように、グラデーションにも「空の色」「ナイトホーク」のように名前がつけられており、イメージもしやすいです。

2. CSS matic Gradient Generator

やや古いツールですが、2色以上を選ぶことで色を表示してくれる便利なツールです。
コードも自動で吐き出してくれるので便利ですが、サンプルとして用意されているグラデーションは前時代的に感じるかもしれませんので、色の組み合わせは自ら選んだほうがいいかもしれません。

3. ColorHexa

こちらは色の辞書のようなもので、RGBや16進数で色を検索すると、同系色や組み合わせのよい色などを辞書のように調べることができます。
RGBをCMYKに変換したりと、他にもさまざま便利な使い方があります。