グラデーションの配色に悩んだら参考にするサイト
「グラデーションの配色ってむずかしい…」
そう思ったことがある人は多いのではないでしょうか？
うまく使えば先進的なイメージやナチュラルな雰囲気の演出など、多彩な表現ができますが、失敗すると古くダサい印象を与えることもあります。
選べる色が多いほど難易度は高くなるので、悩んだときは配色の見本がそろったサイトを見るのも一つの手かと思います。
この記事では、グラデーションの配色に悩んだとき参考になるサイトを紹介します。
こんな人におすすめの記事です
- グラデーションの配色が苦手な人
- グラデーションの配色に悩んでいるデザイナー
- 配色のインスピレーションがほしい人
- グラデーションをつかってみたい人
グラデーションの配色見本サイト
グラデーションの配色見本を集めた、4つのサイトを紹介します。
プライベートワークやグラデーションの練習ならそのまま使ってもいいような、バランスのいい配色がそろっています。
WebGradients
- 180種類のグラデーション見本
- グラデーションの種類はライナーのみで2色
- PNG画像を保存できる
- CSSのコードをワンクリックでコピーできる
180種類のグラデーションを掲載したサイト。
すべて線形グラデーションで、PNG画像の保存とCSSコードのコピーができます。色数は2色まで。
やわらかいニュアンスカラーから、ダーク、クールな配色まで、幅広くそろってます。シンプルで使いやすく、ローディングとインタラクションもきれいなので好きです。
CoolHue
- 60種類のグラデーション見本
- グラデーションの種類はライナーのみで2色
- PNG画像を保存できる
- CSSのコードをワンクリックでコピーできる
- Figma、Sketchのプラグインがある
60種類のグラデーションを掲載したサイト。
こちらもすべて線形グラデーションで、PNG画像の保存とCSSコードの保存ができます。色数は2色まで。
CoolHueで特徴的なのは、FigmaとSketchでつかえるプラグインがあること。プラグインを使うと、選んだグラデーションを簡単にシェイプへ適用できます。
仕事ではFigmaを愛用しているので、プラグインの方をよく利用します。
Grabient
- 25種類のグラデーション見本
- 種類はライナーのみ、角度が変更できる
- 色の追加ができる（複数可）
- 色が変わる位置を変更できる
- CSSのコードをワンクリックでコピーできる
25種類のグラデーションを掲載したサイト。
基本の色は少なめですが、自分で変更できる部分が多く、一番自由度が高いです。
線形グラデーションの角度が変更でき、色数の追加、色の変わる位置を変えることもできます。もちろんCSSコードのコピーも可能。
今回紹介しているサイトのなかでも、特に実用的な感じがします。
uiGradients
- 掲載数はたくさん
- グラデーションの種類はライナーのみ
- 色のカテゴリ別に調べられる
- CSSのコードをワンクリックでコピーできる
- jpg画像が保存できる
色数は簡単にカウントできないほど豊富です。
[ Shift ] キーを押すとメニューが出てきて、赤、黄、青など色のカテゴリ別にグラデーションを選べます。1つでも色が定まっている場合にオススメです。
まとめ
グラデーションの配色選びで役立つサイトを4つ紹介しました。
デザイナーにとっても難易度の高いグラデーションの色選びですが、正しく扱うことができれば、デザインに奥行きや世界観を与え、洗練されたデザインを作成できます。
丁寧に色を選ぶことはもちろん大切ですが、悩んで悩んで手が止まってしまったときは、便利なサイトやツールを試してみるのもありでしょう。
この記事が少しでもグラデーションの色を選ぶ際のヒントになり、より良いデザインを作成する助けになれば幸いです！
デザイン・配色の関連記事
この記事を読んだ方には、以下の記事もおすすめです。あわせてお役立てください！
