グラデーションはWebデザインにとって欠かせない要素の1つで、様々なWebサイトに取り入れられています。慣れると自分で思い通りに作れるようになりますが、初めはグラデーションの調整に苦戦する方も多いのではないでしょうか。
今回はグラデーションの配色のサンプルを探したり、自分でグラデーションを作ることができるサービスやツールをご紹介していきたいと思います。
uiGradients
uiGradientsは美しいグラデーションのサンプルがたくさん掲載されているサービスです。様々な組み合わせのグラデーションが紹介されていて、どれもきれいなものばかりなので見ているだけであっという間に時間が過ぎてしまいます。Shiftキーを押すとグラデーション一覧を表示することができます。お気に入りの組み合わせを見つけてみてください。
WebGradients
WebGradientsは様々な種類のグラデーションを探すことができるカタログのようなサービスです。ページ上でCSSをコピーすることができるので、気に入ったグラデーションが見つかったらコピペでデザインに適用することができます。また、CSSだけではなくPNG形式の画像としてダウンロードすることができるので、画像素材としてグラデーションを使用することもできます。。SketchやPhotoshopで利用できるファイルをダウンロードすることもできるので、UIデザインの際にもおすすめです。
shade
shadeは自分でグラデーションを作成できるサービスです。2つの色の色相、彩度、明度を調整することで自由自在にグラデーションを作成することができます。プレビューを確認しながらグラデーションを作成できるので、微妙なチューニングを行うときなどには最適ですね。作成したグラデーションは右下に表示されているCSSをコピーすればそのまま貼り付けて使用することが可能です。
CSS Gears Gradient Cards
23種類のグラデーションのアイデアが紹介されているサイトです。同系色のグラデーションを中心に紹介されていますが、手でカラーコードを変更することも可能で、アレンジすることも可能です。
CSS、Adobe XD、Sketchの3種類のエクスポート方法が用意されていて、Adobe XDとSketchでそのまま利用できるのは助かりますね。
0to255
0to255はある1つの色について、最も明るい白から最も暗い黒までのグラデーションを表示することができるサービスです。クリック一つで簡単にカラーコードをコピーできるので、微妙な色の明るさを調節したい時に役立ちます。
まとめ
グラデーションを上手に取り入れると、Webサイト全体の雰囲気をスタイリッシュにしたり、神秘的な雰囲気にしたりなど、様々な効果を生み出すことが可能になりますね。始めは使い所が分かりづらいかもしれませんが、慣れてくると使うべきポイントが見えてくるようになるはずです。
通常のカラーパレットサービスもこちらの記事で紹介しています。ぜひ参考にしてみて下さい。
