デザイナーが確認しておきたいデザインリソース完全ガイド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. Mizuli inspiration
デザイン関連の目新しい情報を求めている方にぴったりな、キュレーションサービスです。
モックアップ作成関連
41. Sketch
UIデザイナーを中心に多くのデザイナーから支持を集めている、有名なデザインツールです。
42. POP
手書きスケッチからプロトタイプが作れる、アナログ派にぴったりのプロトタイピングツールです。
43. fluid
基本のパーツをドラッグ&ドロップで配置するだけで、誰でも簡単にモックアップが作成できるツールです。
44. InvisionAPP
ブラウザ上でモックアップ作成から共有までが行えるツールで、Web用プロジェクトに重宝します。
45. placeit
あらかじめ用意してあるシチュエーション画像に手持ちの写真を差し込むだけで、簡単にモックアップを作ってくれるツールです。
ホームページ作成関連
46. WordPress
世界中で普及している人気のCMSで、オシャレなテーマや拡張機能が魅力的です。
47. Wix
誰でもサクッと簡単にホームページが作れるツールで、デザイン性の高いテンプレートに定評があります。
48. Ameba Ownd
サイバーエージェントが運営する無料ホームページ、ブログ作成サービスで、スマホサイトにも完全対応しています。
49. JIMDO
レイアウトを選択し文章、画像を追加するだけで自分好みのシンプルなホームページができ上がるサービスです。
参考:
直感的にホームページが作れる「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
ブラウザ上でマインドマップが手軽に作成できるツールで、思考整理をしたい時に重宝します。
参考:
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
[http://colorschemr.com/]
直感的に配色を作ることができるツールで、色選びをスムーズに行うことができます。
74. Design Seeds
https://www.design-seeds.com/blog/
素敵な写真とともに、その写真からインスパイアされた配色を投稿しているサービスです。
75. Colicious
[http://colicious.ga/]
マウスをクリックすると、自動的に色を表示してくれるツールです。
新しい色のアイデアが浮かばない時やいつも使わない色が欲しい時に便利です。
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
和の色を一覧表示しているサービスで、日本的なデザインを作る時に参考になります。
まとめ
今回は、イラスト・写真の素材サイトから便利な配色ツール、コミュニケーションや進捗管理に使えるツールまで、デザイナーの悩みを解決してくれるものをピックアップしました。
気になるデザインリソースは見つかりましたでしょうか。
デザインの際によく使うアイテムや気になるツールはブックマークしておくと、すぐに使えて便利です。
少しでも効率よく作業を進めたいと思ったら、使えそうなデザインリソースを前もって収集しておきましょう。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- WordPress
- WordPressとは、CMS(コンテンツマネジメントシステム)の1種で、ホームページ管理システムのことです。ブログ感覚で記事の修正・追加が行えるうえ、通常のホームページ並みのデザインを作成することができます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- CMS
- ホームページを作成するための様々な作業を、一元的に管理できるシステムのことをCMS(コンテンツ マネージメント システム)と言います。ホームページを作成するには文章や画像などのコンテンツの作成からHTML、CSSを使った構成・装飾の記述、リンクの設定などが必要ですが、CMSを使用すればこれらの作業を自動的に行なうことができます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
- スマホサイト
- スマホサイトとは、スマートフォンからの閲覧に対応したホームページのことです。スマートフォンは、画面サイズや操作方法がパソコンとは異なります。そのため、訪問ユーザーが快適に閲覧できるよう、パソコン用のホームページとは異なるデザインのスマホサイトを用意するホームページが増えています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング