Contents
- 1 ◆写真素材サイト
- 2 ◆動画無料素材サイト
- 3 ◆ウェブフォント
- 4 ◆アイコン素材サイト
- 5 ◆顔アイコンジェネレーター
- 6 ◆パーツ素材サイト
- 7 ◆コードチェック（バリデーション）サイト
- 8 ◆JavaScript グラフ作成ライブラリ
- 9 ◆画像ファイル容量圧縮サイト
- 10 ◆配色ツール
- 11 ◆ファビコン生成サービス
- 12 ◆キーフレームアニメーション実装サイト
- 13 ◆Gridコード生成サイト
- 14 ◆clip-path生成サイト
- 15 ◆CSS三角生成サイト
- 16 ◆ベンダープレフィックスの自動実装サイト
- 17 ◆リセットCSS
- 18 ◆Webデザイン ギャラリーサイト
- 19 ◆レスポンシブ対応例ギャラリーサイト
- 20 ◆デザインに困ったときに役立つサイト
◆写真素材サイト
| ・ぱくたそ | 無料。5万種以上。 |
| ・GORLY DROP | 無料。商用可能、クレジット不要。 |
| ・StockSnap.io | 無料。海外サイト。 |
| ・Pixabay | 無料。ベクター、イラスト、動画。 |
| ・Adobe Stock | 無料/有料。ロイヤリティフリーの写真、イラスト、ビデオなどの素材を3億点以上。 |
| ・photoAC | 無料/有料。900万種以上。 |
| ・iStock | 有料。世界最大級。 |
| ・PIXTA | 有料。日本風。動画、音楽も可能。 |
◆動画無料素材サイト
| ・ISO Republic | 生活感ある動画多数。 |
| ・Coverr | 多くのカテゴリー。 |
| ・Pixaby | 一覧で動画の長さが表示。 |
| ・Mixkit | ゆったりした大自然の動画。 |
◆ウェブフォント
| ・Google Fons | 無料。約1,000種。 |
| ・Adobe Fonts | 無料200種、有料15,000種。 |
| ・TypeSquare | 無料。印刷物のモリサワfonts。 |
| ・フォトダス | 無料。バリエーション豊富。 |
| ・MODI工場 | 無料。個性豊かインパクトあり。 |
◆アイコン素材サイト
| ・Font Awesome | 無料／有料。商標利用可能、無料1500種以上。 |
| ・ICOOON MONO | 無料。6,000種。商用利用可能なアイコン素材。 |
| ・FLAT ICON DESIGN | 無料。フラットデザインのアイコン素材。 |
| ・ヒューマンピクトグラム2.0 | 無料。標識などで使われるピクトグラム。 |
◆顔アイコンジェネレーター
| ・顔アイコンジェネレーターZ | 無料。サクッとシンプルな顔アイコンを作るためのジェネレーター。 |
◆パーツ素材サイト
| ・マンガパーツSTOCK | 無料。集中線、吹き出し、背景など。 |
| ・SILHOUETTE DESIGN | 無料。シルエットデザイン。 |
| ・Frame Design | 無料。デザイン枠、飾り罫素材、1500種以上。 |
| ・RIBBON FREAKS | 無料。リボン素材。 |
| ・フキダシデザイン | 無料。吹き出し素材、1000種以上。 |
| ・ARROW DESIGN | 無料。矢印素材。 |
| ・FREE-LINE-DESIGN | 無料。罫線・ライン素材、400種以上。 |
| ・da Laca | 無料。レース素材、1500種以上。 |
| ・ドドドFONTS | 無料。漫画に使われる擬音を素材化。 |
| ・カリ蔵 (カリグラ) | 無料。筆書き素材。 |
| ・Bg-Patterns | 無料。背景素材。 |
| ・Flode illustration | 無料。花および木などの植物イラスト素材、10000種以上。 |
| ・EC Design | 無料。ECサイト・ネットショップ素材。 |
| ・EVENTs Design | 無料。クリスマスやお正月などの行事、季節のイベントのイラスト素材。 |
| ・TOWN illust | 無料。街並みや建物、観光地の建築物などのイラスト素材。 |
| ・illust STAMPO | 無料。スタンプ向けに制作したイラスト素材。3000種以上。 |
| ・ダ鳥獣ギ画 | 無料。鳥獣人物戯画のイラスト素材。ライセンス注意。 |
| ・時短だ(ジタンダ) | 無料。資料作成に便利なイラスト素材をストックする素材集。 |
| ・illust AC | 無料／有料。イラスト、枠、吹き出しなどイラスト素材総合サイト。 |
◆コードチェック（バリデーション）サイト
| ・Markup Validation Service | 無料。HTMLバリデータサイト。 |
| ・CSS Validation Service | 無料。CSSバリデータサイト。 |
◆JavaScript グラフ作成ライブラリ
| ・Chartist.js | シンプル・レスポンシブ・SVGチャートを作成。 |
| ・Chart.js | グラフサイトの大御所。アニメ表示可能。 |
| ・Frappe Charts | アニメ表示可能。 |
◆画像ファイル容量圧縮サイト
| ★Shrink Me | 速度が早い。 |
| ・Compressor.io | ドラッグ＆ドロップでファイル圧縮可能。 |
◆配色ツール
| ・ウェブ配色ツール Ver.2 | 配色提案。 |
| ・Adobe Color CC | 色の組み合わせを提案。 |
| ・Paletton | 配色組み合わせ提案。 |
◆ファビコン生成サービス
| ・RealFaviconGenerator | 縦横260px以上の画像ファイルを指定すると、スマホ用ホームスクリーン、 スタートメニュー、タスクバー用画像も一度に生成。 |
◆キーフレームアニメーション実装サイト
| ・Animate.css | |
◆Gridコード生成サイト
| ・CSS Grid Generator | |
◆clip-path生成サイト
| ・Clippy | |
◆CSS三角生成サイト
| ・TIANGL CSS GENERATOR (WEB GENERATOR ) | |
◆ベンダープレフィックスの自動実装サイト
| ・Autoprefixer | |
◆リセットCSS
| ★Destyle.css | |
| ・ress.css | |
| ・Eric Meyer’s Reset CSS | 全スタイルをリセット。 |
| ・Nomalize.css | 有用なスタイルを残して表示を統一。 |
◆Webデザイン ギャラリーサイト
| ・The Best Desugns | |
| ・I/O 3000 | |
| ・Pattern Tap | |
| ・ほめジョーズ | すばらしいデザインやユニークなギミックのある WEBサイトを展示。 |
◆レスポンシブ対応例ギャラリーサイト
| ・Responsive Web Design JP | |
| ・Madia Queries | グラフサイトの大御所。アニメ表示可能。 |
◆デザインに困ったときに役立つサイト
| ・まねるデザイン研究所 | |
| ・Design patterns | 海外サイト。 |