グラデーション

グラデーションの代表配色例

• #EFF1FC背景をコピー
• #252944文字と構造をコピー
• #707AE1主色をコピー
• #CA91D2強調色をコピー

比はWCAG 2.2の計算式で求めた値です。4.5:1以上は本文の文字、3:1以上は大きな文字や図形に使える目安です（達成基準1.4.3・1.4.11）。

グラデーションのプロンプト例

グラデーションの主な視覚的特徴

1. 色が徐々に混ざる面

   面の中で色を少しずつずらしながら、二つ以上の色を混ぜ合わせます。一方向へ移る線形や中心から広がる円形など、色が移る向きによって種類が分かれます。

2. 境目を立てない連続した色の変化

   位置に応じて色が連続して変わるため、はっきりした境目ができません。反対に、隣り合う二色を同じ位置に置くと、なめらかな変化の代わりにくっきりした縞になります。

3. 複数色をつなぐ中間色

   隣り合う二色の間には、両方を混ぜた中間の色が並びます。初期設定では、二色のちょうど真ん中の位置に、二色の中間の色が来ます。

グラデーションが向いている成果物

• • 広告バナー
  • SNS投稿画像
  • 商品パッケージ

  連続する色の流れで面に変化を作り、模様を増やさずに名称や短いメッセージを引き立てられる。

• • 商品・サービス紹介ページ（LP）
  • イベントサイト

  共通の色の流れを見出しや面に使い、ページを一貫した色の印象でまとめられる。文字の背景は読みやすさを保つ。

グラデーションとは

グラデーションは、二つ以上の色や濃淡を少しずつつないで、色の変化そのものを見せる表現です。ウェブ技術の解説書MDNは、CSSのグラデーションを、二つ以上の色の段階的な移り変わりでできた特別な種類の画像と説明しています。

アドビのイラストレーターでは、グラデーションツールで色の間を少しずつ混ぜることができ、線形、円形、フリーフォームの3種類から選べます。CSSには、仮想の線に沿って色が変わる線形、中心点から広がる放射、円の周りを回る扇形があります。色を置く位置を調整すれば、変化の幅を変えられます。CSSのグラデーションは2015年7月から主要なブラウザで使えるようになり、似た効果のために使われてきた画像ファイルを不要にできます。

木版画にも、色の濃淡を段階的につける技法があります。日本美術の用語辞典JAANUSによると、浮世絵、とくに19世紀の風景版画では「ぼかし」と呼ばれる技法が使われました。版木を湿らせた布で拭いて絵具を薄める「拭きぼかし」と、濃淡の部分のために別の版木を用意する「板ぼかし」があります。横一文字の帯状の「一文字ぼかし」は、葛飾北斎と歌川広重のほぼすべての風景版画で空の表現に使われました。

見分けるときは、次の点を確かめてみてください。

• 色が境目なく少しずつ移り変わっている
• 二つの色の間に、両方を混ぜた中間の色が並んでいる
• 模様や輪郭ではなく、色の流れで面に変化をつけている

これらが揃っていると、グラデーションの特徴を持っていると言えるでしょう。

出典

• Create a gradual blend in colors using the Gradient tool（新しいタブで開きます）Adobe
• Create a gradual blend in colors using the Gradient tool (Internet Archive)（新しいタブで開きます）Adobe
• <gradient> - CSS（新しいタブで開きます）MDN Web Docs (Mozilla)
• Using CSS gradients（新しいタブで開きます）MDN Web Docs (Mozilla)
• bokashi ぼかし（新しいタブで開きます）JAANUS (Japanese Architecture and Art Net Users System), Columbia University Media Center for Art History
• ichimonji bokashi 一文字ぼかし（新しいタブで開きます）JAANUS (Japanese Architecture and Art Net Users System), Columbia University Media Center for Art History

名称・説明・主な視覚的特徴と「グラデーションとは」の事実は、上の出典に基づきます。特徴の説明と見分け方は、出典の内容をこの図鑑がまとめたものです。代表配色例・向いている成果物・プロンプト例は、この図鑑の編集上の提案です。制作・編集：小林 秀樹（セカヤサAIブログ）