グラデーションを美しく作るためのコツとNGポイント

Webデザインや配色理論を学んだことがある人でも、グラデーションに関しては自信を持って色を選ぶことができない人も多いのではないでしょうか。実際のところ、配色理論をそのままグラデーションの色選びに当てはめても、いまいち「ピンとこない」ことはよく起こることです。

それでは、グラデーションの色選びは「センス」で片付けられてしまうのでしょうか。実は、グラデーションの色選びにもしっかりとした*「理論」*があり、理論を学ぶことで、デザイナーはもちろんノンデザイナーの方でも美しいグラデーションを作り上げることができます。

そこで今回は、センス不要で美しいグラデーションを作るための4つのコツと2つのNGポイントをご紹介します。これまであまり語られることのなかったWebデザインにおけるグラデーション理論ですが、ここでしっかりと理解しておきましょう。

最新Webデザインの定番「グラデーション」

最近では、グラデーションをWebデザインに積極的に活用するWebサイトも増えてきました。グラデーションを使うことで、色を単色で利用するよりも生き生きとした、洗練された表現にすることが可能です。

もちろん、グラデーション自体は昔のWebデザインでも取り入れられていました。しかし、理論を無視したグラデーションばかりが採用された一昔前のWebデザインと違って、最近のグラデーションは理論にのっとっているため、洗練された美しいデザインに仕上がっています。

引用：Stripe - Online payment processing for internet businesses

例えば、オンライン決済プラットフォームを提供しているStripeもエレクトリックブルーと水色のグラデーションを使うことで、より近未来的な雰囲気を生み出すことに成功しています。

引用：フォリオ | テーマでえらぶ、あたらしい投資のかたち

テーマで株式を選んで人工知能に運用させるロボアドバイザーサービスのフォリオのWebサイトのように、ヘッダーだけでなくCTAボタンにグラデーションを用いる例も最近では珍しくありません。

しかしながら、問題なのは、どの色を組み合わせればよいのか、ということです。Webデザイナー方の中には「センス」で任意の2色をピックアップできる方もいるかもしれません。一方で、センスに自信がなかったり、理論上の説得力をもってグラデーションカラーを選びたい方もいるはずです。

そこで、ここからは*「12色相環」*と呼ばれる、色の関係を模式的に表した図を使って、最適なグラデーションカラーを選んでみましょう。

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