UI/UX、グラフィック、サービスデザインに使えるフレームワーク。美しく使いやすいものを作るための手法を集めました。
実装とデザインの差異を体系的に検出・修正するプロセス
メインカラー60%・サブカラー30%・アクセントカラー10%の比率で配色の調和を生むデザイン法則。UIやプレゼン資料の色選びに迷わなくなる実践的な配色設計の手順を解説。
近接・整列・反復・対比の4デザイン基本
Webページ閲覧時に視線が上部を水平に走り、下へ移動して再び水平に走るF字型パターンの法則。アイトラッキング研究に基づくレイアウト最適化と情報配置の優先順位設計を解説。
有用・使いやすい・望ましい・見つけやすい・アクセシブル・信頼・価値の7要素でUX品質を総合評価するフレームワーク。プロダクトの強みと弱みを可視化し、改善の優先順位を決める手順を解説。
知覚・操作・理解・堅牢のアクセシビリティ
インターフェース設計の8つの黄金ルールで、使いやすいUIの基盤を作る
ユーザーの入力負荷を最小化し、完了率を最大化するフォーム設計の定石
頻出するUIの課題に対する定番の解決策パターン集
UIを原子→分子→有機体→テンプレート→ページの5階層で設計する手法
UIアニメーションに意味と一貫性を持たせ、ユーザー体験を向上させるための設計原則
色・サイズ・余白などのデザインの基本値を一元管理し、デザインと実装の一貫性を保つ仕組み
UIコンポーネント・ルール・ガイドラインを体系化し、一貫したプロダクトを効率的に作る仕組み
トグル切替やいいねボタンなど、小さな操作に対する細やかなフィードバック設計
画面のレイアウトと情報構造を線画で設計する手法
情報を整理・分類・構造化してユーザーが目的の情報にたどり着ける設計手法
「発散→収束」を2回繰り返し、正しい課題を見つけてから正しい解決策を導くデザインプロセス
定量指標で自社と競合のUXを比較評価
ユーザー調査の効率化・標準化・民主化を実現する運用基盤
組織がUXにどれだけ体系的に取り組めているかを5段階で診断し、次に目指すべきレベルを明確にするフレームワーク。UXリサーチ・デザインプロセス・組織文化の3軸で成熟度を評価する方法を解説。
既存のUXを全タッチポイントで体系的に評価し改善点を可視化する手法
ユーザーに操作中の思考を声に出してもらい、UIの問題点を発見する評価手法
ユーザー体験の質を定量的に測定・追跡するための指標体系
ユーザーにカードを分類させて情報の最適な整理方法を発見する手法
実際のユーザーに操作してもらい、使いやすさの問題を発見する手法
ニールセンの10原則に基づいてUIの使いやすさを専門家が評価する手法
ターゲットユーザーを具体的な人物像として定義し、チーム全体の判断軸にする手法
競合サービスのUXを体系的に分析し、自社プロダクトの改善ポイントを見つける手法
組織のa11y対応を段階的に向上
フロント/バックステージ可視化の高度な手法
本能・行動・内省の3レベルで感情に響く設計
iOS・Android・Webをまたいで一貫した体験を提供するデザイン戦略
行動科学の知見をプロダクトデザインに組み込み、望ましい行動を自然に促す設計手法
UIに表示されるテキストをユーザー視点で設計し、使いやすさと体験を向上させるライティング技法
顧客体験とバックステージの業務プロセスを一枚の図で可視化する手法
ユーザーを意図的に騙したり誘導したりする悪質なUI設計パターンとその見分け方
ユーザーが目的を達成するまでの操作手順を可視化し、最適な導線を設計する手法
ユーザーの体験全体を時系列で可視化し、感情の起伏や改善ポイントを発見する手法
情報や機能を一度に見せず、必要なタイミングで段階的に開示するUI設計手法
ブランドの言葉遣いを場面別に定義し、一貫したコミュニケーションを実現するガイド
IDEOが体系化した「Human-Centered Design」— 人間のニーズを起点にイノベーションを生む3フェーズのデザインプロセス
Samsungが実践する「デザイン主導イノベーション」— デザインを経営の中核に据え、技術ではなくユーザー体験から製品を構想するイノベーション戦略
ダッシュボード等にデザイン思考を適用
複雑な社会システム全体を対象とした包括的デザイン
4日間に短縮された改良版デザインスプリント
チーム共有のデザイン原則を策定・運用
UI/UXの一貫性崩壊を可視化し計画的返済
8分間で8つのアイデアをスケッチし、短時間で発想を広げるデザインエクササイズ
デザインの色・タイポグラフィ・コンポーネントなどのルールを文書化し、一貫性を保つ指針
デザインチームの生産性と品質を最大化するための運用・仕組みづくりの考え方
デザインの意図と目的に基づいて建設的なフィードバックを行うレビュー手法
デザイナーからエンジニアへ、実装に必要な情報を正確かつ効率的に受け渡すプロセス
チームで共感・定義・発想・試作・検証のプロセスを体験し、ユーザー中心の解決策を生み出すワークショップ手法
ユーザーの利益と尊厳を守りながら、ビジネス目標を達成するための倫理的デザインフレームワーク
参加者がドットシールで投票し、チームの優先順位を素早く合意形成する手法
動くモックアップを早期に作り、アイデアを検証する手法
障害の有無に関わらず誰もが使えるプロダクトを設計するアプローチ
ユーザーに「どう操作すればいいか」を見た目で直感的に伝えるデザイン原則
多様なユーザーの能力・状況・背景を考慮し、できるだけ多くの人が使えるデザインを目指すアプローチ
選択肢の数が増えるほど意思決定に時間がかかるというUXデザインの基本法則
ターゲットまでの距離と大きさからUI操作の難易度を予測する法則
人間が一度に記憶できる情報のかたまりは7±2個という認知心理学の法則
前景と背景の関係を操り、ユーザーの注目を意図的に誘導するデザイン原則
画面をグリッド（格子）で分割し、要素を規則的に配置するレイアウト手法
人間の知覚パターンに基づいてUIの視覚的まとまりを設計する法則
文字の選び方・組み方で読みやすさと印象をコントロールする技術
あらゆる画面サイズで最適な表示を実現するデザインアプローチ
1:1.618の比率を使って美しく安定感のあるデザインを作る原則
色の関係性と心理効果を理解して効果的な配色を行う理論
フレームワーク活用ガイド