Awesome Product Design
Product Designを扱う資料や関連プロジェクトをまとめたAwesomeリストです。
目次
リサーチ
手法
意思決定
- Untools - 問題解決、意思決定、システム理解を支援する思考ツールとフレームワーク。
リサーチ計画
- Smashing Magazine - ステークホルダーに支持されるUXリサーチ計画。
- NN Group - ユーザーリサーチのプロジェクト管理: 計画。
- Interaction Design - 1ページのユーザーリサーチ計画。
- Branding5 - デザインの基盤となるブランドポジショニングを作成する。
ユーザーインタビュー
- NN Group - 多くの弱点があるにもかかわらず、インタビューは探索的ユーザーリサーチにとって価値ある手法である。
- UXDesign.cc - ユーザーインタビューを最大限に活用する方法。
ステークホルダーインタビュー
- Boxes and Arrows - ステークホルダーインタビュー用チートシート。
- UX Apprentice - ステークホルダーインタビューのテンプレート。
- Interaction Design - UXステークホルダーインタビューの準備。
リサーチ統合
- UX Movement - ユーザーリサーチを利用可能なデータへ変える方法。
- SlideShare - デザインリサーチの統合。
- Medium - ユーザーリサーチ統合にTrelloを使う。
- Tuts+ - 親和図を準備・活用する方法。
- Medium - 親和図: ヒントとコツ。
競合分析
ジョブ・トゥ・ビー・ダン
ペルソナ
- Usability.Gov - ペルソナの目的は、主要な対象者を信頼できる現実的な形で表現すること。
- UX Mag - ペルソナ: 優れたユーザー体験の基盤。
- Tuts+ - UXデザインでペルソナを定義・適用する。
共感マップ
ストーリーボード
- UX Magazine - ソフトウェア設計プロセスにおけるストーリーボード。
- Medium - UXデザインにおけるストーリーボード。
- NN Group - カスタマージャーニーマップを作るタイミングと方法。
- UX Lady - エクスペリエンスマップ、ユーザージャーニーなど。
- Smashing Magazine - カスタマージャーニーマッピングに必要なすべて。
- Medium - エクスペリエンスマップの作り方。
記事
- Smashing Magazine - Rainbow Spreadsheet: 協働型リーンUXリサーチツール。
- Coglode - 一口サイズの行動リサーチ分析。
テスト
- User Testing - 顧客インサイトを引き出し、収益を伸ばす。
- Optimal Workshop - チームが自信を持ってデザインの意思決定を行うためのユーザーリサーチプラットフォーム。
- Measure Success - UXデザインの成功（または失敗）を測定する方法。
- Lookback - シンプルで強力なユーザーリサーチ。
- Full Story - 顧客体験について何を知りたいですか。
- Desinion - 自社またはクライアント企業のために、賢明で根拠あるデザイン判断を行う。
- Survey Monkey - 直感をインサイトへ変える。
- Etnio - ユーザーリサーチのために実在の人々を募集する。
UX
ガイドライン
- The UX Bookmark - 世界中の優れたUX Webサイトのコレクション。
- Gov.Uk - 政府チームが優れたデジタルサービスを作り運用するのを支援する。
- Methods 18F - 人間中心設計をプロジェクトへ取り入れるためのツール集。
- Guides 18F - チーム横断のベストプラクティスを収めた18Fのガイドリポジトリ。
- Usability.Gov - ユーザー体験を改善する。
- Medial Lab Amsterdam - デザイン手法ツールキット。
- Design Kit IDEO - 創造性を引き出すための段階的ガイド。
- Gamestorming - 世界のイノベーターが用いる共創ツール群。
記事
- UX Magazine - 体験デザインのあらゆる側面を扱う無料のコミュニティリソース。
- UX Booth - ユーザー体験コミュニティによる、同コミュニティのための出版物。
- UX Mastery - ユーザー体験の専門家が始め、上達するのを支援する。
- UX Myths - 誤った思い込みではなく、根拠に基づいてプロダクトを作る。
- A List Apart - Webコンテンツのデザイン、開発、意味を探究する。
- 52 Weeks of UX - 現実の人々のために設計するプロセスについての議論。
- UX Pin - UXデザインのあらゆる側面を扱うガイド、記事、電子書籍。
- The IxD Library - インタラクションデザインに関する資料のコレクション。
- LukeW - デジタルプロダクトデザインの重要な細部と全体像に関する出版物。
- NN Group - エビデンスに基づくユーザー体験のリサーチ、研修、コンサルティング。
- Information Design - 1997年から手選別されてきたInfoDesign。
- Intercom - デザイン、カスタマーサクセス、スタートアップのブログ。
- UXDesign.cc - ユーザー体験、ユーザビリティ、プロダクトデザインを扱う。UXDesign.ccをフォロー。
- UX Reactions - 楽しいコンテンツ。
ツール
- UX Recipe - 「UX」という語が物象化されることへの個人的なマニフェスト。
- UX Checklist - UXプロジェクトのチェックリスト。
- UX Stackexchange - UXに関する質問と回答のサイト。
UI
ガイドライン
- Ant Design - エンタープライズアプリケーション向けUIデザイン言語。
- iOS Guidelines - Appleプラットフォームとシームレスに統合する優れたアプリを設計するための詳細情報とUIリソース。
- Google Material - デジタル体験を作るための理論、リソース、ツールを統合したシステム。
- Google Design - Googleのデザイナー、ライター、開発者グループが主導する協働的な取り組み。
- Facebook Design - Facebookのデザイナーが作成した記事、動画、リソースのコレクション。
- UsTwo - Pixel Perfect Precision Handbook 3。
インスピレーション
- Pttrns - あらゆるデザインリソースの母体。
- Call To Idea - 想像力に火をつける。
- Android Niceties - Android UIの慣例について、インスピレーションと洞察を提供する。
- Lovely UI - モバイルUI要素のコレクション。
- Brian Lovin - 優れたプロダクトの視覚的な探究。
- Sloppy UI - 荒らしではなく、知的誠実さを重視する。
ツール
- Pattern Lab - Pattern Labでアトミックデザインシステムを作成する。
- Huge - スタイルガイドの作成・保守を容易にするツール。
- Figma Bootstrap 5 UI Kit - アトミックデザインシステムと自動レイアウトで構築された、整理済みのBootstrap 5コンポーネント300以上からなるUIキット。
- Sketch Bootstrap 5 UI Kit - アトミックデザインシステムとスマートレイアウトで構築された、整理済みのBootstrap 5コンポーネント300以上からなるUIキット。
ビジュアル
リソース
- Design Principles FTW - インターネット最大級のデザイン原則コレクション。
- Awesome Design Systems - デザインシステム、パターンライブラリ、その間にあるすべてを集めたキュレーションリスト。
- Awesome Sketch - デザイナー、開発者、その他の人々向けの、優れたSketch動画・記事・プラグインなどを集めたキュレーションリスト。
アイコン
- Icon Finder - 1,739,045個のアイコンを検索、または42,226のアイコンセットを閲覧する。
- We Love Icon Font - 無料・オープンソースのアイコンフォントホスティングサービス。
- The Noun Project - あらゆるもののためのアイコン。
- Iconmonstr - 263のコレクションにある3,847以上の無料シンプルアイコンを見つける。
フォントファウンドリー
- Open Foundry - ノイズのない環境でオープンソースフォントを扱う新しいプラットフォーム。
- Use & Modify - タイポグラフィとフリーカルチャーの愛好家が選んだ、自由またはオープンソースライセンスで配布される現代的なフォントセットを提供する。
- Font Fabric - 独立したタイプファウンドリー。
- Font Squirrel - 無料フォントのユートピア。
- Play Type - 100以上のフォントと約500種類のフォントウェイトを閲覧する。
タイポグラフィ
- NN Group - タイポグラフィ用語チートシート。
色
- Coolors - 超高速の配色ジェネレーター。
- Colour Lovers - クリエイティブコミュニティ。
- Color Hunt - 色を愛する人々のためのソーシャルプラットフォーム。
- Atmos - カラーパレット作成に必要なすべて。
- Branition Colors - ブランディングに最適なカラーパレットを手選別したコレクション。
ストック画像
- Unsplash - 無料（自由に利用可能）の高解像度写真。
- StockSnap - 毎週数百枚の高解像度画像を追加。
- Pixbay - どこでも使える無料の画像と動画。
- Jay Mantry - 無料の写真（CC0）。
- Get Refe - ロイヤリティフリーで高品質な実写写真。
- ISO Republic - クリエイティブプロフェッショナル向けの無料ストック写真を提供する。
- All The Free Stock - 無料のストック画像、動画、音楽、アイコンを一か所で入手する。
- Pexels - フィルター、自然、商用など多様なスタイルの無料ストック画像。
- unDraw - 想像・作成できるあらゆるプロジェクト向けのオープンソースイラスト。
ストック動画
- Vimeo - 個人・企業・商用で無料利用できるロイヤリティフリーのストック動画。
ツール
- Polarr - 写真エディター。
- Licecap - シンプルなアニメーション画面キャプチャ。
- Hand Brake - ほぼすべての形式の動画を、広くサポートされる現代的なコーデック群へ変換するツール。
プロトタイプ
記事
- The 12 Principles - アニメーションの12の基本原則は、ウォルト・ディズニー・スタジオの「オールドメン」により開発された。
- Hoverstat - 代替的なデジタルデザインの拠点。
- Microinteractions - 細部から設計する。
- Motion UI Design - Motion UIデザイン、アニメーション、トランジションに関するインスピレーション、ソフトウェア、ライブラリなどのリソース。
ソフトウェア
- Pop - 紙とペンのアイデアを、対話可能なiPhoneまたはAndroidプロトタイプへ変換する。
- Invision - 世界をリードするプロトタイピング、コラボレーション、ワークフロープラットフォーム。
- Marvel - シンプルなデザイン、プロトタイピング、コラボレーション。
- Flinto - モバイル、デスクトップ、Webアプリの対話型プロトタイプをデザイナーがすばやく作れるようにする。
- Origami Studio - アイデアを探索、反復、テストする。
- Framer - オールインワンのデザインワークフロー。
- Proto - アプリと同じ見た目・動作の、完全に対話可能な高忠実度プロトタイプを作成する。コーディング不要。
- ProtoPie - 高度で対話性の高いプロトタイプを構築する、最も簡単なプロトタイピングツール。
ツール
- Lottie - 高品質なアニメーションを任意のネイティブアプリへ容易に追加する。
- Keynotopia - KeynoteとPowerPointを、モバイル・Web・デスクトップUIモックアップ用の優れた高速プロトタイピングツールへ変える。
アクセシビリティ
記事
- Gov.Uk - サービスをアクセシブルにする: 入門。
- Smashing Magazine - 色コントラストと、見直すべき理由。
- Medium - デザイナーのためのアクセシビリティ。RGBに注意する。
- Web Credible - ビジュアルデザインと色のアクセシビリティ。
- A List Apart - 簡単な色コントラストテスト。
ツール
- WAVE - Webアクセシビリティ評価ツール。
- Contrast Ratio - 任意の有効なCSSカラー2色間のコントラスト比を計算するツール。
- Snook - 色コントラスト確認。
ライティング
- Google trends - 現在話題になっている記事。
- Google Ngram - Google Books Ngram Viewerに語句を入力すると、書籍コーパス内でその語句が出現した様子をグラフ表示する。
- Hemingway - 文章を力強く明瞭にするHemingway App。
- Readable - 読み手の注意を引く時間は7秒。Readable.ioはノイズを取り除くのを助ける。
- The Writer - あなたの文章はどれだけ読みやすいか。
- Taskade - 共同編集エディターおよびアウトライナー。
データ
- London Datastore - 無料でオープンなデータ共有ポータル。
- YouGov - 参加の力を信じる。
- Data.Gov - 政府部局・機関、公共団体、地方自治体が公開したデータを探す。
- The Tate Collection - 約70,000点の美術作品のメタデータを提供する。
- NASA - データ、コード、APIを自由にする。