記事内に商品プロモーション・アフィリエイト含む場合があります「グラデーションの配色ってむずかしい...」そう思ったことがある人は多いのではないでしょうか?うまく使えば先進的なイメージやナチュラルな雰囲気の演出など、多彩な表現ができますが、失敗すると古くダサい印象を与えることもあります。選べる色が多いほど難易度は高くなるので、悩んだときは配色の見本がそろったサイトを見るのも一つの手かと思います。この記事では、グラデーションの配色に悩んだとき参考になるサイトを紹介します。配色のインスピレーションがほしい人グラデーションをつかってみたい人スポンサーリンクContentsグラデーションの配色見本サイトWebGradientsCoolHueGrabientuiGradientsまとめグラデーションの配色見本サイトグラデーションの配色見本を集めた、4つのサイトを紹介します。プライベートワークやグラデーションの練習ならそのまま使ってもいいような、バランスのいい配色がそろっています。fuyuna実際の仕事でそのまま使うことはなく、インスピレーションがほしいときや、仮で色を入れるときなどに使ってます。WebGradientsWebGradients180種類のグラデーション見本グラデーションの種類はライナーのみで2色PNG画像を保存できるCSSのコードをワンクリックでコピーできる180種類のグラデーションを掲載したサイト。すべて線形グラデーションで、PNG画像の保存とCSSコードのコピーができます。やわらかいニュアンスカラーから、ダーク、クールな配色まで、幅広くそろってます。シンプルで使いやすく、ローディングとインタラクションもきれいなので好きです。CoolHueCoolHue60種類のグラデーション見本グラデーションの種類はライナーのみで2色PNG画像を保存できるCSSのコードをワンクリックでコピーできるFigma、Sketchのプラグインがある60種類のグラデーションを掲載したサイト。こちらもすべて線形グラデーションで、PNG画像の保存とCSSコードの保存ができます。CoolHueで特徴的なのは、FigmaとSketchでつかえるプラグインがあること。プラグインを使うと、選んだグラデーションを簡単にシェイプへ適用できます。仕事ではFigmaを愛用しているので、プラグインの方をよく利用します。種類はライナーのみ、角度が変更できる色の追加ができる(複数可)色が変わる位置を変更できるCSSのコードをワンクリックでコピーできる25種類のグラデーションを掲載したサイト。基本の色は少なめですが、自分で変更できる部分が多く、一番自由度が高いです。線形グラデーションの角度が変更でき、色数の追加、色の変わる位置を変えることもできます。CSSコードのコピーも可能。今回紹介しているサイトのなかでも、特に実用的な感じがします。uiGradientsuiGradients掲載数はたくさんグラデーションの種類はライナーのみ色のカテゴリ別に調べられるCSSのコードをワンクリックでコピーできるjpg画像が保存できる色数は簡単にカウントできないほど豊富です。キーを押すとメニューが出てきて、赤、黄、青など色のカテゴリ別にグラデーションを選べます。1つでも色が定まっている場合にオススメです。まとめグラデーションの配色に悩んだとき、参考になるサイトを4つ紹介しました。配色は色が増えるほどむずかしくなり、色の範囲や方向も変えられるグラデーションは特にバランスをとりにくいですよね。Blog|暮らしと仕事を楽しむ30代・元デザイナーのブログデザインAdobeをフォトプランに変更。独学のデザインと、デザインの独学。して二次救急病院で約6年働き、デザイナーへ転職。