ブックマークしているデザイン系サイトまとめ

# はじめに
デザイン系サイトのブックマークが増え、どれがどんなサイトかわからなくなってきたのでまとめました。

# フォント
[Google Fonts](https://fonts.google.com/)
言わずもがな。　たくさんあって楽しい。

[フォントフリー](http://fontfree.me/)
日本語のフリーフォントがたくさん集まっているサイト。

[Wordmark.it](https://wordmark.it/)
<img width="500" alt="スクリーンショット 2017-12-21 15.02.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/64665/90b50754-5145-d673-87be-39af50b53bc8.png">

文字を入力すると、PC内にインストールされているフォント一覧でプレビューを表示してくれるサイト。

# 色
想像以上にたくさんブックマークしてました。
## カラーパレットの生成
[Adobe Color CC](https://color.adobe.com/ja/create/color-wheel/)
言わずもがな。いろんな人の配色も見られる。

[HUE/360](http://hue360.herokuapp.com/)
<img width="500" alt="スクリーンショット 2017-12-21 15.04.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/64665/10619e39-d2dd-99dc-67cf-37e7c8fed485.png">
好きな色を選択すると、それをキーカラーとして調和の取れる色に絞り込んでくれる。おしゃれ。

[Coolors.co](https://coolors.co/app)
<img width="500" alt="スクリーンショット 2017-12-21 15.10.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/64665/5d7b606d-8206-5aea-f82e-2b35fb641e64.png">
スペースキーを押すとどんどん配色を生成してくれる。一番よく使う。iOSアプリもあるので好き。
　
[Material Design Color Palette](https://www.materialpalette.com/)
<img width="500" alt="materialpalette.png" src="https://qiita-image-store.s3.amazonaws.com/0/64665/8d4a3910-e91d-29af-a3d8-028bc35f56bd.png">
好きな2色を選ぶと、マテリアルデザインのカラーパレットを作ってくれる。

[Color Supply](http://colorsupplyyy.com/app/)
<img width="500" alt="スクリーンショット 2017-12-21 15.12.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/64665/c2d5df43-4342-9525-6f0e-4fdaf97203d6.png">
指定した色でカラーパレットを作ってくれる。選択肢が少ないので選びやすい。プレビュー画像が可愛い。

[Paletton](http://paletton.com/)
指定した色でカラーパレットを作ってくれる。ちょっと微妙な配色だけど、提案してくれる色の数が多い。

## グラデーション
<img width="500" alt="uiGradients.png" src="https://qiita-image-store.s3.amazonaws.com/0/64665/9abb61df-b84e-d0dc-787e-a9a7b0eaa0e6.png">

綺麗なグラデーションを集めたサイト。グラデーションって自分で作ろうとすると意外と難しい。

[coolHue](https://webkul.github.io/coolhue/)
<img width="500" alt="スクリーンショット 2017-12-21 13.17.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/64665/fdd7d229-c575-ff15-daf0-1ac2a6a351a9.png">

綺麗なグラデーションを集めたサイト2。量は少ないけれど控えめで使い勝手の良さそうな配色がまとめられている。


[0to255](http://www.0to255.com/facade)
<img width="500" alt="スクリーンショット 2017-12-21 13.14.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/64665/5c136f45-65b6-4a2b-d5d2-29cee6c18084.png">
指定した色でグラデーションしたパレットを作ってくれるサイト。

## その他
[MaterialUI](https://www.materialui.co/)
マテリアルデザインのガイドラインに沿った配色をまとめたサイト。SNSのカラーパレットやWindowsのカラーパレットもある。アイコン画像やWEBで使えるアイコンフォントもあるけど、利用規約が見つからないので使ったことはない。

[NIPPON COLORS](http://nipponcolors.com/)
<img width="500" alt="スクリーンショット 2017-12-21 15.11.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/64665/ac61a796-a214-cfe2-ab33-07f932a0e870.png">
日本の伝統色を集めたサイト。右側にある"MUNSELL"をオンにするとすごい。

[Colorable](http://jxnblk.com/colorable/demos/text/)
<img width="500" alt="スクリーンショット 2017-12-21 13.14.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/64665/491e2b01-5069-ba86-16c0-66bdbb080184.png">
文字色と背景色を入れると、その二色の可読性を判定してくれるサイト。

# アイコン
[iconmonstr](https://iconmonstr.com/)
アプリ向けのアイコンがたくさんある。フォーマットはSVG, EPS, PSD, PNG, FONTの5種類が用意されている。PNGはその場で色や大きさの編集が可能。

[Free vector icons](https://www.flaticon.com/)
スライド向けのアイコンがたくさんある。いろんなデザイナーのアイコンが集まっており、故に利用規約も様々。

[MakeAppIcon](http://makeappicon.com/)
<img width="581" alt="スクリーンショット 2017-12-21 14.48.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/64665/6246253c-5f9d-be46-2f78-c7000c1ceb44.png">

画像を一枚渡してあげると、iOS/Androidアプリアイコン用解像度のものをまとめて生成してくれる。めちゃくちゃ便利。

# 素材
[Unsplash](https://unsplash.com/)
<img width="500" alt="スクリーンショット 2017-12-21 13.56.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/64665/403e1b38-0c84-e261-982c-03cbb5d4e4cd.png">
プロが撮影したハイクオリティな写真がたくさん集まるサイト。にもかかわらずクレジットなしで商用利用までできる。最高の一言に尽きる。

# ロゴ
[Logojoy](https://logojoy.com/)
<img width="500" alt="スクリーンショット 2017-12-21 14.09.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/64665/f57c9589-aa85-979c-e057-daea51805718.png">

好きなロゴや色、アイコンを選択するといい感じなロゴを生成してくれるサイト。

# UI
[Pttrns](https://www.pttrns.com/)
たくさんのスマホアプリのUIがカテゴリ別にまとめられているサイト。でも有料になってしまった、、、。

# メディア
[Pinterest](https://www.pinterest.jp/), [Dribbble](https://dribbble.com/), [Designspiration](https://www.designspiration.net/), [Tumblr](https://www.tumblr.com/)
言わずもがな。おしゃれなデザインがたくさん集まる。

[ZUNNY](http://zunny.jp/)
おしゃれなインフォグラフィックスがたくさん乗っているサイト。

[DEKIMAGA](http://www.adobe.com/jp/joc/dekimaga/)
Photoshopのチュートリアルがたくさん用意されている。素材まで付いているので便利。

[OpenProcessing](https://www.openprocessing.org/)
<img width="500" alt="スクリーンショット 2017-12-21 15.07.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/64665/d385d8b7-a711-1e15-47f9-964e8c636753.png">
Processingの作品が集まるサイト。遊べるだけでなく、コードまで見ることができる。

[WebNAUT](https://webnaut.jp/)
デザインだけでなく、テクノロジーやノウハウに関する記事が掲載されているメディア。

# まとめ
「そういえばブックマークしてたなあ」となるサイトがたくさんありました。宝の持ち腐れになっていたのでこれから活用していきたいです。フォントの情報を仕入れるサイトが少ないことに気がついたので、オススメあったら教えてください :tada: