アラサー主婦のWEBデザイン奮闘記

Webデザイン Web制作 制作お役立ち

グラデーションを作る時に役立つサイト5選

投稿日:2018-12-21 更新日:

ギャラリーサイトを見ていると、グラデーションを使ったデザインをよく見かけますよね。

中でも、色の変化の仕方が綺麗なサイトだとつい見とれてしまいます。

私も綺麗なグラデーションを取り入れたデザインを作りたいなーと思ってやってみるんですが、これが意外と難しくて…!

自分の感覚だけで作ったグラデーションだと、色の変化が不自然だったりして全然綺麗じゃないんです…。

そこで自分で考えるんじゃなくて何か参考になるサイトがないかな〜と調べてみたら、いくつか良いところを発見したのでご紹介します!

 

Egg Shape Background Gradients

http://www.eggradients.club/

卵の形がなんとも可愛らしいこちらのサイトでは、168種類ものグラデーションパターンが用意されています。

黄色・ピンク・紫などの色合いに絞ってグラデーションを表示することも可能です。

 

CSS Colour Gradients with GradPad

http://ourownthing.co.uk/gradpad.html

下部のスライダーを動かすことでグラデーションを調整することができるので、自分でいじりながらいい感じのグラデーションを作りたい、という人にオススメのサイトです。

ベースとなるグラデーションを変更したい場合は、上にある「Gradient Gallery」から選ぶことができます。

 

coolhue

https://webkul.github.io/coolhue/

色相を変化させた美しいグラデーションパターンが豊富に揃っているサイトです。

気に入ったグラデーションのCSSコードをコピーできるのはもちろん、PNGとして保存することも可能です。

 

uiGradients

https://uigradients.com/

こちらのサイトでは、自分でカラーを調整することはできないので、既に用意されたグラデーションを見て参考にしたいという方にオススメです。

右上にあるメニューからグラデーションの向きを変えたり、そのグラデーションのCSSコードやJPEG画像を取得することができます。

グラデーションパターンの一覧は、左上の「Show all gradients」から見ることができますよ。

 

0to255

http://www.0to255.com/

こちらのサイトは、同一色相のカラーを使用したグラデーションの変化を表示してくれるサイトです。

派手すぎないグラデーションを作りたいときにとくに参考になるサイトだと思います。

 

まとめ

いかがでしたでしょうか?

上記以外にも様々なサイトがありますが、今回は個人的に操作が単純で、使いやすいと思ったサイトのみ厳選してご紹介しました。

もっと自分なりのグラデーションを作成したい!という方は、shadeというサイトがおすすめです。ご紹介した「GradPad」よりも更に微調整ができるので、直感的にグラデーションを作成することができますよ。

紹介は以上となりますが、気に入ったサイトがあればブックマークをして、ぜひグラデーションを作る時の参考にしてみてくださいね。

-Webデザイン, Web制作, 制作お役立ち

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

新米デザイナーが入社2ヶ月目で学んだこと

制作会社に入社して2ヶ月が経ち、徐々に仕事に慣れつつも、まだまだ奮闘中のぶちこです。 今日は2ヶ月目に学んだことを忘れないように、ここに書き留めていこうと思います。 自分の学習メモといった感じになりま …

Googleの便利な検索方法

日常的に使うGoogle検索ですが、便利な検索の仕方があるのを皆さんはご存知ですか? 私はこの検索方法を知った時は、「今までなんで知らなかったんだろう…」とすごく損した気持ちになりました。 …

チラシやパンフレット製作時に参考になるサイト

Webサイトの参考サイトに比べて、チラシなどの印刷物のギャラリーサイトって意外と少ないですよね。 とは言っても何の参考もなしにデザインをするのは大変です…。 私は普段Google画像検索や …

PC内のフォントを一覧表示できる「wordmark.it」が便利!

色々なフォントをインストールしてあるのはいいけれど、選ぶ時がけっこう大変…という方も多いのでは? そこで今回は、フォント選びを楽にしてくれるwebサービス「wordmark.it」をご紹介 …

【Illustrator】ドキュメントをPDF化する時は「複製を保存」で行うのが安心

IllustratorドキュメントをPDF化する時、私は以下のようなミスをよくやってしまいます。 Illustratorで作ったものを、一旦クライアントに送ったりするために別名保存でPDF化 ↓ PD …