はじめに

自分がいちいち検索しなくて済むようにまとめただけの投稿です。赦して。

Webデザイン

見る人を惹きつけ、情報を受け取ってもらうために参考にしたいサイト達。

美しいWEBデザインの作り方と9つのコツ

スタイリッシュで人を惹きつけるサイト作りの上で重要な余白や配色、構成などが紹介されている。すぐに活用できるコツから、行き詰った時の解決策、Webデザインの心構え（？）まで網羅されており、忘れたころに何度も見返したい。
URL : https://stand-4u.com/design/webdesign.html

ゴールを念頭にWebサイトをデザインするということ

単なるデザインから一歩踏み込んだ、より効果的・戦略的なサイトを作りたいとき役に立つ。何のためのWebサイトで、何のためのデザインかを再確認させられる。
URL : https://uxmilk.jp/72792

ウェブデザインスキルを高める１３のコツ

自分のイメージだけで作っていくと、デザインが古めかしくなったり、自分の好みが主張しすぎて情報を伝達する役割が薄れたりすることがあるかもしれない。作ってみて、なんか違う感がしたら参考にしてみよう。
URL : https://blog.hubspot.jp/web-design-13-tips

Webデザインに取り入れたいグラデーションの効果的な使い方

グラデーションを使った美しいサイトを多数紹介していて、グラデーションを扱う上でのコツなども載せている。お手本にしてサイトを作ってみると思いのほかきれいな出来になる。すごい。
URL : https://spc-jpn.co.jp/blog/4306/

要素

全体のデザインではなく、ボタンやアイコン、グラデーションに関して今すぐに活用できるサイト達。

CSSで作る！押したくなるボタンデザイン100（Web用）

いちいちデザインに悩むボタンが、CSSのコードと共に多数掲載されている。目次から自分の求めている雰囲気のボタンをすぐに見つけられるうえ、コードをすぐに確認できるという優れサイト。~~そもそもこのページ自体のデザインが好み~~
URL : https://saruwakakun.com/html-css/reference/buttons#section7

Grabient

25種類のサンプルから、色やバランスを自由に調整することでグラデーション作成が簡単に行える。コードもすぐに参照できるため優秀。下と合わせて活用したい。
URL : https://www.grabient.com/

CSSのグラデーション（linear-gradient）の使い方を総まとめ！

上のグラデーションサンプルのサイトに付随して。基本のグラデーションを表示させるコードから、様々な活用例までわかりやすく説明されている。グラデーションのサンプルやジェネレーターなどの外部リンクも充実していて、これだけ見ればばっちりカモ？
URL : https://saruwakakun.com/html-css/basic/linear-radial-gradient#section12