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

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

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

1. 補色を組み合わせる

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

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

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

2. 色の数が多すぎる

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

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

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

まとめ

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

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

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

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

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

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

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

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