【実践テクニック＃5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
今回も実務のデザイン制作で使えるテクニックについてまとめてみたいと思います。シリーズ化して第5回目となる今回は2色の線形グラデーションを鮮やかに見せるテクニックについてまとめていきます。近年のウェブデザインでは彩度の高い鮮やかなグラデーションがデザインに取り入れらることもよく見かけるようになりました。ただ、そのまま高い彩度をもつ色のペアでグラデーションを適用してしまうと、中間色のあたりがくすんでしまうことがあります、今回はその原因と対策について考察してみたいと思います。
今すぐ使える実践テクニックの過去記事についてはこちらもぜひご覧ください。
（過去記事）
【実践テクニック＃1】複数の人物写真を並べるデザインで気をつけるポイント
【実践テクニック＃2】料理の写真を使ったデザインで気をつけるポイント
【実践テクニック＃3】1pxのハイライトとシャドウで要素を明瞭度を上げてシャープに見せる
【実践テクニック＃4】ドロップシャドウをグラデーション状に重ねて自然な影を表現する
それでは早速実践に入ります。まず今回のサンプルとなるグラデーションはこちらになります。開始点が青緑、終了点が明るめの紫と、両方とも鮮やかな彩度をもつ色を選びました。カラーコードについて通常では16進数の記法で表されることが多いですが、今回は彩度が関係してくるので、「HSB」の指標で色を見ていきます。HSBは、左から順に色相（色味）・彩度・明度のスケールで色を表わすコードになります。
開始点の青緑は（160, 100, 90）で終了点の明るい紫は（300, 100, 80）とコードからも分かるようにどちらも高彩度・高明度の色になります。ただし中間点を見ると分かるように少しくすんだブルーになっているようです。両端が鮮やかなので余計に目立ちますね。実際にコードを調べてみると（230, 43, 70）と彩度のスケールだけが大きく下がっているのがわかります。鮮やかな色同士の組み合わせてグラデーションにしているのになぜこうなるのでしょうか？
その答えは、HLSカラーホイールを使うとよく見えてきます。HLSとは、色相（色味）・輝度・彩度をスケールとした指標で、それを円状に関係性を表したものをHLSカラーホイールと言います。カラーホイール上では、円の中心が低彩度で円周に近づくに連れて高彩度になります。開始点の青緑の色はカラーホイール上ではこの位置にあります。
続いて終了点の明るい紫色をカラーホイール上で見ていきます。こちらも鮮やかな色になるので、円周上にある色となります。ただ色相については、補色関係に近い色味になるのでほぼ反対側に位置していますね。
そして中間点のくすんだ青色はこのような位置にある色となります。くすんでいるので円周側からは大きく離れ、どちらかというと円の中心に近いところになりますね。
これら全ての色味をカラーホイール上に並べて位置関係を整理するとこのようになります。ちょうど線形グラデーションの中間点を通り、開始点と終了点を結ぶ一直線が出来上がります。2色の色味が補色関係や対称関係にあることでカラーホイール上の中心付近を通るので必然的に中間色の彩度は下がるということですね。類似色の場合にはこの傾向が弱くなり、対称であればあるほど彩度が下がり、補色関係の時に最大化されるようになります。
そこで、中間色の色味を色相と輝度を変えずに、彩度だけそのまま上げてみるとします。そうするとカラーホイール上の今の位置から円周に近づくように変化していきます。位置関係を結ぶラインはカラーホイールの中心を避けるように円周方向へ緩やかな曲線を描くように広がります。
実際にこの調整した色を2色の線形グラデーションの中間色に置き換えてみます。そうするとしっかりと彩度が保たれたままグラデーション状に変化しているのがわかります。HSBのスケールも高彩度で揃っていますね。
ただ、本来のグラデーションの変化を強制的に変えているため、色の組み合わせによっては両側の色とのバランスが悪くなってしまう場合もあります。そんな場合には色相や明度を調整しながら両側の色味とのトーンを合わせるようにしましょう。
実際に中間色を調整したものとそうでないものを並べて比較すると一目瞭然ですね。よく見かける鮮やかなグラデーションもこのような工夫がされているというのがよくわかりますね。
今回は2色間でのグラデーションを鮮やかに見せる方法についてまとめてみました。補色関係に近づくほどどうしても中間色は鈍く、くすんでしまいますが、中間色の彩度を調整しつつグラデーション状の色の変化の美しさを維持できるよう試してみてくださいね。
（こちらの記事もどうぞ） 【実践テクニック＃1】複数の人物写真を並べるデザインで気をつけるポイント 【実践テクニック＃2】料理の写真を使ったデザインで気をつけるポイント 【実践テクニック＃3】1pxのハイライトとシャドウで要素を明瞭度を上げてシャープに見せる 【実践テクニック＃4】ドロップシャドウをグラデーション状に重ねて自然な影を表現する
開始点の青緑は（160, 100, 90）で終了点の明るい紫は（300, 100, 80）とコードからも分かるようにどちらも高彩度・高明度の色になります。ただし中間点を見ると分かるように少しくすんだブルーになっているようです。両端が鮮やかなので余計に目立ちますね。実際にコードを調べてみると（230, 43, 70）と彩度のスケールだけが大きく下がっているのがわかります。鮮やかな色同士の組み合わせてグラデーションにしているのになぜこうなるのでしょうか？
その答えは、HLSカラーホイールを使うとよく見えてきます。HLSとは、色相（色味）・輝度・彩度をスケールとした指標で、それを円状に関係性を表したものをHLSカラーホイールと言います。カラーホイール上では、円の中心が低彩度で円周に近づくに連れて高彩度になります。開始点の青緑の色はカラーホイール上ではこの位置にあります。
続いて終了点の明るい紫色をカラーホイール上で見ていきます。こちらも鮮やかな色になるので、円周上にある色となります。ただ色相については、補色関係に近い色味になるのでほぼ反対側に位置していますね。
そして中間点のくすんだ青色はこのような位置にある色となります。くすんでいるので円周側からは大きく離れ、どちらかというと円の中心に近いところになりますね。
これら全ての色味をカラーホイール上に並べて位置関係を整理するとこのようになります。ちょうど線形グラデーションの中間点を通り、開始点と終了点を結ぶ一直線が出来上がります。2色の色味が補色関係や対称関係にあることでカラーホイール上の中心付近を通るので必然的に中間色の彩度は下がるということですね。類似色の場合にはこの傾向が弱くなり、対称であればあるほど彩度が下がり、補色関係の時に最大化されるようになります。
そこで、中間色の色味を色相と輝度を変えずに、彩度だけそのまま上げてみるとします。そうするとカラーホイール上の今の位置から円周に近づくように変化していきます。位置関係を結ぶラインはカラーホイールの中心を避けるように円周方向へ緩やかな曲線を描くように広がります。
実際にこの調整した色を2色の線形グラデーションの中間色に置き換えてみます。そうするとしっかりと彩度が保たれたままグラデーション状に変化しているのがわかります。HSBのスケールも高彩度で揃っていますね。
ただ、本来のグラデーションの変化を強制的に変えているため、色の組み合わせによっては両側の色とのバランスが悪くなってしまう場合もあります。そんな場合には色相や明度を調整しながら両側の色味とのトーンを合わせるようにしましょう。
実際に中間色を調整したものとそうでないものを並べて比較すると一目瞭然ですね。よく見かける鮮やかなグラデーションもこのような工夫がされているというのがよくわかりますね。
今回は2色間でのグラデーションを鮮やかに見せる方法についてまとめてみました。補色関係に近づくほどどうしても中間色は鈍く、くすんでしまいますが、中間色の彩度を調整しつつグラデーション状の色の変化の美しさを維持できるよう試してみてくださいね。
（こちらの記事もどうぞ） 【実践テクニック＃1】複数の人物写真を並べるデザインで気をつけるポイント 【実践テクニック＃2】料理の写真を使ったデザインで気をつけるポイント 【実践テクニック＃3】1pxのハイライトとシャドウで要素を明瞭度を上げてシャープに見せる 【実践テクニック＃4】ドロップシャドウをグラデーション状に重ねて自然な影を表現する
