グラデーションの作成方法。綺麗な配色のコツや自動で作ってくれるサイト

Webで人気なデザインの一つに、グラデーションの使われた配色があります。
綺麗なグラデーションの作り方をマスターすれば、ユーザーの印象に残るWebサイトを作成できます。
今回の記事では、綺麗なグラデーションの作成方法や自動でグラデーションを作ってくれるサイトを紹介します。

グラデーション配色の方法は主に4つ

まずは、主なグラデーションの配色方法を4つ紹介します。
基本的にこの方法で配色すれば綺麗にグラデーションを作れるのでぜひ試してみてください。

明度差でグラデーションを作る

明度差

明るい方から暗い方へ、または、暗い方から明るい方へと明度を変化させるグラデーションです。

彩度差でグラデーションを作る

彩度差

鮮やかな色から、徐々に無彩色な色へと変化するグラデーションです。

トーン差でグラデーションを作る

トーン差

明度と彩度の両方を段階的に変化させるグラデーションです。

色相差でグラデーションを作る

色相差

明度と彩度が同じで、色相だけが変わっていくグラデーションです。
トーンが同じで、色味だけが異なります。


グラデーション配色のコツ

ここでは、グラデーションの配色をする上でのコツを紹介します。
コツを抑えて配色すれば失敗することもなくなるのでぜひチェックしてみてください。

隣同士の色を使う

隣同士

色相環上で隣同士の配色を使う方法です。
隣同士の色は、光の波長が似ているため見た人に自然と受け入れられやすいグラデーションになります。

1つ飛ばして配色してみる

1つ飛ばし

もう一つの配色方法に12色相環を1つ飛ばして配色するという方法もあります。
スプリット・コンプリメンタリー配色と呼ばれる理論を応用したもので、Webデザインでもよく使われる配色方法です。

補色を組み合わせない

グラデーションで、補色の組み合わせはおすすめしません。
補色をグラデーションで組み合わせると、コントラストが強すぎるためあまり綺麗なグラデーションにはなりません。

色数を増やし過ぎない

色の数が多すぎると、全体的なバランスが崩れて綺麗なグラデーションになりません。
たくさんの色を使いたい場合は、色相環をなぞるような配色をしましょう。


綺麗なグラデーションが作れるサイト

最後に、綺麗なグラデーションが作るサービスサイトを紹介します。
それぞれの特徴なども紹介しておりますので、ぜひご覧ください。

WebGradients

WebGradients

約180種類ものグラデーションがまとめられたサイトです。
それぞれのグラデーションのpng画像をダウンロードでき、CSSをコピーすることもできます。
PhotoshopやSketch用のグラデーションも配布されているのでおすすめです。

参考 WebGradientsを使ってみるWebGradients

CSS Gradient Animator

CSS Gradient Animator

アニメーションするグラデーションのCSSを生成してくれるサイトです。
グラデーションの角度や位置、時間、色を指定するとコードが生成されます。
コピべすれば、簡単にアニメーションするグラデーションを実装できるのでWebデザインをする人におすすめのサイトです。

参考 CSS Gradient Animatorを使ってみるCSS Gradient Animator

Gradient Buttons

Gradient Buttons

Webデザインで使えるグラデーションボタンを集めたサイトです。
コードをコピペすればすぐに実装できるため、こちらもWebデザインをする人におすすめです。
ホバーエフェクトがついておりクオリティの高いデザインができます。

参考 Gradient Buttonsを使ってみるGradient Buttons

まとめ:綺麗なグラデーションにはルールがある

綺麗に見えるグラデーションにはルールがあり、それらを理解することで自分で綺麗なグラデーションを作成できるようになります。
ぜひ今回紹介した内容を参考にして、制作に役立ててください。

また、当サイトでは2020年からIllustratorやPremiere Proなど、Adobeソフト関連の使い方に関する記事を投稿しております。
画像加工や動画編集に関する情報や知識に興味のある方は、ぜひチェックしてみてください。