グラデーションカラーをデザインに取り入れる理由とその効果的な利用方法 | アドビUX道場 #UXDojo
エクスペリエンスデザインの基礎知識
グラデーションカラーは特に新しいデザインコンセプトではありませんが、最近になって注目される存在になりつつあります。90年代の終わりから2000年代の初めにデザイントレンドとしてよく使われていたグラデーションカラーは、2005年前後から広がり始めたフラットデザインのコンセプトの陰にいつしか隠れた存在になっていました。
フラットデザインが浸透した結果（あるいはその反射作用として）、デザインに奥行きや趣を与える手段を求めるデザイナー達の手によって、グラデーションカラーは再びトレンドに戻ってきました。アドビ、Instagram、Aaptivなどのブランドは、この復権をすでにブランドマークやロゴに取り入れています。
この記事では、まずグラデーションカラーの定義と主要なタイプを紹介し、次に、使用する際のいくつかのベストプラクティスを取り上げます。
虹色のグラデーションカラーパレットは、デザインに奥行きと趣を与える 出典: Adobe Stock
グラデーションカラーとは何か？
グラデーションは、ある色から別の色へ徐々に融合する遷移として定義されます。この融合は、同じ色調の色（明るい青から濃い青）、異なる色調の色（青から黄色）、さらには2つ以上の色（青から紫、そしてオレンジ）の間で起こる場合もあります。
グラデーションカラーには、その本質的な明るさと暗さの交差のために、画像に深みを与える効果があります。また、色相が変化するフローのお陰で、より多くの色をデザインに利用できるようになります。そして、グラデーションと様々なレベルの不透明度を組み合わせれば、画像に遠近感をつくり出すことも可能です。デザイナーは、ユーザーの視線を特定の領域にそっと誘導する手段としてグラデーションカラーを使用することもできます。
グラデーションカラーにはいくつかのスタイルやパターンがあります。それらすべてに色の開始点として中心的な役割を持つ領域が存在し、そこから段階的に他の色へと融合していきます。その結果として生まれるのは、視覚的なパターンです。パターンの見た目は、大きさ、形状、領域、色の選択などの条件により影響を受けます。
グラデーションカラーの種類
次は、一般的に使われるグラデーションカラーの種類を確認しておきましょう。
線形
線形グラデーションは、ある一本の線から始まる、帯状の色によるグラデーションです。始まりの線は水平または垂直である必要はありません。また、直線である必要もありません。いずれの場合も、グラデーションは、ある色から別の色へと滑らかに移行します。
直線から帯状の色の遷移をつくり出す線形グラデーション 出典: Chris Chittleborough via Wikimedia Commons
円形
円形グラデーションは、中心点から外周に向かって放射状に広がるグラデーションです。中心点の位置や大きさ、そして、色が変化する度合いは自由に選択できます。
中心点から放射状に広がる円形グラデーション 出典: Adobe Stock
円錐形
円錐形グラデーションは円形グラデーションと似ています。どちらも円の形をしていて、中心点から色の変化が始まるように見えます。異なる点は、放射状グラデーションが中心から外側の領域に向かう遷移であるのに対し、円錐形グラデーションでは時計回り（もしくは反時計回り）に陰影が変化することです。
円周に沿って変化する円錐形グラデーション 出典: Adobe Stock
菱形
菱形グラデーションは正方形や長方形などの四角形でよく使われます。中心点から四隅に向けて変化する色により、ダイヤモンドのような見た目を構成します。
中心点からダイヤモンドのような形状を構成する菱形グラデーション 出典: Adobe Stock
反射形
反射型グラデーションは、線形グラデーションを鏡を使って組み合わせたような見た目です。開始点から一方向だけに変化する線形グラデーションとは異なり、反射型グラデーションは両方向に鏡写しのように変化します。
鏡に映る線形グラデーションのような反射型グラデーション 出典: photoshopessentials.com
グラデーションカラーの使い方のヒント
ここからは、グラデーションカラーをデザインに取り入れる際に、基本的なビジュアルデザイン原則に加えて頭に入れておくべきポイントをいくつか紹介します。
適切な色を選ぶ
最も安全な色の選択方法は、類似した色（色相環の隣り合った色同士）や、同じトーンの色合いの組み合わせです。どちらの場合でも、様々な組み合わせを時間をかけて試してみましょう。
どの色の組み合わせが効果的かについて発想を得るために色相環は有効 出典: Adobe Stock
2つ以上の色の組み合わせを試す
2色だけのグラデーションは、中間にくすんだグレーの領域をつくることがあります。このような遷移は、ユーザーの目に不快な感覚を与えます。そうした場合は色をもうひとつ間に加えてみましょう。たとえば、色相環で2つのメインカラーの間にある色を選びます。
補いあう3色を使ったグラデーションの実験 出典: Adobe Stock
変化の度合いをなだらかにする
色の遷移をソフトにして、グラデーションをなだらかにするのは良い考えです。色の急激な、あるいは劇的な変化は目ざわりでユーザーを不快にさせる可能性があり、体験全体に悪い影響を与えることもあります。
ソフトな色の遷移を使用したなだらかなグラデーション 出典: Adobe Stock
焦点を意図的に選択する
グラデーションカラーの焦点を明確にすることで、ユーザーの視線を誘導するパスをつくり出すことができます。画面内の最も重要な箇所が強調されるようにグラデーションカラーの遷移を選択しましょう。
グラデーションカラーの焦点を調整するためにツールを使用する 出典: Adobe Blog
異なるシェイプやパターンを組み合わせる
異なる形やパターンのグラデーションカラーをデザインに使用してみましょう。円と楕円のように、似た形のグラデーションを組み合わせると、開始点や焦点が協調して機能する効果をつくり出せます。これにより、複雑にしすぎることなく、デザインに奥行や興味深さを与えられます。
不透明度を調整する
グラデーションに不透明度を適用するのもデザインの色合いや明るさを調整する優れた手法です。透過により、グラデーションの色だけでなく背景の色もブレンドされるため、より手の込んだ豊かなデザインのように感じられることが期待できます。
コントラストを確認する
美しくて機能的なデザインだからといってアクセシビリティを犠牲にしてはなりません。色のコントラスト比を常に確認して、Webコンテンツのアクセシビリティガイドライン（WCAG）が定める色コントラストの標準に準拠するよう心掛けましょう。
Coolors.coのようなツールを使い、グラデーション上のすべてのテキストがWebコンテンツアクセシビリティガイドラインを満たすことを確認する 出典: Coolors.co
おわりに
グラデーションカラー自体は新しいものではありませんが、一旦はフラットデザインに占拠されていたアプリデザインにより個性を与える手段のひとつとして、頻繁に目にするようになりました。Webやアプリをデザインする際のグラデーションカラーの扱い方を理解すれば、美しく機能的なユーザー体験をつくり出す手段をもうひとつ、デザインの道具箱に追加することができるでしょう。
この記事はBeing Shady: How to Use Gradient Color in UX Design（著者:Elize Todd）の抄訳です