デザイン制作面でブックマークしてる便利な奴ら

##はじめに
デザインを考えている過程でよく使っている物達です。
『あ、こんなのあるんだー』程度に暖かい目で見てください。

##色彩系
色関係は全体の雰囲気に直結するので、考えるのに時間がかかりますよね...
ということで使ってみていいなーと思ったものをまとめました。

###ColorSpace
指定した色から相性のいい配色パターンを数通り提案してくれる。
正直色系はここがほとんど。
サイト自体のデザインも綺麗だから暇な時実験しにきたり、
一番お気に入り！
![スクリーンショット 2019-06-11 11.54.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403398/dad85467-0c82-752f-4789-a2606f71e7b8.png)
[ColorSpace](http://mycolor.space)

###NIPPON COLORS
日本っぽい色がまとめてあります。
日本を題材にしたサイトを作るときに出会ってたまに見に来てます。
日本の色っていいよね。
![スクリーンショット 2019-06-11 11.55.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403398/493d9e6c-b898-3df8-b691-86eafce83c63.png)
[NIPPON COLORS](http://nipponcolors.com/)


## 画像系
画像を集めるのって大変だし、著作権とか気にしないといけないから辛いですよね...


###Unsplash
商用可能なフリー画像配布サイト。一番有名??
フリー画像配布サイトの中では特にお気に入り。
ていうか最強だと思う！
<img width="1280" alt="スクリーンショット 2019-06-11 11.56.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403398/221157a2-61d6-1b6c-4b2e-c3c136664dbf.png">
[Unsplash](http://unsplash.com)

###Pixabay
安定の素材配布サイト。
WordPressプラグインもあるよ。
![スクリーンショット 2019-06-11 11.58.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403398/f6a2edd7-45c9-f988-9eac-fa3f14c2354f.png)
[Pixabay](http://pixabay.com/ja/)

###Cool Backgrounds
グラデーションの背景画像を作って使うのに使ってます。
色々いじるとなかなか楽しい。
![スクリーンショット 2019-06-11 12.00.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403398/d0021c98-065e-cb55-9555-4429400492c7.png)
[Cool Backgrounds](https://coolbackgrounds.io/)

###Placehold.jp
ダミー画像生成サービス。
『とりあえず』で意味のない画像を入れたいときに使ってる。
細かいとこまで設定できて便利。
<img width="1280" alt="スクリーンショット 2019-06-11 12.02.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403398/1248cebe-c72e-1cb2-cc85-1eb81f66cbb7.png">
[Placehold.jp](https://placehold.jp/)

###METALLIC RATIO
貴金属比の計算をしてくれるサービス。
画像比率はとりあえずここにぶん投げる。
そういえば授業で日本人は黄金比よりも白銀比の方が美しく感じるって言ってた。
![スクリーンショット 2019-06-11 12.02.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403398/73daf9d5-c262-6649-73c4-d02c456667ae.png)

[METALLIC RATIO](http://voidism.net/metallicratio/)

##画像圧縮系
画像圧縮はユーザビリティ面で必須なのでブックマークしておくと便利。

###Tiny JPG
可能な限りPNG.JPEG画像のファイルサイズを縮小してくれます。
パンダの顔が怖い。
![スクリーンショット 2019-06-11 12.03.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403398/339fd984-4a7d-dd3d-3517-1556f9a82c3b.png)

[Tiny JPG](http://tinyjpg.com)

###SVGOMG
SVGから不要なデータを取り除いて圧縮してくれます。
いつか使おうと温めてます。
みんなが言うことにはViewBoxは残しておいたほうがいいらしい(なんのことやら...)
![スクリーンショット 2019-06-11 12.04.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403398/01f535db-da22-b185-ca03-30b7ebb2c862.png)
[SVGOMG](http://jakearchibald.github.io/svgomg/)

##フォント系
フォントは重要ですが、正直無料の日本語フォントでいいものはあまりない印象...
モリサワフォント買ったほうがよさそう。
でも欧文フォントならフリーでも選択肢が多いです。

###DaFont
欧文フォントのダウンロードサイト。
欧文だけですが。なかなか使えるものが多いのでおすすめ。
![スクリーンショット 2019-06-11 12.04.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403398/13b0290a-90e0-ea3b-be43-385b30b3ebff.png)
[DaFont](https://www.dafont.com/)


##その他
〇〇系で括れなかったけどちゃんと使える子達。

###Font Awesome Free's Cheatsheet
XDでFont Awesome使うときにここからコピペしています。
FontAwsomeはパソコンにダウンロードしておくべき。
![スクリーンショット 2019-06-11 12.07.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403398/428d690d-be89-bf8a-6417-8b3021cd32f8.png)
[Font Awesome Free's Cheatsheet](https://fontawesome.com/cheatsheet)


###Favicon Generator.
ファビコン自動生成ツールです。
画像を投げるとファビコンにして返してくれる。
自分では作れないので...
![スクリーンショット 2019-06-11 12.09.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403398/b322738f-dfac-aac1-5b27-52c2793787aa.png)

[Favicon Generator.](http://realfavicongenerator.net)

###Gridpx
グリッドデザインの計算ツール。
グリッドのサイズ計算に使える。
![スクリーンショット 2019-06-11 12.10.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403398/901bc6ba-6975-4991-2335-30f9ce1f0eac.png)

[Gridpx](http://www.kenjisugimoto.com/gridpx/)


###Brandmark Logo Maker
それっぽい企業ロゴを素早く制作できるツールです。
ロゴで悩んでたときに見つけました。
![スクリーンショット 2019-06-11 12.10.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403398/c972c31a-24c7-2672-adc6-5af3cdc80160.png)
[Brandmark Logo Maker](https://brandmark.io/ )


##最後に
今回紹介したのはあくまで学生の自分が使っているものなので、
これよりいいのあるよ!!とか
こんなのもおすすめ!!みたいなのがあったら教えて欲しいです...