🔖

WEBデザインやコーディングでよく使う参考サイトの総まとめ

4 min read

今回は私がWEBデザインやコーディング業務をする際によく使うサイトについてまとめてみました。

いちいち検索するのが面倒だったり、ブックマークが大量で見にくかったりするので、WEBデザイン・コーディング業務で参考にしているサイトをこの記事に全て集めています!

このサイトもおすすめ!とか他にもこういうときこういうサイトためになるよ!などあればディスカッションで教えていただけると大変嬉しいです。

WEBデザインのネタ作りに使うギャラリーサイト一覧

WEBサイト全般

WEBサイトを一からデザインする際に参考にしているサイト一覧。
サイトトレースや日々のインプットでもよく使うサイトです。

http://muuuuu.org/
https://sankoudesign.com/
http://bm.straightline.jp/
http://io3000.com/
https://bookma.torch.blue/
https://81-web.com/
http://bm.s5-style.com/

ランディングページ

ランディングページに特化してインプットする際はこちらのサイトをよく使います。

http://lp-web.com/

UI/UX、スマホサイト

また、スマホ特有のレスポンシブデザインでよく参考にするサイトはこちら。

http://design.web-hon.com/

バナー

バナー制作のときはよくこの2つのサイトを使います。

http://banner.keizine.net/
http://retrobanner.net/

その他インプットに使うやつ

それでもネタが出ないときはPinterestを使っています。

https://www.pinterest.jp/

また、日々のインプットではマナギャラリーというサイトをよく使います。
ただただサイトを並べるのではなく、どういうところが良いのかなどを詳しく解説しており、ネタ出しだけじゃなくシンプルにかなり勉強になります。

https://desaken.com/archives/managary

素材集めに使うサイトたち

画像やイラストなど、よく素材を集めたいときに使うサイトの一覧です。

海外系の画像素材サイト

海外チックな画像で使いたいときはこの2つのサイト。

https://unsplash.com/

https://o-dan.net/ja/

一番無難な画像・イラスト素材サイト

結局、PhotoACやIllustACを使うことが多いですね。

https://www.photo-ac.com/
https://www.ac-illust.com/
https://www.silhouette-ac.com/

アイコン・イラストが豊富な素材サイト

アイコン系ならこの3つと先ほど挙げたイラストACを使うことが多いです。

http://flat-icon-design.com/
https://icooon-mono.com/
https://storyset.com/

配色で悩んだときに使うサイトたち

サイトやバナーのデザインで悩んだときに使う配色参考サイトです。

色の組み合わせで悩んだときは、大体AdobeColorのカラーホイールをいじって決めることが多いです。

AdobeColor

https://color.adobe.com

また、メインカラーすらもまともに決められないときは、こちらのサイトをよく使います。

https://www.happyhues.co/palettes/14
https://saruwakakun.com/design/gallery/palette

コーディングするときに使うサイトたち

コーディングでアイコンを使うときはほぼ100%使うfontawesome。

fontawesome

https://fontawesome.com/

また、fontawesomeのCDNやCSSでの使い方が思い出せないときはいつもこちらの記事を読んでいます。

https://saruwakakun.com/html-css/basic/font-awesome

使いたいフォントがあるときは大体Googleフォントで探します。

Googleフォント

https://fonts.google.com/

画像の一部部分だけリンク先を変えたいときはマッピング機能を使います。
そのマッピングの範囲を決める際に使うのがこちらのジェネレーター。

イメージマッピングジェネレーター

https://labs.d-s-b.jp/ImagemapGenerator/

一部分だけmarginを使いたいなど、一部分だけのスタイリングで使うCSSのクラス名はよくtailwindcssの命名を使っています。
そのtailwindcssの命名一覧をまとまっているチートシートがこちら

tailwindcssチートシート

https://nerdcave.com/tailwind-cheat-sheet

また、機能ごとにCSSやJSのクラス名。変数名を決めるのに使う翻訳(?)サイトがこちら。

例えば、JSの機能が有効かどうかを判定するタグのクラス名を決めたいときは「有効かどうか」と入力すると、「is_valid」と表示されます。
こんな感じで命名で悩んだときはよく使うサイトです。

codic

https://codic.jp/

コーディングでよくコピペしがちなサイト

コーディング中、「この機能を一からコーディングするのが面倒だなー」と思ったときによくコピペさせてもらっているサイトたちです。

メニューや動きなど機能系の参考サイト

https://coco-factory.jp/ugokuweb/

見出しやリストや吹き出しなどデザイン系の参考サイト

https://saruwakakun.com/html-css/reference/css-sample

IT系で知らない単語が出たときに使うサイト

インスタンス化やカプセル化などいまいち概念が理解できない単語が出たときに、なんとなーく理解するために使うサイトです。

「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

https://wa3.i-3-i.info/

一時期、「〇〇(調べたい単語) わかりそうでわからない」で検索していたこともあるくらいよく使っていました。

普段よく読むブログや参考サイト

若干、WEBデザインやコーディングで使うサイトとはずれてしまいますが、日頃のデザイン・コーディングのインプットで使うブログサイトです。

私はよくFeedlyという新着記事を全部一つにまとめてくれるRSSリーダーを使って読んでいます。

https://liginc.co.jp/blog
https://goodpatch.com/blog
https://www.webcreatorbox.com/
https://coliss.com/
https://photoshopvip.net/
https://pulpxstyle.com/

勉強でよく使うサイトたち

WEBデザインやコーディングの学習でよく使うサイトです。(でした。)
原点回帰したい際におそらく使うだろうと思い、まとめておきます。

コーディングの練習でよく使うサイト

コーディングは模写というより、クリ★スタさんのようなカンプからコーディングができるようなサイトをよく使っていました。

https://crestadesign.org/cording-first/
https://crestadesign.org/cording-second/
https://crestadesign.org/cording-third/

https://code-step.com/

サイトトレースでよく使う参考のサイト

WEBデザインは基本サイトトレースで練習していました。

トレースの題材は一番最初にまとめたギャラリーサイトから選んでいましたが、サイトトレースの考え方で参考にした記事がこちら。サイトトレースする際の視点が学べます。

https://liginc.co.jp/web/design/photoshop/74339
https://liginc.co.jp/211803

特に参考にした視点は以下の5つ。
今でもネットサーフィンする際は、この5つを使ってWEBサイトを見ています。

  • 余白間(マージン)の取り方
  • 見出しやテキストとのジャンプ率の付け方
  • 使用色の割合と使用数、差し色の使い方
  • 要素同士のサイズ感のバランス
  • 際立たせたい箇所の目立たせ方

バナートレースでよく使う参考のサイト

バナートレースする際も基本的に題材はギャラリーサイトから選んでいましたが、ノウハウ等はいろいろな記事で視点を学びました。

Illustratorでバナートレースする際はこちらの記事でIllustratorの初期設定を学びました。
特に、IllustratorはもともとDTPで使うソフトなので、WEB系の初期設定をまとめてもらえるのはありがたいですね。

https://nxpg.net/blog/tech/?p=6047

また、バナーをトレース・作成する際のステップや視点をまとまっているこちらの記事もよく見直します。

https://liginc.co.jp/web/design/photoshop/128520

最後に

ということで、WEBデザインやコーディングでよく使う参考サイト一覧でした。

おそらくまだまだ「このサイトよく使ってるなー」と思う記事やサイトが出てくると思うのでその際は随時更新します。

それでは。

Discussion

ログインするとコメントできます