UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 フロントエンドエンジニアの齋藤 (@31mskz10) です。

デザインによく使われる手法にグラデーションがあります。
ウェブサイトの背景やバナー、ボタンなど、様々な場面で活用されています。

しかし、いざ自分でグラデーションを作ってみると、「なんだか色が濁って見える」「思ったより綺麗じゃない」と感じたことはありませんか。
特に、補色に近い色同士（青と黄色など）を組み合わせると、その中間部分が灰色になってしまいます。

今回は、この問題を解決し、誰でも綺麗なグラデーションを作れるようになる、簡単なひと手間について紹介します。

なぜ補色のグラデーションは濁るのか？

この問題の原因は、2色でグラデーションを作るとその2色間を「直線的」に計算してしまうからです。

色は通常、光の三原色であるR（赤）、G（緑）、B（青）の数値の組み合わせで表現されます。
例えば、青（R:0, G:0, B:255）と黄色（R:255, G:255, B:0）でグラデーションを作るとします。

このとき、コンピューターが計算する中間点は、それぞれの数値を足して2で割った「R:128, G:128, B:128」になります。

これがくすんだ灰色で、この色ができてしまうせいで、中間が濁ったようなグラデーションになってしまいます。

解決策は「中間の色」を追加すること

中間が濁ったような色になるのを避け、美しいグラデーションを作るための解決策は、開始と終了の2色だけでなく、その間に「中間の色」を追加してあげることです。

先ほどの青と黄色の例で考えてみましょう。
青と黄色の間に、緑色（R:0, G:255, B:0）を中間色として追加します。

すると、グラデーションは「青→緑→黄」になり、中間地点の灰色が目立たなくなりました。

また、今回は変化を分かりやすくするためにかなり彩度が強い色を使っています。
それぞれの色が主張し合ってかなりキツいので、彩度を落としてみると、それぞれの色が馴染んでキレイな変化になります。

ここからさらに色の開始位置やそれぞれの色を調整していくことで、さらに馴染んでキレイなグラデーションになります。

まとめ

美しいグラデーションを作る秘訣は、開始と終了の2色だけでなく、その間をつなぐ「中間の色」を意識することです。

たった一手間、中間色を追加するだけで、コンピューターが作り出す色の濁りを回避し、はるかに豊かで自然な表現が可能になります。
次にグラデーションを使う機会があれば、「この2色をつなぐ、最も美しい橋渡しの色は何だろう？」と考えてみてはいかがでしょうか。

そのひと手間が、あなたのデザインを大きく変えるかもしれません。

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！