閉じる
会社情報

株式会社ジム

〒102-0074 東京都千代田区九段南4-7-22 メゾンドシャルー407
TEL:03-3230-3722 FAX:03-3230-4327

設立
1981年
資本金
1,000万円
従業員数
17名(グループ含む)
取引銀行
みずほ銀行(市ヶ谷支店) 三井住友銀行(飯田橋支店)
事業内容
  • グラフィックデザイン
  • WEBデザイン
  • 映像制作
  • 展示会装飾デザイン
WORKS
HP
https://www.gym-ts.com/

はじめまして、アシスタントデザイナーのさとうです。
最近、海外ドラマにハマっているアラサーです。
ありがたいことに、いろいろなお仕事をいただいておりますが、
Webデザインのお仕事が多くなってきました。
㎜の世界とPointの世界を行ったりきたりしております。

 

Webデザインの際、色の幅がかなり広がるのですが、特に悩むのがグラデーションです。
組み合わせが多く、イメージに合うものを1から組み合わせるのは中々大変です。
そこで、私がいつもお世話になっているグラデーション見本TOP3をご紹介いたします。

1.WebGradients

180ものグラデーションのパターンがまとめられています!
すごい!しかもCSSコードまであります!コーダーの方やグラデーションパターンに行き詰まったデザイナーの方にオススメです。PNGデータもダウンロード可能です。

 

2.GraBient

25のグラデーションのパターンがあります。
先ほどご紹介したものより少ないのですが、なんと、こちらのサイトでは色の追加、変更、グラデーション色の割合、角度まで自分で変更ができます!もちろんCSSコードも作成され、コピーができます。

 

3.shade

色相、彩度、明度等で調整をしてグラデーションを作成できるサイトです。こちらはCSSコードはないのですが、簡単な操作でいろいろなパターンが試せます。
Webデザインをするにあたり、グラデーションにはとても助けられていますが、作成するのに悩みます。グラデーションに悩んだ際は参考にしてみてください。

4.おまけ

私のお気に入りの色見本サイトです。とてもきれいで、たまに見ては癒されています。表示切替をONにしたり、OFFにしたりをひたすら繰り返してしまいます。

まとめ

Webデザインをする際には、グラデーションを上手に意識することが重要です。今回紹介した4つのサイトを参考してみることで、コツがつかめるかもしれません。ぜひ参考にしてください。

 


ピックアップ記事

関連記事