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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. 環をなぞる

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

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

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

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