グラデーションを美しく作るためのコツとNGポイント

Webデザインや配色理論を学んだことがある人でも、グラデーションに関しては自信を持って色を選ぶことができない人も多いのではないでしょうか。実際のところ、配色理論をそのままグラデーションの色選びに当てはめても、いまいち「ピンとこない」ことはよく起こることです。

それでは、グラデーションの色選びは「センス」で片付けられてしまうのでしょうか。実は、グラデーションの色選びにもしっかりとした*「理論」*があり、理論を学ぶことで、デザイナーはもちろんノンデザイナーの方でも美しいグラデーションを作り上げることができます。

そこで今回は、センス不要で美しいグラデーションを作るための4つのコツと2つのNGポイントをご紹介します。これまであまり語られることのなかったWebデザインにおけるグラデーション理論ですが、ここでしっかりと理解しておきましょう。

最新Webデザインの定番「グラデーション」

最近では、グラデーションをWebデザインに積極的に活用するWebサイトも増えてきました。グラデーションを使うことで、色を単色で利用するよりも生き生きとした、洗練された表現にすることが可能です。

もちろん、グラデーション自体は昔のWebデザインでも取り入れられていました。しかし、理論を無視したグラデーションばかりが採用された一昔前のWebデザインと違って、最近のグラデーションは理論にのっとっているため、洗練された美しいデザインに仕上がっています。

引用：Stripe - Online payment processing for internet businesses

例えば、オンライン決済プラットフォームを提供しているStripeもエレクトリックブルーと水色のグラデーションを使うことで、より近未来的な雰囲気を生み出すことに成功しています。

引用：フォリオ | テーマでえらぶ、あたらしい投資のかたち

テーマで株式を選んで人工知能に運用させるロボアドバイザーサービスのフォリオのWebサイトのように、ヘッダーだけでなくCTAボタンにグラデーションを用いる例も最近では珍しくありません。

しかしながら、問題なのは、どの色を組み合わせればよいのか、ということです。Webデザイナー方の中には「センス」で任意の2色をピックアップできる方もいるかもしれません。一方で、センスに自信がなかったり、理論上の説得力をもってグラデーションカラーを選びたい方もいるはずです。

そこで、ここからは*「12色相環」*と呼ばれる、色の関係を模式的に表した図を使って、最適なグラデーションカラーを選んでみましょう。

参考：
うまく使えば今っぽいデザインに！グラデーションを取り入れる前に知っておきたい基本

12色相環を使う ─ 色彩の基本を理解しよう

*色相環 (hue circle)*とは、色相を環状に配置したもので、色を体系的に把握する際に用いられる図のことです。そもそもなぜ人間の目にさまざまな「色」が違って見えるかといえば、色ごとに光の波長が違うからです。光の波長によって、「赤・橙・黄・緑・青・紫」が連続的に変化して知覚されます。これを円環上にしたものが色相環です。

引用：色相環の基本 / ShareWis

連続した色相環を用いてもよいのですが、理論的に把握するには12色相環と呼ばれる、色相環を12色に単純化したものを用いるのがよいでしょう。

センス不要で美しいグラデーションを作るための4つのコツ

それでは、色彩理論に基づいて、2色以上の色を利用したグラデーションを作ってみましょう。

1. 1色の明暗を変えてみる (トーン・オン・トーン配色)

最近Webデザインに取り入れられているグラデーションカラーの中でも、最もポピュラーだと言えるのが、1色の明暗を変えてグラデーションを作成する方法です。

もともと、色相(ヒュー)をそろえつつ色調(トーン)に差をつけた配色のことを*「トーン・オン・トーン配色」といいますが、基本的に調和して見えるので無難な配色だといえます。特に色調の異なるとても良く似た2色を使う手法を「カマイユ」(camaïeu)*と呼び、ファッション界でよく利用されます。

2. 隣同士の配色を使う (ドミナントカラー配色)

また、色相環上で隣同士の配色を使うグラデーションも頻繁に採用されています。色彩理論では、特定の色相で統一された配色を*「ドミナントカラー配色」*と呼びます。ドミナントとは「支配的な」を意味する言葉で、その色相のイメージ全体が配色全体を支配することになります。

隣同士の色は、光の波長が似ているので、自然と受け入れられやすいです。例えば、紫と赤紫を使えば女性的になり、黄橙と黄色を使うと子どもらしく、緑と黄緑を使えば健康的なイメージを表現するのに役立ちます。

3. 1つ飛ばして配色してみる (スプリット・コンプリメンタリー配色)

もう少し「今風」にしたいなら、12色相環上で1つ飛ばして配色してみるのもいいでしょう。

1つ飛ばして色を置くのは、スプリット・コンプリメンタリー配色と呼ばれる理論を応用したものです。グラデーションの移り変わっている場所に、1つ飛ばした色が自然に入るのがわかります。スプリットは「分裂」、コンプリメンタリーは「補色」を意味するので、この配色は正確にはある色に対する補色を両隣の2色に分裂した配色のことです。

4. 環をなぞる

これまでは主に2色の配色について解説しましたが、複数の色を合わせる時は、環をなぞる配色にするのがよいでしょう。

色相環は、光の波長が似ているもの同士が隣り合っているので、飛ばし飛ばしに色を2色繋げるよりも綺麗に見えます。

虹色は、一見関係なさそうな色順で並んでいるように見えますが、これは環をなぞった順番になっています。だから、人間の目には美しく見えるのです。Instagramのアイコンで採用されているグラデーションカラーは、紫から黄色までの色相の環をなぞった配色になっているので、調和しているように見えます。

仮に環をなぞらずにバラバラに色を指定してしまうと、かえって気持ち悪い配色になってしまいます(グラデーション下段)。色が多くなると失敗してしまうことがあるので、注意しましょう。

やってはいけない2つのNGポイント

次に説明する組み合わせで色を合わせてしまうと、不自然なグラデーションになってしまいます。ところが、初心者がよく陥りがちなポイントでもあるので、気をつけましょう。

1. 補色を組み合わせる

引用：Dropbox Design / 補色がコントラストを強める

アクセントカラーとして入れるのであれば話は別ですが、グラデーションに限っていえば、補色の組み合わせは避けるべきです。

補色をグラデーションで組み合わせてしまうと、コントラストが強すぎるので場合によっては気持ち悪く見えてしまいます。例えば、青い背景に黄色の文字であれば、非常に目立つのでデザインとしては効果的です。しかし、グラデーションで補色同士を繋げてしまうと色の「対立関係」が混じり合ってしまうので、不快に感じることがあります。

2. 色の数が多すぎる

色の数が多すぎると、全体的なバランスが崩れてしまい、不気味に見えてしまうことがあります。たくさんの色を使う場合、環をなぞるような色の組み合わせであれば美しく見えますが、闇雲に色の数を増やすだけでは、首を傾げてしまう場合があります。

そのときには、思い切って色の数を減らしてみましょう。

一昔前のMicrosoft Officeに入っていた標準のグラデーションパターンの中には、やや色の数が多く、不気味に見えるものもありました。慣れるまでは、2色の色を使って、4つのコツに基づいた色の組み合わせを選んであげましょう。

まとめ

以上、グラデーションの色選びで気をつけるべき点について確認しました。

グラデーションは通常の配色と違って*「混ざり合っている」*ため、その性質を理解しながら光の波長の近い色同士を合わせないと、不気味に見えてしまいます。色を選ぶ際には、色相環を参考にして選ぶようにしましょう。

参考：
より表現力が豊かに！もう一度学び直したいCSSグラデーションの基礎

この記事を読んだ方におすすめ

ミニマルデザインとは？Webデザインする際のポイントは

ミニマルデザインとは、構成する要素をできる限り少なくしたデザインです。すっきりとしたシンプルなデザインテイストは、邪魔になる要素が少ないことから、メッセージ性を強く打ち出せるメリットがあります。今回は、近年のデザイントレンドとして人気の高いミニマルデザインをご紹介します。

2Dでも3Dでもない！2.5D動画・アイソメトリックデザインとは？

2.5D動画という種類の動画をご存知でしょうか。デザイン自体は「アイソメトリックデザイン」とも呼ばれており、この技法を使って企業やサービスのブランディングを進める企業が増えてきました。 今回はこの2.5D動画、およびアイソメトリックデザインの効果を事例を交えて解説します。