濁りなし!美しいグラデーションの基本ルールとCSSオンラインツール

gradient-rule

 

デザイントレンドは変わっていますが、グラデーションはとてもナチュラルな見た目と多様性に富んでおり、いつの時代も愛されるデザインスタイルです。

 

この記事では、美しいグラデーションを作成する基本ルールと、手軽に利用できるグラデーション作成オンラインツールをご紹介します。

 

全シリーズはこちら。

しっかりマスター!美しいグラデーション作成徹底ガイド【Illustratorグルーバルカラー編】

しっかりマスター!美しいグラデーション作成徹底ガイド【Illustrator実践デザイン編】

 

 

美しいグラデーションって、なんだろう?

 

グラデーションには良くて美しいものもあれば、悪くてひどいものもあるでしょう。

 

良いグラデーションとは、ナチュラルで調和のとれた美しいなめらかな色の変化のことを指します。

 

gradient-rule-0-1

 

プリント印刷でグラデーションを表現するときの技術的な問題を防ぐのにも役立ち、画面スクリーン状で見たときにも魅力的なものになるでしょう。

 

gradient-rule-0-2

 

 

 

美しいグラデーションの基本ルールまとめ

 

グラデーションをつかった色の基本原則を理解しておくことで、美しいグラデーションを簡単に作成できるようになります。

 

グラデーションは、配色成分の数値を平均化することで作成される

gradient-rule-1

 

フォトショップやイラストレーターなどで、実際にグラデーションを作成しようとしたときに、色がくすんでしまったという経験はないでしょうか。

 

これは、グラデーションのミッドポイント(英: Midpoint)に間違って灰色がかった色ができてしまい、色がくすんで汚く見えてしまうことが問題です。

 

gradient-rule-2

 

ミッドポイントとは、グラデーションに使われる2つの色が均等な割合で混ざり合う中心点を指します。そして、利用する2色をカラーストップ(英: Color Stops)と呼びます。

 

Illustratorなどのデザインツールでは、以下のように2つのカラーストップのRGBカラーの平均値が、ミッドポイントに指定されます。

 

 

グラデーションの色の値は、カラーホイール上のポジションに基づいていないことを覚えておきましょう。

 

Illustratorで自動で作成されたグラデーションと、カラーホイールに従ってカラーストップを追加したグラデーションの違いがこちら。

 

gradient-rule-3

 

 

補色カラー同士を一直線で結んだグラデーションをつくらない

gradient-rule-4

 

特に、カラーホイール上で反対側にある色同士、補色カラー(英: Complementary Color)を使用するときは、注意が必要です。

 

gradient-rule-5

 

たとえば、青とオレンジ色を結ぶとどうなるでしょう。

 

gradient-rule-0-3

 

グラデーションの中心部分がくすんでしまっているのが分かります。

 

gradient-rule-6

 

一直線で結んだことで、中間のミッドポイントは灰色っぽくなってしまいました。

 

gradient-rule-0-4

 

これでは、あまり魅力的な色合いとは言えないでしょう。補色カラー同士を一直線でつなぐときは、グラデーションの中心に少なくとも1つの新しいカラーストップを追加してみましょう。

 

gradient-rule-7

 

実際に、カラーストップを1つ追加したのがこちら。

 

gradient-rule-8

 

カラーストップを2つ追加することで、よりダイナミックな色の変化を楽しむことができます。

 

gradient-rule-9

 

 

追加するカラーストップは、カラーホイール上で補色カラー(青とオレンジ色)の間から設定するのがポイントです。

 

gradient-rule-10

 

 

カラーストップをもっと追加しよう

gradient-rule-11

 

補色カラーをつかったグラデーションの作成だけでなくても、寒色と暖色のグラデーションや、カラーホイール上で90度以上離れた色をつかってグラデーションを作成する場合なども、中間点に新しいカラーストップを追加してみましょう。

 

gradient-rule-12

 

グラデーションの中心にカラーストップを追加すると、よりクリーンで鮮やかな色の変化を作成できます。

 

gradient-rule-13

 

 

カラーバンディングに気をつけよう。

gradient-rule-14

 

とても似た色のグラデーションを作成したときや、とても暗い色から明るい色に変化するグラデーションなどを作成すると、カラーバンディング(英: Color Banding)と呼ばれる問題が発生することがあります。

 

カラーバンディング(英: Color Banding)は、コンピュータグラフィックスにおける不正確なカラー表示の問題のひとつで、グラデーションが色の帯のように見えてしまいます。

 

gradient-rule-15

 

カラーバンディングが発生してしまったときは、グラデーションの色を再調整するか、カラーストップを新しく追加することで回避することができます。テクスチャを利用した方法は、また今度。

 

gradient-rule-16

 

 

 

美しいCSSグラデーションを作成できるオンラインツール

 

これらのグラデーションの色がくすんでしまう問題を解決した、CSSグラデーション作成オンラインツールがGradient Generatorです。

 

 

このツールでは、RGB値を立体的に捉えることで、補色カラー同士の中心が灰色がかってしまう問題を解決してくれます。

 

 

通常のツールとは異なり、カラーストップを一直線につながず、2色をカーブを描くように曲線状につないだグラデーションを作成してくれるのが特長です。

 

 

3つの異なるカラーシステムでグラデーションを作成することができます。

 

  • HCL – デフォルトのカラーシステム。カラーバンディング対策もされており、広範囲の色相を美しく表現できる
  • HSB – 2つのカラーストップ間をより鮮やかにしてくれるバージョン。HCLではミッドポイントが灰色っぽくなってしまうときに試そう
  • HSL – HSBよりダイナミックなネオン色が特長ですが、カラーバンディングが発生しやすい(ピンク色の部分)ので注意も必要

 

 

作成したグラデーションは、CSSでコピペできるのはもちろん、FigmaやSketch、Adobe XD向けのSVGファイルとしてエクスポートできるので便利です。

 

 

グラデーションに使える美しい配色を探そう

 

美しいグラデーション作成には、配色えらびが欠かせません。以下のツールも一緒に活用してみてはいかがでしょう。

 

ウェブデザイナー必見!美しいCSSグラデーションをコピペできる無料ツール17選まとめ

【2021年版】もう配色デザインには迷わない!すごい無料カラーパレットツール83個まとめ

 

色の選びかたや基本ルールなどはこちらからどうぞ。

 

これだけは知っておきたい、色の基本原則まとめました。

デザイナーが知っておきたい、配色の基本原則10個まとめ

配色選びに困ったら確認したい、色の組み合わせ用チートシート The Ultimate Combinations Cheat Sheet

ずっと使える、デザインの基本まとめました。【2020年改訂版】