「工数」で仕事を管理するWEBデザイナーの仕事は、常に時間との勝負です。
速いスピードと高いクオリティを求められるWEBデザイナーが、実際に使用しているWEBサービスやツールをご紹介いたします。
Contents
デザイン制作の参考にしているサイト
デザインのポータルサイトはたくさんありますが、その中でも使い勝手が良くて実際の現場でよく使っているものだけを厳選しました。愛用中のサイトです。
1. MUUUUU.ORG
「デザイン 参考」と調べると必ず上位に君臨しているサイトです。
使い勝手も見た目の美しさも、読込の速さも最高です。1番良く使っています。更新頻度も高いので、毎日見ていても新しいサイトに出会わせてくれます。
新人の頃は、自分のデザインしたサイトがこのサイトに掲載されるのが目標でした。（2017年に叶いました！）
個人的に広告ゴリゴリのギラギラした参考サイトが好きじゃないので、ストレスなく良いデザインだけが吸収できる本当に使えるサイトです。
おすすめ度：
2. SANKOU!
こちらも使用頻度の高い参考サイトです。
4カラムレイアウトなので、参考サイトのファーストビュー1つ1つが大きくて見やすい印象です。
AND検索が出来るところが優秀で、「金融 × 採用サイト」や「ホテル × 高級感」などカテゴリを絞って検索したい時に重宝していて、「インバウンド･多言語」や「ローディング」など、普通の検索ではヒットしない参考サイトを探している時にも役立てています。
個人的な使い分けとして、じっくり探したいときはSANKOU!、ざーっと探してインスピレーションを受けたいときはMUUUUU.ORGを使っています。
おすすめ度：
3. Pinterest
これはもう本当に本当に愛用していて、何度助けられたか分かりません。
WEBデザインはもちろんですが、提案資料や企画書などのプレゼンアイデアや、旅行先の候補地探しなんかにも一役買ってくれている超優秀な参考ツールです。
ハイセンスやトレンドのものが多く、斜め読みしているだけでテンションが上がります。Pinterestを見ていて気付いたら夜が明けていた経験があります。それくらいハマれるサイトです。
ライフハック記事も多くコレクションされているので、クリエイティブ以外の情報収集にも最適です。
おすすめ度：
4. マイフェバ
西日本旅客鉄道株式会社（JR西日本）が運営している関西・北陸・せとうちエリアのおでかけ＆観光情報サイトです。
昔は「マイフェバ関西」というサイトタイトルだったと記憶していますが、「北陸」や「せとうち」も追加されてどんどんアップデートされていくサイトです。
記事のメインビジュアルで使用しているアイキャッチ画像の作り込み精度が高く、コンテンツデザインの見せ方も素晴らしいの一言です。
遊び心あるデザインが多く、情報ポータルサイトに重要な、読みたくなるデザインが意図されていてとても勉強になるサイトです。
おすすめ度：
1つ1つの記事内容が充実していて、コンテンツの企画力と取材力にJR西日本の本気を感じます。旅行好きなわたしはついつい細部まで記事を読んでしまうので、このサイトに訪れると仕事が捗らないのではないかとうっすら感じています。
5. RWDJP
日本国内のみの秀逸なレスポンシブWebデザインを集めたポータルサイトです。
海外のWEBサイトはおしゃれでかっこいいものが多いのですが、最先端すぎて使いづらく現実的にはなかなか参考にしづらいものが多いです。
1で紹介したMUUUUU.ORGと、2で紹介したSANKOU!にも「国内サイト」というカテゴリは無いので、国内サイトに絞って参考デザインを探したい時に使っています。
また、サムネイルでスマホ、タブレット、PCサイズを展開して並べてくれているのも、WEBデザイナーにとってありがたいポイントです。
TOPページの可変デザインを作成するときによく閲覧しています。
おすすめ度：
商用利用可能なフリー素材サイト
写真のクオリティは、デザインの完成度を大きく左右する重要な要素です。
WEBサイト制作を請負っている会社は、クライアントから提供された写真素材を使用することがほとんどですが、クオリティの高いフリー素材も組み合わせて使うことで、サイトの表現力がグッと上がります。
ただ、コンテンツにぴったり合う写真素材に出会うのはなかなか大変です。
わたしの場合、デザインを作る時間よりも、写真を選定する時間の方が長いんじゃないかと思うくらい時間をかけているのが素材探しです。
そんな時に活用している商用利用可能なフリー素材サイト集をご紹介します。
この記事で紹介するサイトは、執筆時点で商用フリーと明示されているサイトとなります。また、素材そのものは無料（フリー）でも、写っている人物や建物の肖像権、商品やロゴの著作権など使用範囲が限られていることがありますので、必ず規約を確認して自己責任での利用をお願いします。
6. Unsplash
提供されている写真が100万枚以上と、圧倒的なコレクション数を誇る写真素材フリー（無料）サイトです。
海外らしいハイセンスで高いクオリティの写真が多いので、高級感のあるハイクラスデザインをする際に活用しています。
海外サイトなので、英語で検索をする必要がありますが、検索窓にキーワードの補助ツールが入っているので難易度は高くありません。
日本の写真素材は、「ザ・素材」といったものが多く、チープになりがちなため高級路線のデザインでは使いづらかったのですが、このサイトを使用するようになってから、写真素材で困ることが無くなりました。
かっこいい写真が何でも揃っている、めちゃくちゃ使えるサイトです。わたしはPCの待ち受け画像なんかもこのサイトの写真を使っています。
おすすめ度：
7. Pexels
こちらは日本語のフリー（無料）素材サイトです。写真だけでなく動画素材もフリーなので驚きです。
運営自体は海外のサイトですが、違和感のない日本語サイトとなっています。検索も日本語で出来るのが嬉しい点です。
ただ、写真のクオリティが高すぎて、「作品」のようなので、実際のWEBサイトでは浮いてしまい、使用する機会はあまり多くないかもしれません。
コンテンツに使うというよりは、背景やイメージ重視のキービジュアルとして使うことの方がわたしは多いです。とっても映えます。
おすすめ度：
8. ぱくたそ
こちらは日本の写真素材フリー（無料）サイトです。
国内最大規模で更新頻度も高く、日本語検索ももちろん可能です。
日本のサイトなので、UnsplashやPexelsと違い、日本の季節感や国内の風景、日本人モデルなど、日本の素材を探すときにおすすめです。
ぱくたそでは、肖像権利用の許諾を得たモデルの写真素材を公開しているので、よくLPや広告などで使われているのを見かけます。
良くも悪くも、モデルのキャラがフリー素材として確立し過ぎているので、企業のコーポレートサイトなどでは使わない方がベターです。
ニッチなタグカテゴリが多く、バラエティに富んだ素材が個性的で、「使って楽しい、見て楽しい」のキャッチコピー通り、素材探しが楽しくなるサイトです。
おすすめ度：
9. ICOOON MONO
アイコン素材がフリー（無料）でダウンロードできる素材配布サイトです。
アイコンなら何でも揃っています。こんなものまであるんだと感動するくらいのコレクション数です。
日本語検索可能で、タグも豊富なので、わりとどんなキーワードでもヒットします。
ダウンロード形式も「PNG」「JPG」「SVG」に加え、「イラレデータ（.ai）」「フォトショデータ（.eps）」まで完備されている超超超優れものです。
サイズもカラーも選択できるので、ノンクリエイターの方にもおすすめです。
おすすめ度：
ICOOON MONOはTopeconHeroes（トペコンーローズ）が運営しています。良質でクオリティの高い素材を無料で提供し続けてくれているおかげで、わたしたちデザイナーは効率的にクリエイティブなお仕事が出来ています。ICOOON MONO以外にも多くのフリー素材サイトを運営されているので、是非チェックしてみてください。
配色の参考サイト
デザイナーになって、わたしが１番苦戦したのが「配色」です。
簡単に見えて、いざデザインするとなると途端に難しく、奥が深い配色。わたしと同じく、配色に頭を抱えた経験のあるデザイナーは多いのではないでしょうか。
コントラストの加減や選色のバランスなど、配色ひとつでデザインがガラッと変わってしまいます。
センスの良いデザインを早く仕上げるために、配色の参考にしているサイトを紹介します。
10. PHOTOSHOPVIP
【保存版】デザインを学ぶすべての人に贈る、配色アイデア見本101選
こちらは、Photoshopを中心としたデザインの最新ニュースや、フリー素材まとめなどを中心に紹介しているクリエイター向けのブログサイトです。
チュートリアルやライフハックなどの実践で使えてためになる優良記事が多く、新人の頃すごく勉強させていただきました。
中でもわたしが大切に保存しているのがリンクの記事です。
万が一記事が消された時のために、この長いページのスクリーンショットを保存しているくらいの溺愛ぶりです。
カラーパレットと一緒に、インスピレーションをくれる写真が添えられているところを気にっています。
このパレットの中から配色を選んでデザインすると、褒められることが多く、最後までトンマナがブレずにデザインを進められます。
おすすめ度：
フォント決めの参考サイト
写真素材、配色に続いてデザイナーを悩ませるのが「フォント決め」作業。
ノンクリエイターから見るとささやか過ぎる違いでも、デザイナーからするとサイト全体の印象に関わる重要な選択です。
新人の頃はどこまでも迷走して、フォント選びだけで半日･･･なんてこともありました。
フォント迷子にならずにサクッと決まる、使えるサイトを紹介します。
11. wordmark.it
こちらは使用しているPCに保存されている手持ちフォントの中から、任意で入力した文章を一覧で表示してくれるサイトです。
全文英語のサイトですが、使い方はいたってシンプル。
「enter aword or a phrase」と書かれている入力枠に、任意のテキストを打ち込んでEnterキーを押すだけでこのとおり。
英語サイトですが、手持ちフォントを反映しているので、もちろん日本語でも大丈夫です。
選択肢に残したいフォントをクリックして、ソートをかけて最終選考をすることも可能です。
本当に仕事が捗ります。
おすすめ度：
12. Google Fonts
これ紹介するの？ってくらいのド定番ですが、WEBデザイナーならこれなくしてフォント選定を語れないのではないでしょうか。
無料(フリー)でダウンロード出来て商用利用も可能なWEBフォントの配布サイトです。現時点で989個ものフォントファミリーが登録されています。
日本語フォントは登録数が少ないので使っていませんが、欧文フォントの選定、主にコンテンツタイトルに使うフォントをここで探しています。
こちらも全文英語サイトなのと、少し使い方にコツが必要ですが、手順を説明しているサイトも複数あるので使い方はおググり下さい。
11で紹介したwordmark.itと同じく、こちらも任意の文字列を、一覧で表示してくれますが、選択肢が多くて逆に時間を使うことになりかねないので注意が必要です。
おすすめ度：
さいごに
今回紹介したものは、わたしがデザインスピードを上げるために、制作現場で実際にスタメン利用している参考サイトです。
デザイナーの仕事は、こういったデザイナーのサポートをしてくださるサービスやツールのおかげで成り立っています。
日々、お力を貸してくれる運営者の皆さま、本当にありがとうございます。
これからもクリエイターが効率よく楽しく仕事をするために、是非今日紹介したサイトを活用してみてください。
最後までお読みいただき、ありがとうございました！
