デザイナーが確認しておきたいデザインリソース完全ガイド80選
今の作業フローをもう少し良くしたい、と考えているデザイナーの方は多いのではないでしょうか。
日々のデザイン作業を"より快適に" "効率良く"するためには、デザインリソースを確認しておくことが重要です。
しかし、たくさんのツールやサービスがあり、実際問題どれを選んだらいいかわからなかったり……そもそも調べるのが面倒という方も決して少なくないはずです。
そこで今回は、数ある中からオススメしたいデザインリソースをピックアップしてご紹介します。
気になるものがあれば、今すぐ活用してみてはいかがでしょうか。
※素材数などは2016年12月21日時点での情報です。今後変更となる可能性がありますのでご了承ください。
画像・動画素材関連
1. freepik
ベクター、PSD、アイコンと、様々な形式でデータが用意されている、便利な素材がたっぷり揃った素材サイトです。
特にベクター素材は豊富で、ちょっとした挿絵に使えるデザインがたくさん手に入ります。
2. Vecteezy
ベクター素材を専門に配布している素材サイトで、無料でも高品質なグラフィックが多数ダウンロードできます。
3. Free PSD Files
http://freepsdfiles.net/backgrounds
モックアップ、テンプレート、シルエット、テクスチャと様々なデザインを広く扱っているPSD専門素材サイトです。
特に背景素材を豊富にコレクションしています。
4. Pixabay
830,000枚以上の高品質なフリー写真素材を配布しているサービスです。
人物、背景と使い勝手のいい写真が豊富に揃っています。
5. Creative market
ホームページ用テーマ、テンプレート、写真、3D、フォントなど多彩なデザイン素材を取り扱うサービスです。
6. Coverr
http://www.coverr.co/
高品質で美しい無料の動画素材をストックしているサービスです。
食品、自然をはじめ、様々なシーンを写した動画が手に入ります。
7. vector4free
動物、サイン、シルエットなど、ビジネスシーンで使いやすい無料ベクター素材を多数ストックしているサービスです。
8. pixelbuddha
プレミアム素材、無料素材を紹介しているサービスで、無料でもアイコン、モックアップ、エフェクト、テンプレートとたくさんの素材が見つかります。
9. PEXELS
フリーの写真素材を取り揃えた素材サイトで、キーワード検索のほか、人気順、新着順などに並び替えて効率よく素材が探せます。
10. texturelib
6,000枚以上のテクスチャ素材を収集しており、コンクリート、レンガ、自然を中心に魅力的なテクスチャが手に入ります。
アイコン関連
11. iconmonstr
3,500個以上の多彩なアイコン素材をどれも無料でダウンロードできます。
12. DBFreebies.co
人気サービスDribbble、Behanceからオススメのフリー素材だけを収集した便利なサービスです。
13. ICOOON MONO
日本語にも対応したモノトーンアイコン専用の素材サイトで、全てのアイコンを商用利用することができます。
14. アイコン配布中！
Ai、Ps、Fw形式を揃えたスマートフォン向けアイコンが多数ダウンロードできます。
15. Iconfinder
100万個以上のプレミアム・フリーアイコンを揃えたサービスで、無料でもたくさんのアイコンをダウンロードすることが可能です。
16. Medialoot
アイコン、モックアップ、UI素材、グラフィック、フォントをストックしているサービスで、無料の素材も豊富です。
17. Flaticon
シンプルなフラットベクターアイコンを20万個以上収集し配布しているサービスです。
コレクションしたアイコンをブラウザ上で簡単に編集することができます。
18. Free Icons by First-Class Designers
デザイナーが制作した高品質なフリーアイコン200個以上をダウンロードできます。
19. The Noun Project
アプリ、サービスに大活躍するシンプルなアイコン素材を多数ストックしているサービスです。
20. Psddd.co
http://www.psddd.co/tags/icons
Dribbbleに投稿されたアイコン素材を収集しているサービスで、スムーズにアイコンを探すことができます。
フォント関連
21. dafont.com
定番デザインからスクリプト系、ファンシー系まで、ありとあらゆるフォントが揃うサービスです。
22. fontspace
31,000個ものフリーフォントを紹介しているサービスで、キーワードや新着、人気順に検索することができます。
23. fontsquirrel
こちらも様々なフォントが揃っており、比較的知名度が高いサービスです。
24. フォントフリー
ゴシック、明朝体からユニークな見た目のデザインまで、多彩な日本語フリーフォントを紹介しています。
25. フォントAC
http://www.ac-font.com/jp/japanesefonts.php
日本語・英語のフォント、手書きフォント、イラストフォントなどが全てフリーで手に入るサービスです。
日本語サービスの上、商用利用可能の素材ですので安心して使えます。
26. freebiesbug
http://freebiesbug.com/free-fonts/
こちらのサービスでは特にPSDを中心に素材をストックしており、1,500個以上のPSDファイルを探すことができます。
27. letterheadfonts
http://www.letterheadfonts.com/
インパクトのある個性的なフォントを多数取り揃えているサービスです。
28. FFONTS
「壊れたフォント」「頭のおかしいフォント」など少し変わったジャンルわけが特徴的なサービスです。
29. Fonts2u.com
65,000個以上の英語フォントをストックしており、好みにぴったりのデザインが見つかるサービスです。
30. 1001 Fonts · Free Fonts Baby!
年代ごと、イベント向けと、ほかにはないカテゴリわけが個性的なフォントサイトです。
デザインの参考・アイデア関連
31. AWWWARDS
多くの海外サイトを収集しており、オシャレなデザインがたくさん見つかるギャラリーサイトです。
採点、評価制度が特徴的で、他社からの評価を参考にすることができます。
32. it's Nice that
注目のデザインを収集している、見応えたっぷりのギャラリーサイトです。
33. MUUUUU.ORG
縦長サイトだけを集めて掲載したギャラリーサイトで、様々な業種・デザインのホームページを収集しています。
34. I/O 3000
デザイン性の高い、美しいホームページを探したい時にオススメのギャラリーサイトです。
35. Mindsparkle Mag
オシャレな製品、パッケージ、文具などを掲載しておりデザインのインスピレーションを得ることができます。
36. THE FWA
https://thefwa.com/cases/the-carp-and-the-seagull
特徴的なデザインのホームページばかりを集めて紹介している、クリエイティブアワードサイトです。
37. MOBILE PATTERNS
http://www.mobile-patterns.com/
モバイル用ホームページに特化したギャラリーサイトで、ログイン、マップ、フィードなど画面ごとに掲載しています。
38. Typewolf
タイポグラフィを使用したデザインを集めているギャラリーサイトです。
39. WPデザインギャラリー
http://wpgallery.kachibito.net/
WPデザインギャラリーでは、WordPressを使用したホームページだけを収集しています。
40. Muz.li
デザイン関連の目新しい情報を求めている方にぴったりな、キュレーションサービスです。
モックアップ作成関連
41. Sketch
UIデザイナーを中心に多くのデザイナーから支持を集めている、有名なデザインツールです。
42. POP
手書きスケッチからプロトタイプが作れる、アナログ派にぴったりのプロトタイピングツールです。
43. fluid
基本のパーツをドラッグ＆ドロップで配置するだけで、誰でも簡単にモックアップが作成できるツールです。
44. InvisionAPP
ブラウザ上でモックアップ作成から共有までが行えるツールで、Web用プロジェクトに重宝します。
45. placeit
あらかじめ用意してあるシチュエーション画像に手持ちの写真を差し込むだけで、簡単にモックアップを作ってくれるツールです。
ホームページ作成関連
46. WordPress
世界中で普及している人気のCMSで、オシャレなテーマや拡張機能が魅力的です。
47. Wix
誰でもサクッと簡単にホームページが作れるツールで、デザイン性の高いテンプレートに定評があります。
48. Ameba Ownd
サイバーエージェントが運営する無料ホームページ、ブログ作成サービスで、スマホサイトにも完全対応しています。
49. JIMDO
レイアウトを選択し文章、画像を追加するだけで自分好みのシンプルなホームページができ上がるサービスです。
50. Squarespace
デザイン性とカスタマイズ性の高さが魅力的な、ハイクオリティなホームページ作成ツールです。
ショッピングカート、ブログといった機能も備わっています。
情報収集関連
51. Behance
世界中のクリエイターが作品を公開しているソーシャルネットワークサービスです。
52. Flickr
ユーザー自身が撮影した写真、デザインを共有することができるサービスで、インスピレーションを得たい時に便利です。
53. Dribbble
海外デザイナーの作品をチェックしたり、Like、フォローをして楽しむことができるサービスです。
54. JDN
https://www.japandesign.ne.jp/news/
最新情報からインタビューまで、デザインに関する幅広い情報をテーマに扱うニュースサイトです。
55. DesignerNews
デザイナーのコミュニティとして知られているサービスで、投票結果などからユーザーの関心の高い投稿を閲覧することができます。
56. DeviantArt
deviantART社が運営している世界最大級のアートコミュニティで、イラストや絵画、コミックなどを投稿することができます。
57. MdN Design Interactive
デザイン、グラフィックの総合情報を配信するニュースサイトで、気になる最新ニュースを手軽にチェックするのにぴったりです。
58. Codepen
Codepenは、HTML・CSSなどのコードを公開できるサービスで、ほかのユーザーのコードを参考にすることができます。
59. Photoshop VIP
デザインチュートリアル、無料素材をはじめデザイナーに役立つ情報が満載のブログメディアです。
60. creive
素材紹介、サービスレビューなどクリエイターに役立つ情報を多数配信しているメディアです。
作業効率アップ関連
61. Slack
ビジネス向けとして人気のチャットツールで、環境に関わらず閲覧しやすい、他サービスとの連携がとりやすいといった特徴があります。
62. Trello
付箋のような感覚で楽にタスク管理ができるツールです。
63. Coggle
ブラウザ上でマインドマップが手軽に作成できるツールで、思考整理をしたい時に重宝します。
64. Pinterest
世界中の様々な素敵なアイデアからお気に入りを見つけ、保存しておくことができるツールです。
65. GoVisually
デザインプロジェクト上でのフィードバックを即座にチェックすることができるツールです。
66. Wrike
https://www.wrike.com/ja/?r=WOvdUqgs
チームでプロジェクトを進行する時に活躍する、タスク・プロジェクト管理ツールです。
67. Redbooth
プロジェクト管理と同時にチームコミュニケーションもとることができるツールで、コミュニケーションに力を入れている場合にオススメです。
68. Brushup
デザインデータを一元管理し、デザインチェックを効率化してくれるデザインレビューツールです。
69. Flow
好みに応じて表示を切り替えたり、タスクの進捗が設定できたりとあると嬉しい細かな機能がついたプロジェクト管理ツールです。
配色ツール関連
70. COLOURlovers
ユーザーが考えた配色を共有することができるコミュニティーサイトで、見るだけで配色の引き出しを増やすことができます。
71. Coolors
スペースキーをクリックすると色を入れ替えてくれ、そこから好みの配色を作ることができるツールです。
72. Adobe Color CC
https://color.adobe.com/create/color-wheel/
Adobeが提供している配色作成ツールで、画像から色を抽出したりカラールールに則って色を作ることができます。
73. Color Schemr
直感的に配色を作ることができるツールで、色選びをスムーズに行うことができます。
74. Design Seeds
https://www.design-seeds.com/blog/
素敵な写真とともに、その写真からインスパイアされた配色を投稿しているサービスです。
75. Colicious
マウスをクリックすると、自動的に色を表示してくれるツールです。
新しい色のアイデアが浮かばない時やいつも使わない色が欲しい時に便利です。
76. color hailpixel
マウスを動かすと色が変化し、好きな色が表示されたところでクリックしていくと配色が作れるツールです。
77. HUE/360
メインカラーを選択すると、その色に合わせて色をピックアップしてくれるツールです。
簡単に誰でも統一感のある配色を作ることができます。
78. Color Hexa
カラーコードを指定すると、その色に関する様々な情報を表示してくれるサービスです。
79. Flat UI Color Picker
http://www.flatuicolorpicker.com/
フラットデザインに使用する色を集めて表示しているサービスです。
80. 色の名前と色見本（和の色）
http://irononamae.web.fc2.com/colorlist/wa.html
和の色を一覧表示しているサービスで、日本的なデザインを作る時に参考になります。
まとめ
今回は、イラスト・写真の素材サイトから便利な配色ツール、コミュニケーションや進捗管理に使えるツールまで、デザイナーの悩みを解決してくれるものをピックアップしました。
気になるデザインリソースは見つかりましたでしょうか。
デザインの際によく使うアイテムや気になるツールはブックマークしておくと、すぐに使えて便利です。
少しでも効率よく作業を進めたいと思ったら、使えそうなデザインリソースを前もって収集しておきましょう。