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

デザインの世界で現れるトレンドには波がありますが、一度過ぎ去ったトレンドが再びやってくることがあります。

絵画における前衛芸術や、プロダクトデザインにおけるポスト・モダン作品などが挙げられますが、Webデザインの世界においてもフラットデザインと呼ばれる表現様式が再来したことがありました。

そして、もうひとつ盛り返しているトレンドがあります。
それがグラデーションを使ったデザインです。

画像全体にかけるオーバーレイ部分に大胆にグラデーションをかけることもあれば、UI要素にかすかにテクスチャーとして採用する場合もありますが、特定の2色をつかったグラデーションエフェクトは今もなお健在です。
しかし、Microsoft Wordでワードアートにかけるようなオーバーレイとは違った使い方もします。

今回は、グラデーションを取り入れるときに知っておきたいことをご紹介します。
グラデーションを取り入れる際には、単純に色を2色選択すればよいというわけではありません。
果たして、どのようなことに気をつけていけばよいのでしょうか。

グラデーションを利用するメリットとは？

グラデーションにはどのようなメリットがあるのでしょうか。
大きく3つに分けて解説します。

1. 単色では表現に限界がある

ボタンやパーツなどのUI要素だけでなく、ロゴなどのブランディング要素やイラスト、タイポグラフィーなど、さまざまな場所に、グラデーションが効果的に使われています。
実際の所、単色で表現するには限界があり、さまざまなブランドとも差別化を図りづらくなっています。

グラデーションは2色以上の異なる色っを使って、だんだんとフェードをかけていくように表現していきますが、単色で表現するのとは違った「新しい色」のように感じます。
組み合わせによっては新鮮に感じるので、インスタグラムのグラデーションロゴをはじめとして、さまざまなロゴがグラデーションを採用しています。

2. オリジナリティを出しやすい

ブランドアイデンティティは重要です。
ブランド戦略を決める際は、ブランドカラーを決めるケースがほとんどです。
例えば、コカコーラであれば赤、スターバックスであれば緑、PayPalであれば青、といった具合です。

しかし、赤であればユニクロ、緑であればEvernote、青であればローソンのように、色からは別のブランドを連想する場合もあるかもしれません。
ブランドカラーやコーポレートカラーに単色を使うのはどうしても限界があると感じている企業も多いようです。

Facebookは、グラデーションこそ使っていませんが、複数の異なった青色を採用することで、その問題を解決しています。
同じように、Twitterも複数の水色を採用しています。

異なる2色以上の色を自由に組み合わせることで、さまざまな「色味」やブランドを表現することができます。

3. より実体を持った色に見える

実生活で身の回りにある物質が「そこにある」と認識されているのは、その物質が光に当たっており、「明るい部分」と「暗い部分」が存在するからです。
空を見上げても、濃い青色部分と薄い水色部分が存在したり、花を見ても黄色い花であっても薄い部分・濃い部分が必ずあります。

グラデーションがあったほうがしっくりくるのは、そのほうがより自然に見えて、脳もロジカルに処理することができるからです。

グラデーションの種類

昨年は「デュオトーン」というカラートレンドも流行しましたが、このデュオトーンというのは「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に変換したりと、他にもさまざま便利な使い方があります。

まとめ

グラデーションは単純であるようにも見えますが、色の選び方次第ではより洗練したデザインにすることもできるので、今後も無視できないトレンドとも言えます。
ただし、組み合わせ方を失敗してしまえば、野暮ったく、素人っぽい雰囲気になってしまうこともあるので、ある種センスも問われます。

uiGradientsなどのツールも活用しながら、オリジナリティあふれる色の組み合わせを見つけてみてください。