見出し画像

🗂️ Design Materials:デザイナーが選ぶ!おすすめのUXUIリソース2022年版

デザイナーとして適切なリソースを適切なタイミングで見つけることもスキルの一つです。毎回検索して素材を探し出すこともできますが、せっかく見つけた素材が有料であったり、まったく異なるものが含まれている場合があります。

今回は、インスピレーションが浮かばなかったり、行き詰まったときに使えるUXUIリソースをご紹介します。

UXリソース

優れたUXコンテンツを見つけた時は、とてもときめきます。今までにも多くの素晴らしいオンラインリソースに出くわしました。素晴らしいもの、そしてなくてはならないものもあります。それらを便利なリストにまとめました。

  1. Smashing Magazine
    プロのウェブデザイナーと開発者のためのオンラインマガジン。実用的なヒント、役立つガイドライン、ベストプラクティス、ケーススタディについては、専用のUXデザインカテゴリを参考にして見てください。

  2. UXPin
    モバイルとWebのプロトタイピング、ワイヤーフレーミング、モックアップ、ユーザビリティテスト、プロジェクト管理、デザインプロセスなどに関する思慮深いコンテンツを見つけることができます。

  3. UX Magazine
    ユーザーエクスペリエンスに関連するすべての中心的なワンストップリソース。指導、意見、分析に最適です。

  4. Nielsen Norman Group(ニールセンノーマングループ)
    「証拠に基づく」調査、記事、レポートの膨大なコレクションを提供しています。

  5. UX Booth
    ユーザーエクスペリエンス・コミュニティ。ウェブをより良い場所にすることに興味のある人は誰でも歓迎しています。

  6. A List Apart
    この人気のあるサイトでは、Web標準とベストプラクティスに特に焦点を当てて、Webコンテンツのデザイン、開発、およびその意味を探っています。

  7. UX Movement
    デザイナーがユーザーインターフェイスを作成する方法を改善することに専念している進歩的なユーザーエクスペリエンス・ブログ。

  8. The Hipper Element
    エクスペリエンス・アーキテクトのJoel Marshによってキュレーションされた記事、引用、リソースのコレクションを参考にできます。

  9. 52 Weeks of UX
    Joshua PorterとJoshua Brewerによって、1週間に1回、デザイン関係の記事が投稿されています。

  10. Usability Geek
    このサイトは、UXとインターフェースから変換と最適化まで、他のUXサイトよりもわずかに多様な名簿である幅広いトピックをカバーしています。

  11. Usability Post
    Dmitry Fadeyevは、この最小限のブログスタイルのサイトでUXとユーザビリティに関するコンテンツを作成および共有する開発者、デザイナー、ブロガーです。

  12. UXDesign.cc
    この非常に便利なサイトには、ユーザー・エクスペリエンスデザインで何が起こっているかについて最新の情報を入手するためのリンク、ブログ、書籍、方法、イベント、ツールのコレクションがあります。

  13. Medium
    技術的にはUX専用のサイトではありませんが、Mediumは言及する価値があると考えました。その集約されたコンテンツは、タグ、著者、または出版物によって発見およびフィルタリングできる、いくつかの本当に素晴らしい記事を提供します。間違いなく探索する価値があります。

フォント

良いUIデザインには、画面の60%をカバーするテキストが含まれていると言われることもあります。フォントを賢く選択することは非常に重要です。それは、一見しただけで意識的な効果をもたらし、その後、潜在意識レベルでユーザーに影響を与え続けるものです。

  1. Font Space

  2. Fontesk

  3. Dafont

  4. Google Fonts

  5. Font bundles

  6. Font Share

アイコン

24x24ピクセルまたはそれよりも小さいスケールで視覚的に効果的なものを作成することは非常に困難です。クリーンで正確なアイコンは、UIデザインの標準を引き上げ、UIをよりアクセスしやすくします。おすすめのオープンソース の無料アイコンをご紹介します。

  1. Font Awesome

  2. Material System Icons set

  3. FreePik Free Icons

  4. Icons 8

  5. Flat icon

  6. Feather icons

  7. Tabler icons

  8. Font Share

色合い

適切な色を使用しないと、UIまたは製品は、ユーザーが望んでいない可能性のある異なるエクスペリエンスをユーザーに提供し、大きなビジネス上の損失につながる可能性があります。これらのレファレンスは素晴らしい色の組み合わせと味覚をもたらします。

  1. Color Space

  2. Adobe Express

  3. Canva Color Palette Generator

  4. Eva Design System

  5. Coolors co

画像

ブランドの色味と美学に一致する慎重に配置された画像は、ウェブサイト全体をしっかりと見せます。 Web3.0や高解像度の画面の使用が増えるにつれ、高品質の画像を使用することが非常に重要になっています。

  1. Pexels

  2. Unsplash

  3. Rawpixel

  4. Flickr

  5. Burst

  6. PixaBay

イラスト

イラストレーションは、最近では最小限のUIではあまり使用されていませんが、スプラッシュスクリーンで使用する場合や、進行状況やメッセージを伝えるためにアニメーション化する場合に重要な役割を果たします。製品のUIの美学に一致するイラストを選択することも重要です。

  1. FreePik Vectors

  2. Undraw

  3. Open Doodles

  4. Glaze

  5. Icons8 Illustrations

ケーススタディ

デザイナーのポートフォリオにはケーススタディがあることが大切です。実際の事例から問題を解決する方法を探し出す必要があるからです。下記のリンクからケーススタディのインスピレーションを探して見てください。

インスピレーションのために:

  1. Built for mars

  2. Behance

  3. UX collective (Medium)

  4. Figma Community

  5. Dribble

テンプレート:

  1. Figma>Community>Creative Ferry case study template

  2. UX Folio

  3. Behance

  4. Design Stories

分析する力をつけよう!

画像

プロセスに構造を持たせることは非常に役立ち、多くの時間を節約できます。 情報を適切に評価するには、プロセスをコンポーネントに分割します。
良さそうなデザインやプロジェクトを見つけたら、次のような質問をして見てください。

  • What did you like about the project?
    このプロジェクトのどこが気に入りましたか?

  • What methods are used?
    どのような方法が使用されていますか?

  • What fonts and colors are used?
    どのフォントや色が使用されていますか?

  • How is the grid and typography built?
    グリッドやタイポグラフィはどのように構築されていますか?

私も色々勉強中なので、皆さまのご意見・ご感想をお聞かせください。
お読み頂きまして、ありがとうございました。

メルボルンを拠点にプロダクトデザイナーとして働いています。 主にデジタル・プロダクトの制作に携わっています。

[参考資料]


いいなと思ったら応援しよう!