UI
Design
MaterialDesign

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

はじめに

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

フォント

Google Fonts
言わずもがな。 たくさんあって楽しい。

フォントフリー
日本語のフリーフォントがたくさん集まっているサイト。

Wordmark.it
スクリーンショット 2017-12-21 15.02.03.png

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

想像以上にたくさんブックマークしてました。

カラーパレットの生成

Adobe Color CC
言わずもがな。いろんな人の配色も見られる。

HUE/360
スクリーンショット 2017-12-21 15.04.45.png
好きな色を選択すると、それをキーカラーとして調和の取れる色に絞り込んでくれる。おしゃれ。

Coolors.co
スクリーンショット 2017-12-21 15.10.08.png
スペースキーを押すとどんどん配色を生成してくれる。一番よく使う。iOSアプリもあるので好き。
 
Material Design Color Palette
materialpalette.png
好きな2色を選ぶと、マテリアルデザインのカラーパレットを作ってくれる。

Color Supply
スクリーンショット 2017-12-21 15.12.36.png
指定した色でカラーパレットを作ってくれる。選択肢が少ないので選びやすい。プレビュー画像が可愛い。

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

グラデーション

uiGradients.png

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

coolHue
スクリーンショット 2017-12-21 13.17.01.png

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

0to255
スクリーンショット 2017-12-21 13.14.37.png
指定した色でグラデーションしたパレットを作ってくれるサイト。

その他

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

NIPPON COLORS
スクリーンショット 2017-12-21 15.11.22.png
日本の伝統色を集めたサイト。右側にある"MUNSELL"をオンにするとすごい。

Colorable
スクリーンショット 2017-12-21 13.14.25.png
文字色と背景色を入れると、その二色の可読性を判定してくれるサイト。

アイコン

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

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

MakeAppIcon
スクリーンショット 2017-12-21 14.48.58.png

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

素材

Unsplash
スクリーンショット 2017-12-21 13.56.48.png
プロが撮影したハイクオリティな写真がたくさん集まるサイト。にもかかわらずクレジットなしで商用利用までできる。最高の一言に尽きる。

ロゴ

Logojoy
スクリーンショット 2017-12-21 14.09.11.png

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

UI

Pttrns
たくさんのスマホアプリのUIがカテゴリ別にまとめられているサイト。でも有料になってしまった、、、。

メディア

Pinterest, Dribbble, Designspiration, Tumblr
言わずもがな。おしゃれなデザインがたくさん集まる。

ZUNNY
おしゃれなインフォグラフィックスがたくさん乗っているサイト。

DEKIMAGA
Photoshopのチュートリアルがたくさん用意されている。素材まで付いているので便利。

OpenProcessing
スクリーンショット 2017-12-21 15.07.53.png
Processingの作品が集まるサイト。遊べるだけでなく、コードまで見ることができる。

WebNAUT
デザインだけでなく、テクノロジーやノウハウに関する記事が掲載されているメディア。

まとめ

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