僕がおすすめするデザイン系Webサービスの紹介です_随時更新します_

僕がおすすめするデザイン系Webサービスまとめ

TAK / Web Creator.

2020年1月時点で僕がブックマークしているデザイン系のWebサービスのまとめです。

おすすめしたいデザイン系Webサービスを発見したら随時追加します。更新の保証はしませんが、コンテンツを更新した際に通知が欲しい方のために100円の課金の設定をしておきます（課金した場合のみ通知を受け取れる仕様）。課金したら多くのコンテンツが読めるというわけではないのでご了承ください。

(※2019.11.03 追記)こちらのnoteですが、公式マガジン「#デザイン 記事まとめ」に掲載されました。ありがとうございます。

(※2019.11.11 追記)「先週もっとも多くスキされた記事の1つ」に選ばれました。ありがとうございます。

# ギャラリーサイト

## よく見ているサイト

Webデザインの参考になるギャラリーサイト。デザインのインプットとしてほぼ毎日見る。

***

## マネるデザイン研究所

ツイートがバズった。

***

## Bootstrap Expo

CSSフレームワーク案件を受け持った時のために。

***

## フッターデザイン.com

フッターはサイトマップの役割やお問い合わせのためだけでなく、ページのエンディング的な役割を持つ大切なコンテンツ。

***

## 404 Error Page - Awwwards

オシャレな404ページを掲載したギャラリー。404も凝った感じにしたい。

***

## Webframe

Webサイトの特定のパーツをジャンル分けして掲載しているギャラリーサイト。

***

## バナーデザイン

僕は基本的にバナーを作らないけど万が一のためにブックマークしている。

***

## Pinterest

最強。基本的にこれ見てればいい気がする。

---

# 写真素材・ラスタ素材

## Unsplash

個人的に一番好きなクリエィティブ・コモンズ写真素材サービス。Trelloの背景画像はUnsplashが使われている。

***

## Pixabay

安定の素材配布サイト。WordPressプラグインもある。

***

## CREATIVE COMMONS PHOTO SEARCH in Flickr

Flickrの中から商用利用可能な写真素材を探せる。クレジット表記必須。

***

## 100% Free Patterns

パターン画像のフリー素材配布サイト。

---

# ベクタ素材

## Font Awesome

いつもの。Font AwesomeはPCにインストールしてデザインカンプで使えるようにしたほうがいい。

インストールしたらFont Awesomeのチートシートをブックマークしておく。

***

## ICON BOX

パスが編集できる商用フリーのアイコン素材集。日々新しい素材が追加されている。

***

## Animated Icons

Lottie、GIF、およびAfter Effects形式のJSONをダウンロードできるフリーのアイコン素材集。JSONはCDNで利用可能。

***

## Linustock

シンプルで加工・商用利用可能なフリー線画イラスト集。

***

## 500+ CSS Icons

(※2020.01.06 追加)

CSSで作成されたオシャレなアイコン集。Font Awesomeと同様に、CDNを読み込んでclassを付与するだけで利用できる。カラーの変更や塗りなどのカスタマイズも簡単。

---

# 動画素材

## Mixkit

商用利用可のフリー映像素材サイト。webサイトに動画埋め込む際などに。

---

# 音楽素材

## unminus

商用利用可のフリー音源サイト。動画作る時のBGMなどに。

---

# 配色見本サービス

## Adobe Color CC

色同士の関係性から優れた配色パターンを生成することが可能な有名サービス。PhotoshopやIllustratorなどの標準スウォッチやカラーパレットから選ぶよりこっちで選んだ方が絶対に良い。

***

## Coolors

5色の配色パターン見本をランダムで表示してくれるカラーパレット生成サービス。スペースバーで切り替え。

***

## ColorSpace

指定の色とマッチする色を提案してくれるサービス。

***

## Color Hunt

世界中のユーザーが投稿した4色の配色パターン見本を掲載。人気順に並べ替えることも可能。

***

## NIPPON COLORS

日本の伝統色が一目で分かり、カラーコードなども調べられる。

***

## WEB色見本 原色大辞典

カラーコード検索サービス。色の名称とコードを調べる時にあると便利。

***

## Cool Backgrounds

グラデーション背景を作る際によく使ってる。Particles.js興味あるんだけど使う機会が無くてかなしい。

***

## WebGradients

グラデーションの配色参考サービス。グラデーションは自力で頑張るとダサくなりがちなので見本を参考にした方がいいと思われ。

***

## Gradient Magic

個性的な見栄えのグラデーションがCSSのサンプル付きでまとめられているギャラリーサイト。

***

## snook.ca – Colour Contrast Check

高齢者や色弱・色盲の方が文字を読み取るのに十分なコントラストが確保できているかをチェックできるツール。アクセシビリティ対策は大切。

***

配色の注意事項は「個人的に実践しているWebデザインガイドライン② 配色編」を見てね。

---

# レイアウト関連

## METALLIC RATIO

貴金属比の計算サービス。使用頻度高め。貴金属比の大切さについては「個人的に実践しているWebデザインガイドライン③ レイアウト編」を参照。

***

## Gridpx

グリッドデザインの計算ツール。カンプ制作時のグリッドのサイズ計算などに。

***

## ダミーテキストジェネレータ

ダミーテキスト生成サービス。仮テキストに。

---

# 画像関連

## waifu2x-multi

古い画像にありがちなサイズの小さい写真をAIを使って綺麗に拡大してくれるサービス。一括ダウンロード可能。

***

## Placehold.jp

ダミー画像生成サービス。画像をダウンロードしなくても使えるのがえらい。

***

## Mockup Photos

モックアップ作成サービス。転職の時に紙のポートフォリオを作ったときにお世話になった。

***

## ScreenSpace Mockup

3Dモックアップを数秒で作成できるサービス。

***

## TinyPNG

JPEGとPNGの画像圧縮サービス。JPEGとPNGの画像圧縮はWebで利用するときは必須なので要ブクマ。

***

## SVGOMG

SVGファイル最適化サービス。不要なデータを取り除ける。SVG使うならブクマ推奨。

***

## Favicon Generator. For real.

ファビコン自動生成ツール。iOSのホームスクリーン用のapple-touch-iconなども生成してくれる。基本ここに丸投げしてる。

***

## Brandmark Logo Maker

それっぽい企業ロゴを素早く制作できるツール。ロゴ決まってない案件などに。

***

## SVG Artista

SVGアニメーション作成ツール。イージングなどを調整でき、コードも出力してくれる。

***

余談だけどMac使ってるならターミナルで簡単に画像処理できるsipsコマンドを覚えておくといいかも？

---

# フォント関連

## Google Fonts

いつもの。Webフォントを使う場合はライセンスの心配が少ないGoogle Fontsを率先的に使う。

FontBaseというフォント管理ソフトを使うとGoogleフォントを取り込んでオフラインで使えるので便利。

***

## Yaku Han JP

「」や『』など約物が半角にできるフリーフォント。約物の空きが気になるデザイナーに。

***

## モジサイ

日本語のフリーフォントを検索できる。書体やイメージワードから理想的なフォントを表示してくれる。ライセンスに必ず注意。

***

## Modulator

レイアウトのバランスを決める際のフォント周りの数値の参考になるシミュレーター。

***

## Type Scale

フォントサイズのバランスの良い比率を計算できるサービス。フォントのジャンプ率や見出しのサイズを考えるときなどに。

***

## Wordmark.it

デバイスにインストールされているフォントを一覧表示してくれるサービス。トンマナを考える時などに。

---

# オンラインデザインツール

## Canva

グラフィックデザインツール。高機能かつデザインに優れたテンプレートを選べるので非デザイナーの方におすすめ。バナーとか僕が頑張って作るよりこっちでやったほうがいいものが作れる気がしてかなしい。

***

## Figma

話題のオンラインUI/UXデザインツール。一度フリーで案件を受託した時に使った。デバイス問わず使えてオンラインで共有もできるので今後使っていきたいなって思った。

***

## STUDIO

プロトタイプデザインツール。プロトタイプやワイヤーフレームを制作するならいいサービスだと思った。

***

## Zeplin

Adobe Photoshop、Adobe XD、Sketch、Figmaなどで利用可能なデザインのFBツール。

---

そのうちコンテンツを追加します。ここで記事は終了ですが、もし更新した際の通知を受け取りたい方がいらっしゃいましたら、課金よろしくお願いいたします。

Twitterでも有益な情報をちょくちょく発信しています。


ここから先は

35字

¥ 100

愛と平和