デザイナーが確認しておきたい、デザインリソース完全ガイド 2016年度

オンラインホームページ作成ツール Webydo で働いている現役デザイナー達が、普段からよく利用している、作業を楽にするオンラインツールやリソース75個をまとめています。

ウェブサイトでよく利用する写真の見つけ方や最適化方法から、アイコンやフォント、配色などデザイナーが一度は困ったことのある問題を解決してくれる凄腕ツールが揃っています。現在の制作フローに活用し、より快適な作業を実現しましょう。

コンテンツ目次

イメージ画像・ビデオ動画の関連ツール
アイコン関連ツール
書体、フォント関連ツール
配色カラーツール
モックアップ＆プロトタイプツール
ウェブサイト制作ツール
コラボレーション、作業効率ツール
デザインコミュニティーサイト
オンライン・ラーニング、スクール

イメージ画像・ビデオ動画

ShowBox – ブラウザ上からスタジオ制作されたような、高品質なビデオ動画を作成できます。
Coverr – ウェブデザインの背景などに使える、美しい無料ビデオ動画ストックサイト。
Compressify – ビデオ動画をアップロードすると最適化して、ファイルサイズを減らしてくれるベストツール。
Pexels – ロイヤリティーフリーで何にでも使える高品質なイメージ写真とビデオ動画を無料ダウンロードできるストックサイト。
Unsplash – 世界中のフォトグラフィーが投稿する、超高画質なフォトストックサイトで、膨大なコレクション数もポイント。
Death to Stock – クリエイティブな業種や職種に活躍する、ポジティブなバイブスを感じるフォトストックサービス。
Photype – 写真のさまざまな画像サイズや文字テキストのオーバレイ配置などを試すことができ、作成したクリエイティブはダウンロード可能です。
JPEGmini – 画質クオリティーを下げることなく、最大で80％まで画像サイズを減らすことができるツール。PhotoshopとLightroom用プレミアムプラグインもオススメ。

目次へ戻る

アイコン関連ツール

Iconfinder – 110万個を超えるアイコンコレクションから検索できる、世界最大級の無料アイコン配布サイトのひとつ。
The Noun Project – 世界中の誰にでも分かりやすいユニーバサルデザインのピクトグラムと絵文字に特化したプロジェクトで、各アイコンを PNG と SVG　ファイルでダウンロード可能。
Flaticon – こちらも3000種類をコレクションに分けられた、20万個以上のアイコン素材をお好みに応じて SVG や PSD、PNG、EPS、Base 64形式でダウンロードできます。
Icomoon – ピクセルパーフェクトにこだわった使いやすいアイコンを揃えており、自分だけのアイコンフォント作成ツールも充実しています。
Material Icons – Googleから公式で公開されている、マテリアルデザイン用のアイコンライブラリ。ボタンクリックして表示されたコードをコピペするだけのお手軽さ。
Icon Stores – 世界中のデザイナーから集めた、高品質の無料アイコンコレクションを公開しているサイト。
Illustrio – ブランドイメージに合うようにアイコンをカスタマイズできる、検索可能なアイコンデータベース。

目次へ戻る

書体、フォント素材

Right Font – 軽量でサクサクと動く、Mac専用のフォント管理アプリで、フォントのプレビューやデバイスごとの同期、整理などを行うことができます。
Font Reach – ウェブ上の数百万というサイトが利用しているフォントスタイルをスキャンし、リストアップした、デザイナーの動物園のようなサイト。
Google Fonts – 個人デザイナーやデザイン事務所から集めたフォントコレクションで、選択した書体はボタン操作ひとつで、ウェブフォントとして利用できます。
WhatFont – ブラウザで表示されている書体をクリックで調べることができる Chrome 用拡張機能。
Typekit – Adobe が公開しているプレミアムフォントの膨大なコレクション。利用にはAdobe IDにログインする必要があります。
Font Flame – 左右方向へのスワイプで、フォント組み合わせの好き嫌いを選択していく、中毒性の高いデザイナー向けツール。
Typeface – Mac用の新しいフォント管理アプリツールで、素早く表示されるプレビュー機能でピッタリの書体を探すことができます。
Font Squirrel – 手作業でセレクトされた、商用利用も可能なフォントのコレクションで、書体の試し打ちなど基本サービスも充実。

目次へ戻る

配色カラーツール

colorpicker

Color Hunt – 美しい配色がポイントの、4色のカラーパレットを集めているサイト。配色アイデアが欲しいときに活用したいサイトのひとつ。
Hello Color – ボタンをクリックするだけで、コントラストをうまく表現した配色を生成できるオンラインツール。
LOL Colors – こちらもデザインに活用したい配色カラーパレットのキュレーションサイトで各色をクリックすることで #HEX値をコピーできます。
Coolers – ボタン操作のみでお好みの配色を完璧に作成や保存、シェアまでできるお手軽オンラインツール。
Adobe Kuler – カラーホイールから特定の色の類似色や補色などを、直感的にお好みの配色を見つけることができるツール。
ColorZilla – ウェブサイト上で使われている色を調べることができるカラーピッカーツールで、Chrome と Firefox 用プラグインに対応しています。
Design Seeds – 每日写真からインスパイアされた、美しい配色カラーパレットを投稿しているブログサイト。
UI Gradients – ハンドピックされたウェブデザインに活用できるグラデーションカラーを集めており、カラーコードをすぐにコピペすることもできます。

目次へ戻る

インスピレーション、アイデアの参考

Muz.li – ブラウザ Chrome のタブを開くたびに新しいデザインに関連するニュースをキュレーションしてくれるインスピレーションツールで、個人的にも愛用中。
Landingfolio – デザインの優れたランディングページを集めたウェブギャラリーサイト。
Awwwards – 每日世界中のすごいウェブサイトをあつめ、「今月のサイト」を決めるウェブサイト。
UpLabs – マテリアルデザインに関連するインスピレーションや関連記事、無料素材などを每日公開しているサイト。
Pricing Pages – 金額表、プライスリストのUIデザインだけを集めたウェブギャラリー。この他にも商品ページやオンラインショップをまとめたギャラリーもあります。
User Onboarding – 人気のウェブサイトやアプリを解剖し、どのように開発やデザイン作業を進めるべきかを学ぶスライドショーが、多数公開されています。
Mindsparkle Mag – デザイナーの時間つぶしに最高なサイトで、クリエイティブなデザインインスピレーションが多数紹介されています。
Eye on Design (AIGA) – 世界中のデザイナーの新しい動向や作品を伝えるデザインyクレーションサイト。
It’s Nice That – 世界中の注目したいグラフィックやプリントデザインを集めているサイトで、美しいデザインのみが揃っています。
The Great Discontent – クリエイティブなフィールドで活躍するデザイナーにスポットを当て、じっくりインタビューする人気企画。
Typewolf – インスピレーションの参考になりそうな、タイポグラフィー書体を利用したデザインを集めているブログサイトで、デザインのトレンドを知りたいときに。

目次へ戻る

モックアップ＆プロトタイプツール

InvisionAPP – ブラウザ上でプロトタイプの作成から、チームによる共同作業、ページ遷移などのワークフローまで確認できるツールで、ウェブやモバイル用プロジェクトのモックアップ作成にどうぞ。
Sketch – Photoshop に並んで人気急上昇中のデザインアプリで、特にUIデザインの作成に定評があります。
Napkin – モバイル端末からモックアップを手軽に作成できる iOS アプリ。
Placeit – オフィススペースなどで実際に使われているような、リアルなモックアップをオンライン上で作成できます。デザイン素材が不足しているときにもどうぞ。
Frontify – コンセプトは、5分以内でウェブサイトのスタイルガイドを作成する、作業がはかどるオンラインツール。
Pixel Buddha – 高品質なモックアップ素材の他に、ウェブデザイン制作に利用できるさまざまな無料素材を公開しています。
Graphic Burger – こちらも高品質な無料素材のみを公開している、デザイナー御用達の老舗ブログサイトのひとつ。

目次へ戻る

ウェブサイト制作ツール

デザイナー向け

Webydo – オンラインでレスポンシブ対応のウェブサイトを作成できるツールで、CMS機能やホスティングサービスにも対応しています。
Adobe Muse – コードを書くことなくさまざまなレイアウトを実現できる、オフライン用ウェブサイトビルダーツール。

コーダー、デベロッパー向け

WordPress – ウェブサイトの運営やモバイルアプリの開発、ブログ運営などもできるCMSツール、当サイトでも利用中。
Dreamweaver – Adobe 公式のデザイナーやフロントエンド・デベロッパー向けのウェブデザインツールで、コードの知識がなくても美しいウェブサイトを作成できます。

ウェブ初心者向け

Squarespace – ランディングページやウェブギャラリー、ブログ、オンラインストアなどを知識がなくてもはじめることができるサービスで、最初からモバイル端末にも対応しています。
Wix – ドラッグ＆ドロップを基本とした簡単操作で、HTML5ウェブサイトを手軽に作成できるオンラインツール。

目次へ戻る

コラボレーション、作業効率ツール

Lingo – 作成したデザインアセットライブラリを、そのままチームで共有できるデスクトップ用ツールで、デザイナーにとってDropboxのような使い方ができます。
Mural – オンライン上でアイデアのブレインストーミングから、他のチームメンバーとのコラボーレションまで可能にしたサービス。
Wake – リモートで働くチームの作業の進捗状況や、メッセージなどを手軽に共有できるフリーランス必須アイテム。
Slack – すべてのチャットや会話をひとつの場所にまとめて整理できるリアムテイム・メッセージサービス。キーワード検索やアーカイブ化などもボタンひとつで、個人的に愛用中。
Trello – それぞれのデザインプロジェクトごとに、ちょっとしたメモ書きから巨大なイメージ写真まで丸ごと管理できる作業効率ツール。
GoVisually – デザインプロジェクトにおけるクライアントのフィードバックをすぐに確認でき、制作に反映させることができるシンプルなツール。

目次へ戻る

オンライン・ラーニング、スクール

NuSchool – フリーランスとしてビジネスを進めていく上で重要なことは何かを学びます。
HackingUI – 新しいデザインやテクノロジーを学ぶコミュニティーサイトで、デザインに対する情熱あふれるデザイナーやデベロッパーが参加しています。
Phlearn – オンラインで Photoshop チュートリアルを学ぶサイトで、高品質なアートワークを完成させるテクニックを学びます。
Just Creative – ブランディングやロゴデザイン、フォトグラフィー、ウェブデザイン、ソーシャルメディアなどについて詳しく解説した記事が目立ちます。
Tuts+ – ウェブデザインの基本的な作り方から、高度で新しい技術まで学ぶことができる、数千を超えるチュートリアルが公開されている老舗サイト。
How Design University – プロフェッショナルなテクニックを学ぶオンラインコースで、PhotoshopやIllustratorといったデザインから、コーディングまで幅広く揃います。
Design for a Perfect Screen [eBook] – ウェブデザイン制作に必要なデザインテクニックをぎっしり詰めこんだ無料 eブック。
A Beginners Guide to SEO – ウェブデザインのSEOについての情報をまとめた完全ガイドを公開しているサイトで、SEOについてはじめて学びたいときにも便利です。