WEBデザインやコーディングでよく使う参考サイトの総まとめ
今回は私がWEBデザインやコーディング業務をする際によく使うサイトについてまとめてみました。
いちいち検索するのが面倒だったり、ブックマークが大量で見にくかったりするので、WEBデザイン・コーディング業務で参考にしているサイトをこの記事に全て集めています！
このサイトもおすすめ！とか他にもこういうときこういうサイトためになるよ！などあればディスカッションで教えていただけると大変嬉しいです。
WEBデザインのネタ作りに使うギャラリーサイト一覧
WEBサイト全般
WEBサイトを一からデザインする際に参考にしているサイト一覧。
サイトトレースや日々のインプットでもよく使うサイトです。
ランディングページ
ランディングページに特化してインプットする際はこちらのサイトをよく使います。
SaaS系のサービスサイト
SaaS系でよくあるサービスサイト・コンテンツが多めのランディングページで参考にするサイト。
UI/UX、スマホサイト
また、スマホ特有のレスポンシブデザインでよく参考にするサイトはこちら。
若干毛色が違いますが、デザインシステムの構築で参考になるチェックリスト一覧をまとめたサイトもちょこちょこ使います。
バナー
バナー制作のときはよくこの2つのサイトを使います。
Facebook広告
Facebook広告について調べる際はこのツールを使います。競合調査もしやすくかなり便利です。
その他インプットに使うやつ
それでもネタが出ないときはPinterestを使っています。
また、日々のインプットではマナギャラリーというサイトをよく使います。
ただただサイトを並べるのではなく、どういうところが良いのかなどを詳しく解説しており、ネタ出しだけじゃなくシンプルにかなり勉強になります。
素材集めに使うサイトたち
画像やイラストなど、よく素材を集めたいときに使うサイトの一覧です。
海外系の画像素材サイト
海外チックな画像で使いたいときはこの2つのサイト。
一番無難な画像・イラスト素材サイト
結局、PhotoACやIllustACを使うことが多いですね。
アイコン・イラストが豊富な素材サイト
アイコン系ならこの3つと先ほど挙げたイラストACを使うことが多いです。
テクスチャ系
テクスチャ素材が便利なサイト。他にもモックアップなど素材が豊富。
配色で悩んだときに使うサイトたち
サイトやバナーのデザインで悩んだときに使う配色参考サイトです。
色の組み合わせで悩んだときは、大体AdobeColorのカラーホイールをいじって決めることが多いです。
AdobeColor
また、メインカラーすらもまともに決められないときは、こちらのサイトをよく使います。
コーディングするときに使うサイトたち
コーディングでアイコンを使うときはほぼ100%使うfontawesome。
fontawesome
また、fontawesomeのCDNやCSSでの使い方が思い出せないときはいつもこちらの記事を読んでいます。
使いたいフォントがあるときは大体Googleフォントで探します。
Googleフォント
画像の一部部分だけリンク先を変えたいときはマッピング機能を使います。
そのマッピングの範囲を決める際に使うのがこちらのジェネレーター。
イメージマッピングジェネレーター
一部分だけmarginを使いたいなど、一部分だけのスタイリングで使うCSSのクラス名はよくtailwindcssの命名を使っています。
そのtailwindcssの命名一覧をまとまっているチートシートがこちら
tailwindcssチートシート
また、機能ごとにCSSやJSのクラス名。変数名を決めるのに使う翻訳（？）サイトがこちら。
例えば、JSの機能が有効かどうかを判定するタグのクラス名を決めたいときは「有効かどうか」と入力すると、「is_valid」と表示されます。
こんな感じで命名で悩んだときはよく使うサイトです。
codic
WordPressのテーマやプラグインを大体調べるときに使うのがこのサイト。テーマからサイトを検索することもできるのでかなり便利です。
WP-Search
コーディングでよくコピペしがちなサイト
コーディング中、「この機能を一からコーディングするのが面倒だなー」と思ったときによくコピペさせてもらっているサイトたちです。
メニューや動きなど機能系の参考サイト
見出しやリストや吹き出しなどデザイン系の参考サイト
IT系で知らない単語が出たときに使うサイト
インスタンス化やカプセル化などいまいち概念が理解できない単語が出たときに、なんとなーく理解するために使うサイトです。
「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
一時期、「〇〇（調べたい単語） わかりそうでわからない」で検索していたこともあるくらいよく使っていました。
普段よく読むブログや参考サイト
若干、WEBデザインやコーディングで使うサイトとはずれてしまいますが、日頃のデザイン・コーディングのインプットで使うブログサイトです。
私はよくFeedlyという新着記事を全部一つにまとめてくれるRSSリーダーを使って読んでいます。
勉強でよく使うサイトたち
WEBデザインやコーディングの学習でよく使うサイトです。（でした。）
原点回帰したい際におそらく使うだろうと思い、まとめておきます。
コーディングの練習でよく使うサイト
コーディングは模写というより、クリ★スタさんのようなカンプからコーディングができるようなサイトをよく使っていました。
サイトトレースでよく使う参考のサイト
WEBデザインは基本サイトトレースで練習していました。
トレースの題材は一番最初にまとめたギャラリーサイトから選んでいましたが、サイトトレースの考え方で参考にした記事がこちら。サイトトレースする際の視点が学べます。
特に参考にした視点は以下の5つ。
今でもネットサーフィンする際は、この5つを使ってWEBサイトを見ています。
- 余白間（マージン）の取り方
- 見出しやテキストとのジャンプ率の付け方
- 使用色の割合と使用数、差し色の使い方
- 要素同士のサイズ感のバランス
- 際立たせたい箇所の目立たせ方
バナートレースでよく使う参考のサイト
バナートレースする際も基本的に題材はギャラリーサイトから選んでいましたが、ノウハウ等はいろいろな記事で視点を学びました。
Illustratorでバナートレースする際はこちらの記事でIllustratorの初期設定を学びました。
特に、IllustratorはもともとDTPで使うソフトなので、WEB系の初期設定をまとめてもらえるのはありがたいですね。
また、バナーをトレース・作成する際のステップや視点をまとまっているこちらの記事もよく見直します。
最後に
ということで、WEBデザインやコーディングでよく使う参考サイト一覧でした。
おそらくまだまだ「このサイトよく使ってるなー」と思う記事やサイトが出てくると思うのでその際は随時更新します。
それでは。
Discussion