デザイン作成で活躍するデザインツール一挙大公開!

Design resources

オンラインで使えるデザイン周りの便利なツールをお探しですか?

フォントやカラーコンビネーション、ステキなパターンを見つけるのに時間がかかっていませんか?リソースやツールを探す手間が省ける「何か」があれば、本当にやりたいことに時間が費やせるはずです。

そんなあなたの為に、インターネット上にある便利なツールやリソースをひとまとめにしてみました!

この記事をお気に入りに入れて、デザイン作成をもっと楽にしましょう!

01. カラーインスピレーション

 

デザインに合う「完璧な色」を見つけるのは本当に難しいですよね。Canvaではこの記事で100種類のカラーコンビネーションを紹介しましたが、もっとインスピレーションとなるものが必要な場合は、以下をチェックしてください。

  1. Flat UI Color Picker – フラットデザインのインスピレーションならココ!色のカテゴリーから選ぶだけの簡単操作。
  2. ColourLovers – カラーの愛好家のためのコミュニティです。閲覧するだけで斬新で刺激的なカラーコンビネーションがみつかります。
  3. Material Palette – 美しいインターフェイスでマテリアルデザインのインスピレーションが簡単に見つかります。
  4. Color By Hailpixel – とてもシンプルで扱いやすいです。画面上でマウスを左右に移動するだけで好みの色合いを見つけることができます。
  5. Coolors –  ボタンのクリックで温度、色、明るさ、彩度を調整する自動カラージェネレーター。 スピーディで使いやすいです。
  6. ColRD –  視覚的なインスピレーションが得られます。色、グラデーション、パレット、模様、または画像で検索して、あなたのお気に入りの作品を見つけましょう。
  7. Color Hunter – 画像を元にカラーパレットが作成できます。Color Hunterなら画像内の色のうち、上位5色を探せます。
  8. BrandColors – いろいろなブランドの正確なブランドカラーを調べることができます。
  9. ColorKit – ワンクリックで色を簡単に変更できるサービス。
  10. TinEye Labs – Flickrにある2000万のCreative Commonsイメージから、あなたが選んだ配色に完全に一致する無料の写真を見つることができます。

02. イメージインスピレーション

 

誰もがデザインを自分だけで作成しているわけではありません。絶えず他の人やモノから影響を受けています。ここでは、あなたに何かしらの影響を与えるような素晴らしいデザインを紹介します。

  1. Awwwards -業界で最も革新的で才能のあるWebデザイナーを紹介し賞を与えているサイトです。
  2. Favourite Website Awards (FWA) –  Awwwardsと同様、ウェブサイトデザインのコレクションです。
  3. Dribbble – Dribbbleなら、仲間のグラフィックデザイナーやイラストレーターなどからインスピレーションを受けたり、クリエイティブを見つけることができます。
  4. Behance – すべての人に公開されるポートフォリオサイト。Behanceならたくさんの優秀なクリエイティブを検索できます。
  5. Typespiration – タイポグラフィが好きならココ。魅力的なフォントコンビネーションやWEBセーフなフォントファミリーを見つけることができます。
  6. Niice.co – キュレートされた作品集から、インスピレーションを得ることができます。
  7. DesignTAXI – 最新のデザインニュースを作品やビデオから確認することができます。
  8. Twibfy – さまざまな作品を検索してインスピレーションを得ることができ、見つけた作品はコレクションできます。
  9. Logopond – 今までに見たことのない最高のロゴデザインのショーケースです。
  10. Designspiration  – グラフィックデザインやイラストレーションなど、さまざまな作品を見ることができます。

03. アイコン

 

アイコンがダウンロードできるサイトを集めています。もっと見たい!という方は、この記事で、無料アイコンを提供しているサイトを紹介しているので参照してください。

  1. Captain Icon – 350以上のベクターアイコンが用意されています。個人でも商用でも利用できますが、クレジットを付けるのを忘れないように。
  2. Canva – Canvaもデザイン作成に使えるアイコンを多数用意しています。もちろんクレジットの記載は必要ありません。
  3. NounProject – 洗練されたインターフェイス。高品質のアイコンを手ごろな価格で購入できます。無料でダウンロードできますが、クレジットの表記が必要です。
  4. Medialoot – 何千ものアイコンを無料でダウンロードできます。キーワードやカテゴリーで簡単検索。
  5. GraphicBurger – ユニークでカラフルなアイコンがみつかります。
  6. Psddd.co –アニメーションアイコンなど、他では見つけづらいアイコンが勢ぞろい。
  7. Dbfreebies.co – DribbbleとBehanceの無料で提供されているアイコンを見つけることができます。
  8. Iconfinder – 50万ものアイコンから好みのものを見つけることができます。
  9. Flaticon – Freepikの提供元から、フラットアイコンが無料で提供されています。利用にはクレジット表記が必要です。
  10. Iconmonstr – クレジット不要のフラットアイコンがみつかります。アイコンは小さいですが、品質は高いです。

04. テクスチャとパターン

 

テクスチャやパターンほど、デザインに新たな一面を加えるものはありません。ここでは、パターンのコレクションがみつかるサイトを紹介します。

  1. Brusheezy – 無料でダウンロードして使えるテクスチャとパターン集。利用時はリンクを貼ってください。
  2. CG Textures – 探しているものが簡単に見つかります。
  3. Subtle Patterns – デザインに新たな一面を加えてくれるような背景テクスチャをダウンロードできます。
  4. TextureMate – ダイナミックな背景に役立つレンガや樹皮などのパターンを見つけることができます。
  5. TextureLib – 何千もの画像から簡単に検索ができます。
  6. The Pattern Library –スクロールするだけで無料のパターンを検索できます。パターンは美しく、カラフルで、高品質です。
  7. Pattern Cooler – シームレスなパターンを見つけることができます。
  8. DinPattern – ダウンロード前にサンプルのプレビューができます。
  9. Pattern8 -色でソートできるユニークなパターン集。

05. 背景

 

ここでは、よりデザインを輝かせてくれる背景素材を見つけることができます。

  1. Freepik – 13,000以上の素材から好みのものを無料でダウンロードできます。
  2. Pixabay – 多種多様な背景写真から選べます。
  3. Free PSD Files – 抽象的な背景や、シルエットなどから選べます。
  4. Blurgrounds – ぼやけた背景がみつかります。
  5. Vector.Me – ベクターの背景素材をたくさん取り揃えています。
  6. Vecteezy – 4,000以上のベクター背景が揃っています。
  7. Polygons – ポリゴン背景を探すことができ、そのほとんどが無料でご利用いただけます。
  8. Geometric Backgrounds – 幾何学的な背景がダウンロードできます。商用ライセンスは$ 14で利用可能です。 個人利用として100素材は無料でダウンロードできます。
  9. GraphicsFuel – グランジから水彩まで、幅広いタイプの背景を取り揃えています。
  10. Vector BG – 3Dや抽象的な背景、ビジネスに使える背景まで取り揃えています。

06. ベクター&イラストレーション

ベクターやイラストレーションの素材が必要な場合は、こちらのサイトをご活用ください。

  1. Freepik – 巨大なベクターとイラストのライブラリです。完全に無料で利用できますが、クレジットの表記が必要です。
  2. Canva – もちろんCanvaにもベクターとイラストの素材が多数あります。
  3. Pixel Buddha – Pixel Buddhaにも多数の素材が用意されています。他で見つからない場合は、ここを見てみることをお勧めします
  4. Free Vector Maps – ベクターファイルの地図を探しているときは、まず初めにここで探してみましょう。
  5. FreeVectors.net – ネット上からキュレートされた無料のベクターファイル集。
  6. Vector4free – 背景や、アイコン、グラフィック素材が勢ぞろい。
  7. Vecteezy – 個人でも商用でも利用できるベクターファイル集。クレジットの表記が必要です。
  8. Free Vector Archive – 無料のベクターとグラフィック素材がみつかる楽しいサイトです。

07. フォント

 

フォントの紹介サイトをいくつかまとめてみました。

  1. DaFont –フォントを購入する前に直感的に触れるプレビュー機能でフォントを試すことができます。
  2. Font Squirrel – 手の込んだフォントが無料でダウンロードできます。しかも商用利用可能です。
  3. Creative Market – フォントショップのリーディングサイトです。
  4. MediaLoot – さまざまなフリーフォントと有料フォントを用意しています。グラフィックデザインのリソースも提供しています。
  5. FreebiesBug – フォントに関するキュレ―ションサイトです。
  6. FontFace Ninja – ネット上で見つけたフォントの名前を知りたいと思ったことはありませんか?その場合は、FontFace NinjaのChrome、Safariの拡張機能を使ってみましょう。
  7. KevinAndAmanda – かわいい手書きやスクラップブッキングのフォントがみつかります。
  8. FontSpace – 27,000ものフォント集から好みのものを見つけることができます。
  9. SimplytheBest Fonts – クレイジー、液体、テレビ番組、ミュージカルなど面白いカテゴリーからフォントを検索できます。
  10. Letterhead Fonts – タイトルや見出しにぴったりのフォントがみつかります。

08. デザインポッドキャスト

 

ジョギングだったり、家事をしているときの時間をもっと有効的に使いませんか!ここでは、聴いているだけでインスピレーションが沸いてくるポッドキャストを紹介します。

  1. Design Matters with Debbie Millman – デザインに関するポッドキャストで昔からありますが、今でも最高のコンテンツを提供しています。
  2. Style Guide Podcast – Anna DebenhamとBrad Frostが主催するこのポッドキャストは、デザインのオピニオンリーダーのインタビューを共有しています。
  3. Adventures in Design –デザイン業界に役立つ多くの識見を紹介しています。
  4. The Web Ahead –  グラフィックデザインの情報だけでなく、今後のトレンドが聴けます。
  5. PageBreak Podcast – Liz AndradeとNiki Brownが主催するこのポッドキャストは、デザイン、開発、フリーランス、マーケティングのすべてのトピックに焦点を当てています。
  6. On the Grid –  デザインに関する内容を紹介しています。
  7. 99 Percent Invisible – オピニオンリーダーの Roman Marsのラジオ番組です。
  8. Young Guns Show – WEB作成を担当している若者についてフォーカスしたポッドキャスト。若いデザイナーにおすすめです。
  9. Graphic Design Podcast – Webとラフィックデザインに関する情報を提供している有益なポッドキャストです。

09. YouTube デザインチュートリアル

 

YouTubeをみて時間を無駄にした経験はありませんか?ここでは為になるYouTubeチャンネルを紹介します。デザインに関するシンプルな情報から詳しい情報まで手に入れることができます。

  1. Shawn Barry – フォントの選択から構成のルールまで、幅広いチュートリアルを提供しています。
  2. TastyTuts – デザイン上級者だけではなく、初心者でも分かりやすい情報を提供しています。
  3. Roberto Blake – グラフィックデザイン、DSLR写真、グラフィックデザインのテクニックなどを紹介しています。
  4. SpoonGraphics – デザインチュートリアルですが、動画がよく編集されていて分かりやすいです。
  5. The Skool Network – デザイン業界の事や、プロのデザイナーになる方法が学べます。
  6. Canva – Canvaではデザインを作成するのに役立つヒントをYouTubeで紹介しています。
  7. Armaganvideos –  グラフィックデザイン、ビジュアルエフェクト、およびイラストレーションに関する最新のチュートリアルがたくさんあります。
  8. Stephen Looney – プロのデザイナーになる為の有益な情報を提供しています。
  9. Draw with Jazza – 美しい手書き画像を作成する方法を提供しています。
  10. MarkCrilley – 1つの動画だけで2000万回の再生を誇るアーティストです。手書きに関するチュートリアルが学べます。

10. デザイン教育

 

デザインが学べるサービスの紹介です。コースによっては無料で受けることができます。

  1. Lynda – イラストレーション、タイポグラフィー、グラフィックデザインなどに焦点を当てたオンラインビデオとトレーニングコース。 500以上のコースから選ぶことができます。
  2. Tuts+ – デザインに関するあらゆるポイントを学べる素晴らしいサービスです。無料と有料のコースがあります。
  3. Skillshare – ランチタイムなどの短時間でも受けることができる一口サイズの授業。自分のペースで受けられます。
  4. Canva's Design School – もうすでに読んでいますね!Canvaでも学べるコンテンツを提供しています。
  5. CreativeLive – ビデオで学べるオンラインクラスです。いつでもクラスを受講できます。
  6. Udemy - 勉強したい分野で高い評価のクラスを簡単に見つけられます。
  7. Coursera – 大学で学ぶようなデザインのコースを探していたら、このサイトをチェックしてください。

11. デザインコミュニティ

 

コミュニティに参加すれば、他のデザイナーとお互いに成長することができます。ホットなトレンドを見つけたり、難しいトピックに対して議論したりしましょう。

  1. Graphic Design Forum –フォーラムに参加し他のデザイナーと交流できます。あなたが取り組んでいるもののショーケースを紹介したり、他のデザイナーから貴重な資料を共有してもらうことができます。
  2. Behance –他のデザイナーとコミュニケーションを取るのにうってつけです、批評やコラボレーションを探している場合でもお勧め。
  3. DeviantArt –ユーザー同士が自由にフィードバックをしている非常にアクティブなコミュニティです。
  4. DreamInCode – あなたのグラフィックデザインを他のデザイナーと共有できます。
  5. Newground - インスピレーションを与え合ったり、アートワークのレビューとコメントの共有ができます 。
  6. Flickr - デザイングループを検索するのに最適な場所です。 写真やデザインを共有したり、コミュニティメンバーから触発されたりしましょう。

12. プロジェクト管理ツール

 

デザイン作成って、かなり複雑な工程を経て完了しますよね。もしチームやクライアントと作業をしているならなおさらです。そんな場合は、生産性を向上してくれるツールをチェックしましょう。

  1. ProofHQ - クライアントと一緒に作業をしている場合、デザインの承認など、各プロセスを合理的に動かすことができます。
  2. Wrike - プロジェクト管理のお勧めツールです。 リアルタイムのワークスペースコラボレーション機能を備えています。
  3. Huddle - チームで使用するのに最適なクラウドベースのファイル共有およびコラボレーションツールです。クラウド内のすべてのファイルを共有し、タスクを管理できます。
  4. Freedcamp - チームとファイル共有や予定の共有が簡単にできます。
  5. Trello - プロジェクトやアイデアを視覚的に管理、またはチームと共有するための無料のツールです。
  6. Pinterest - 感動的な作品や自分の作品を見つけてピン留めして管理したり、シークレットボードを作成して進行中の作品を非公開にして管理することもできます。

13. 画像変換ツール

 

画像の圧縮から、拡張子の変換までさまざまなツールを紹介します。

  1. TinyPNG - PNGファイルを解像度を下げずに軽量化できます。
  2. TinyJPG - 上記と同じですが、JPGファイルのみ軽量化できます。
  3. Compressor.io - 画像を圧縮して最大90%まで最適化するすばらしいツールです。
  4. Canva - 画像を切り抜いたり、フィルタを追加したり。なんでもできます!
  5. PSD to PNG Converter –PSDのグラフィックをPNGグラフィックに変換できる優れものです。
  6. Image File Types Explained –どんなファイルのフォーマットを選べばいいか分からない場合に参考になるページです。
  7. Web Image Format Infographic - 画像の拡張子を説明したインフォグラフィック。オフィスに貼る事をお勧めします。

今回のサービス一覧、お楽しみいただけましたか?気に入ったサービスがあったらブックマークして、周りにぜひぜひ共有してください。