新人デザイナー必見！ときめきとひらめきの源、デザインリソースで作業を効率化しよう
Goodpatch Blogをご覧の皆さんの中には、デザイナー見習いの人や、勉強中の人も多いことと思います。
今回のGoodpatch Blogは、そんな皆さんのためにお届けします。
「デザインのトレンドが知りたいけど、何を参考にすればいいの？」「もっと色んなところからインスピレーションが欲しい！」
という悩みに直面したことはありませんか。
そこで、Goodpatchのデザイナーがよく覗いたり、参照しているサイトをピックアップしてご紹介します。
あなたの仕事をもっと効率的で楽しくしてくれるデザインリソースとして、参考にしてみてください。
目次
1. インスピレーションが得られる
Dribbble
https://dribbble.com/
デザイナーが使うポートフォリオサイトと言えば、有名なのがDribbbleではないでしょうか。
招待制のサイトであることから、作品のクオリティが高い点が特徴です。特にイラストレーションやUIなど、デザイナーの細部へのこだわりを感じられるような作品が多い印象を受けます。新進気鋭のデザイナーがたくさん登録しているので、デザイナーを探す時にはdribbbleを使ってコンタクトを取ることも珍しくないそうです。
GoodpatchのデザイナーにもDribbbleユーザーは多く、過去には「Dribbble Meetup」というイベントも開催しています！
2017年6月には公式iOSアプリがリリースされているので、こちらもチェックしておきたいですね。
Behance
https://www.behance.net/
Adobeが運営するポートフォリオサイト。
Dribbbleと比較すると、グラフィックデザインやアートディレクション、ブランディングなど、クリエイティブの幅が広い点が特徴です。
iOSとAndroidアプリもあるので、移動中や休憩中にのぞいてみると、いつでも刺激をもらえること間違いなしです！
https://www.pinterest.com/
サイト上の作品をピンして（集めて）コレクションできるサイト。
デザイン系に限らず、ファッション、コスメ、インテリア、建築など、様々な分野のトレンドに触れることができるサイトです。
クライアントワークでPinterestを活用しているGoodpatchのデザイナーは、「クライアントとイメージの共有をする時に役立っている」と話していました。「ナチュラル」「ガーリー」など、人によって異なる感覚的なイメージを設計する段階で、イメージソースがたくさんあるPinterestは便利なようです。
また、Choromeの拡張機能を使うことで、気に入った画像をいつでも気軽にピンすることができます。ダウンロードはこちらからどうぞ！
Twibfy
https://twibfy.com/discover/
様々な作品を見つけてコレクションしたり、共有することができるサイト。
他のサイトと比較して、プロダクトデザインやパッケージデザイン、ブランディングなどの作品が多い印象を受けました。
サインインはFacebook・Google+連携のほか、メールアドレスでの登録も可能です。
試しに登録してみたところ、斬新なアイデアがたくさん見つかるので、コレクションする手が止まりませんでした！
コレクションを新しく作成する時、大きくタイトルのプレビューが表示されるところがさりげなく親切です。
アーティスティックな写真で非日常な気分に浸ったり、企業やブランドのデザインで実例を学んだりと、様々なインプットができるのでおすすめです。
Designspiration
http://designspiration.net/
グラフィックやイラストレーションからプロダクトデザインまで、様々な作品が集まるサイトです。
作品のメインカラーを5〜6色表示していることが特徴で、気になる作品のキーとなる配色をすぐに知ることができます。
また、色で検索できるところもユニークで面白いと感じました。
ターゲットやコンセプトによってデザインの配色を考える時に、役立ちそうな機能ですね！
AWWWARDS
https://www.awwwards.com/
AWWWARDSは、インターネット上で行われるデザインアワードのサイトです。
世界中のクリエイターやデザイナー、デベロッパーが対象で、厳選された審査員メンバーによる表彰が行われています。
審査員でなくとも、アカウント登録がされていれば投票は可能ですが、実際にスコアが反映されるのはステータスポイントが高いユーザーのみ、というルールもあります。
スコアリングの基準は4つあり、
- Design
- Usability
- Creativity
- Content
このように様々な観点から評価され、合計点が高い作品が表彰されます。
表層的な部分だけでなく、使いやすさ（Usability）が採点基準にある点が良いなと思いました。使いやすさを含めた本当に優れたサイトを見ることで、アウトプットに活かせるのではないでしょうか。
Unsplash
https://unsplash.com/
高クオリティな写真が5万枚以上集まっているサイトです。商用利用可能で、フリー素材なのが嬉しいですね！
雑誌のように美しい写真が多く、眺めるだけでもインスピレーションが得られると思います。
私はこのサイトを使って、ブログ用のアイキャッチを探すことがあります。サイト内で綺麗な写真を使うことは、読者の誘導を促すために効果的だと思うので、Unsplashは個人的にもおすすめしたいです。
2. UI・webデザインの参考になる
pttrns
https://pttrns.com/
色々なアプリのUIを集めたサイト。カテゴリ分けが非常に細かく、ロード画面やマップなど、ピンポイントで欲しい情報がすぐ見つかるところが便利です。
海外の作品が多いので、トレンドのキャッチアップもできますね。
2017年の現在は、“Emoji”をUIに取り入れたものが多い印象を持ちました。
サイト内にある全てのパターンを見るには、$4.99＝¥565/月のプランか、$39.99=¥4,536/年のプランで登録が必要です。
プレミアム会員になることで、広告表示がなくなり、検索やアップロードもできるようなので、「とにかくUIが研究したい！」という人は登録してみるといいかもしれません。
lovely ui
http://www.lovelyui.com/
iPhone、iPad、AndroidのUIを集めたサイト。公式アプリのアイコンなどもたくさん上がっています。
現在は更新が止まっているようなので、トレンドを追うことは難しそうですが、iPhoneのUIだけでも1200点以上あり、6年前のインターフェースなども見ることができます。
シンプルなUIや女性向けアプリのUIが多い印象を受けましたが、サイト全体もlovelyという名前の通り、フェミニンなイメージに仕上がっています。
Screenlane（旧：UI Movement）
https://screenlane.com/
様々なアプリやサービスのインタラクションを集めたサイト。細かいインタラクションをデザインする時に参考になるのではないでしょうか。
スマートフォン以外にも、テレビ、PC、タブレットにおけるインタラクションなども見ることができます。
斬新なアイデアが多いので、ブックマークしておいてどんどんキャッチアップしたいですね！
Sketch App Sources
https://www.sketchappsources.com/
Sketchのための素材がアップされているサイト。
TwitterやFacebookなど、誰もが使うようなサービスの素材や、iOS・Android公式アプリの素材まであるので、初心者の人がトレースを始める時などにも便利だと思います！
UpLabs
https://www.uplabs.com/
マテリアルデザイン、iOS/Mac、webデザインのUIなどを見ることができるサイト。
UIの他にも、アイコン、アニメーション、イラストレーションなどをそれぞれ検索することができます。
実際に使用できるUIキット、アイコン、イラストなどは有料ですが、こちらも充実しています。
Responsive Web Design
http://responsive-jp.com/
日本国内のレスポンシブwebデザインを集めたサイト。
レスポンシブwebデザインとは、PCやスマートフォン、タブレットなど、複数の異なる端末に対応できるひとつのテンプレートを使ったデザインのことです。
いくつかの実例を見て、写真やイラストがサービスの価値を訴求する要となる場合は、レスポンシブwebデザインが活きるのかなと感じました。
Landingfolio
http://www.landingfolio.com/
ランディングページ（LP）を集めたサイト。実際にサイトを訪問してLPをチェックできるので、新しいサービスに目がない人にもぴったりだと思います。
海外のサービスのLPは色遣いが新鮮で、「この色の組み合わせにこんな効果があるのか」と気づかされることがありました。
Typewolf
https://www.typewolf.com/
様々なフォントを集めたサイト。実際のサイトで使われているフォントを知ることができるので、イメージに近いフォントを効率的に知ることができますね。
UIについて幅広く考えたい時は、タイポグラフィを勉強することも有効なアプローチになるのではないでしょうか。
3. 配色・カラーコードを探せる
Color Hunt
http://colorhunt.co/
様々な配色パターンを見ることができるサイト。New, Hot, Popular, Randomと4つのカテゴリがあります。
カテゴリによっての違いが私には分からなかったので、同じように初心者の人は、カテゴリに関わらずたくさんのパターンを見てみることをおすすめします。
uiGradients
https://uigradients.com/#BrokenHearts
色のグラデーションをまとめたサイト。グラデーションにつけられた名前が詩的で面白いです。
名前がついていることで、イメージに近い配色を見つける手がかりになりますね。「どうしてこの名前なんだろう？」と考えることで、想像力も磨かれます。
私のお気に入りは、くすんだピンクの #d9a7c7 と淡いイエロー #fffcdc のBroken Heartsです！
Hello Color
http://jxnblk.com/hello-color/
ランダムで配色を提案してくれるサイト。画面をクリックすると、パターンが切り替わります。
コントラストが3以上の配色が表示されることが特徴なので、よりハッキリした配色を検討中の時に役立ちそうです。
ずっとクリックし続けていると目がチカチカしますが、コントラストが強い配色と一口に言っても、多様なイメージの持たせ方ができるなと勉強になります。
COOLORS
https://coolors.co/
カラーパレットを作れるサイト。自動で5色の配色が表示され、スペースを押すと違う配色に切り替わります。
それぞれの色の明度・彩度・色合いを調整できるので、イメージ通りの配色が完成したら、エクスポートで終了です！
エクスポートの形式はURL/PDF/PNG/SCSS/SVGの他、コピックの色番にも対応しています。「こんなイメージで！」を伝える時にとても便利ですね。
Material Palette
https://www.materialpalette.com/
カラーパレットを作れるサイト。最初に選ぶ2色と相性の良い6色で、カラーパレットを提案してくれます。
パレットを使ったマテリアルデザインのプレビューも確認できるので、配色をUIに落とし込んだ時のイメージがしやすいですね。
Flatuicolorpicker
http://www.flatuicolorpicker.com/
フラットUIのためのカラーコードが並んでいるサイト。
レッド系からブルー系、グレー系までがずらりと並び、同系色の中でも微妙なニュアンスの違いを見たい時に使えそうだと思います。
iPhoneから見ても非常に綺麗なサイトなので、ブックマークしておきたいと思います！
様々な22のサイトをご紹介しました。お気に入りのサイトは見つかりましたか？
日々のインプットやトレンドリサーチ、そしてインスピレーションが欲しい時に、参考になれば嬉しいです。
