グラデーションはWebデザインにとって欠かせない要素の1つであり、様々なWebサイトに取り入れられています。慣れてくると自分で思い通りに作れるようになりますが、初めはグラデーションの色使いに苦戦する人も多いのではないでしょうか。
今回は、グラデーションを作ってCSSのコードを出力することもできるジェネレータサービスをご紹介したいと思います。
INDEX
1. CSS Gradient
細かな値を指定して自分でグラデーションを作成し、CSSのコードを出力することができるジェネレータサービスです。
画像をアップロードして色を抽出することができたり、細かなカスタマイズが行えるなど、自分でグラデーションを作成する時にはCSS Gradientがおすすめです。
2. CoolHue
カラフルなグラデーションのアイデアがたくさん並んでいるサイトです。
Sketchのプラグインが提供されていて、Sketch上でおしゃれなグラデーションを使いたい時にすぐ呼び出すことができるのでとても便利です。もちろん、CSSのコードを出力することも可能です。
3. Mesh Gradients
こちらは他のグラデーションジェネレータとは少し違い、CSSコードを出力することはできませんがグラーデションを使った魅力的な画像をダウンロードすることができるサービスです。
様々な色が異なる形で折り重なったイメージはとても美しく、背景色として使用したり画像上に重ねても魅力的な雰囲気を生み出すことができますね。
4. Gradient Hunt
ユーザーが投稿した様々なグラデーションが掲載されているサービスです。
上部のボタンから線形グラデーションと放射グラデーションが選べるようになっており、それぞれのグラデーションはCSSコードで出力するか画像で出力するか選ぶことができます。
5. EggGradients
可愛らしい卵の形をしたグラデーションのアイデアが色ごとにまとめられていて、グラデーション探しに使えるサイトです。
色を選んだ後で下までスクロールすると、グラデーションを実際に使用して作られているサービスやデザインの例が並んでいるので、実際にグラデーションをデザインに取り入れる時の参考にもなります。
それぞれのグラデーションはCSSコードで出力することができるので、そのままCSSファイルに貼り付けすればグラデーションをWebデザインで使用することができます。
6. Grabient
鮮やかなグラデーションのアイデアが紹介されているサイトです。「COPY CSS」をクリックすると、CSSコードをコピーすることが可能です。
使われている色を変更したり、自分で色を追加したりできるので、カスタマイズして自分好みのグラデーションを作ることが可能です。
7. uiGradients
美しいグラデーションのサンプルがたくさん掲載されているサービスです。様々な組み合わせのグラデーションが紹介されていて、どれもきれいなものばかりなので見ているだけであっという間に時間が過ぎてしまいます。
Shiftキーを押すとグラデーション一覧を表示することができます。お気に入りの組み合わせを見つけてみてください。
8. WebGradients
様々な種類のグラデーションを探すことができるカタログのようなサービスです。ページ上でCSSをコピーすることができるので、気に入ったグラデーションが見つかったらコピペでデザインに適用することができます。
また、CSSだけではなくPNG形式の画像としてダウンロードすることができるので、画像素材としてグラデーションを使用することもできます。SketchやPhotoshopで利用できるファイルをダウンロードすることもできるので、UIデザインの際にもおすすめです。
9. GradPad
角度や位置を細かく設定してオリジナルのグラデーションを作ることができるグラデーションジェネレータです。
画面いっぱいにグラデーションが表示されているので、細かなチューニングを行いやすいですね。
10. Blend
2色を指定してグラデーションを作ることができるグラデーションジェネレータです。角度を変えたり、放射グラデーションに変更したりすることも可能です。
一見相性が良さそうな2色を選んでも、グラデーションにすると変な色合いになってしまったりするので、グラデーションの色使いのセンスも磨くことができるのではないでしょうか。
11. Gradients Cards
23種類のグラデーションのアイデアが紹介されているサイトです。同系色のグラデーションを中心に紹介されていますが、手でカラーコードを変更することも可能で、アレンジすることも可能です。
CSS、Adobe XD、Sketchの3種類のエクスポート方法が用意されていて、Adobe XDとSketchでそのまま利用できるのは助かりますね。カードの下にあるゲージを操作することで、グラデーションの色味を調整することもできます。
12. shade
自分でグラデーションを作成できるサービスです。2つの色の色相、彩度、明度を調整することで自由自在にグラデーションを作成することができます。
プレビューを確認しながらグラデーションを作成できるので、微妙なチューニングを行うときなどには最適ですね。作成したグラデーションは右下に表示されているCSSをコピーすればそのまま貼り付けて使用することが可能です。
13. 0to255
0to255はある1つの色について、最も明るい白から最も暗い黒までのグラデーションを表示することができるサービスです。クリック一つで簡単にカラーコードをコピーできるので、微妙な色の明るさを調節したい時に役立ちます。
配色のセンスを身に付けるには？
配色見本を活用しよう
色の組み合わせによってデザインのイメージは大きく変化します。自分で配色を考えることも大事ですが、慣れない間は配色パターン見本を活用して色の使い方を勉強する方が良いでしょう。
配色パターンの参考になるサイトや書籍はこちらで紹介しています。
色に関する基本知識を身に付けよう
色は、それぞれがイメージや心理的に与える効果を持っています。優れたデザインを作るためには、色の保つ効果や影響を理解しておくことが大切です。
優れたデザインを参考にしよう
配色の優れたサイトを参考にすることで、色の使い方に関するテクニックを磨いていくことができます。初心者の人ほど、最初は優れたデザインを参考にすることを意識すると早く配色のセンスを磨いていくことができます。
