グラデーション

定義

グラデーションは、2つ以上の色が境界なくなめらかにつながる背景です。ある色から別の色へ、 じわじわとにじむように移り変わっていく効果だと考えるとわかりやすいです。ここで決めることが 2つあります。ひとつは色が流れていく向き、つまり角度で、もうひとつはどの地点で色が 切り替わるかを指定する色の停止点（ストップ）です。角度で上から下なのか斜めなのかを決め、 停止点で色が切り替わる位置と割合を調整します。停止点を2つだけ使えばシンプルな2色の グラデーションになり、いくつも使えば虹のように複数の色をつなぐグラデーションになります。 ヒーロー領域の大きな背景、ボタン、カードの奥など、のっぺりした単色に奥行きと生き生きした 印象を足したいときによく使われる表現です。

なぜ重要か

単色の背景はすっきりしていますが、ともすると平坦で味気なく見えることがあります。 グラデーションは色が微妙に変化することで、画面にほのかな立体感と動きを加え、同じ レイアウトでもずっと洗練されて完成度が高く見えるようにしてくれます。とくに最初に ユーザーの視線を引きつけたいヒーロー領域や、クリックを促したい主要なボタンで効果が 大きいです。単色をひとつ変えるだけで雰囲気が変わるように、グラデーションは少ない手間で 画面の印象を大きく変えられる表現です。ただしグラデーションは、うまく使えば上品ですが、 使い方を誤るともっとも野暮ったくなりやすい要素でもあります。色を混ぜすぎたり コントラストが強すぎたりするとすぐにごちゃついてしまうので、ほのかに抑えて使うほど かえって洗練されて見える、という感覚を覚えておくとよいです。派手さより抑制が 洗練を分ける、という点がグラデーションの核心です。

よくある間違い

• 明るさの差が大きすぎる2色をつなぐことです。とても明るい色ととても暗い色をそのまま 混ぜると、中間地点に濁った灰色の帯ができて汚らしく見えます。2色の明るさを近づけると、 移り変わりがなめらかになります。
• 色相環で遠く離れた色を無理につなぐことです。たとえば赤と緑をそのまま混ぜると、中間に 泥水のような濁った色が出てきます。互いに近い色どうしをつなげば、中間の色まできれいに つながって自然になります。
• グラデーションを濃く派手に使いすぎることです。色が強く渦を巻くと、その上の文字が 読めなくなり画面全体が散らかって、本来伝えたかった内容が埋もれてしまいます。

実務のヒント

• 2色の明るさを近づけて、色相環で近い2色を選びましょう。隣り合う色どうしを似た明るさで つなぐと、中間に濁った帯ができず、おおむね自然で安定した結果になります。
• ほのかに使うほど洗練されて見えます。2色の差を大きく広げるより、ごくわずかに変化する くらいに抑えると、背景が浮かず、それでいて味気なさが消えて、ずっと完成度高く見えます。
• グラデーションの上に文字を載せるときは、いちばん明るい地点といちばん暗い地点の両方を 基準に文字のコントラストを確認しましょう。背景色が変わるぶん、どの位置でも文字が くっきり読めるか点検すれば、特定の区間で文字が埋もれる事故を防げます。

関連概念