フレームワーク活用ガイド130件のフレームワーク
UXベンチマーキング
定量指標で自社と競合のUXを比較評価
UXリサーチOps
ユーザー調査の効率化・標準化・民主化を実現する運用基盤
UX成熟度モデル
組織がUXにどれだけ体系的に取り組めているかを5段階で診断し、次に目指すべきレベルを明確にするフレームワーク。UXリサーチ・デザインプロセス・組織文化の3軸で成熟度を評価する方法を解説。
アクセシビリティ成熟度モデル
組織のa11y対応を段階的に向上
サービスデザイン・ブループリント拡張
フロント/バックステージ可視化の高度な手法
エモーショナルデザイン
本能・行動・内省の3レベルで感情に響く設計
データのためのデザイン思考
ダッシュボード等にデザイン思考を適用
システミックデザイン
複雑な社会システム全体を対象とした包括的デザイン
デザインQA
実装とデザインの差異を体系的に検出・修正するプロセス
デザインスプリント2.0
4日間に短縮された改良版デザインスプリント
デザイン原則キャンバス
チーム共有のデザイン原則を策定・運用
デザイン負債
UI/UXの一貫性崩壊を可視化し計画的返済
60-30-10カラールール
メインカラー60%・サブカラー30%・アクセントカラー10%の比率で配色の調和を生むデザイン法則。UIやプレゼン資料の色選びに迷わなくなる実践的な配色設計の手順を解説。
CRAP原則
近接・整列・反復・対比の4デザイン基本
F型パターン
Webページ閲覧時に視線が上部を水平に走り、下へ移動して再び水平に走るF字型パターンの法則。アイトラッキング研究に基づくレイアウト最適化と情報配置の優先順位設計を解説。
Human-Centered Design
IDEOが体系化した「Human-Centered Design」— 人間のニーズを起点にイノベーションを生む3フェーズのデザインプロセス
JTBD × UXデザイン
ユーザーの用事からUI/UXを設計する
UXハニカム
有用・使いやすい・望ましい・見つけやすい・アクセシブル・信頼・価値の7要素でUX品質を総合評価するフレームワーク。プロダクトの強みと弱みを可視化し、改善の優先順位を決める手順を解説。
UX戦略ブループリント
ビジネス目標とUXビジョンを統合した戦略計画書
WCAGの4原則
知覚・操作・理解・堅牢のアクセシビリティ
Z型パターン
LP等で視線がZ字に動くレイアウト法則
アイコンデザインの原則
認識性・一貫性・簡潔さを満たすアイコン設計
アクセシビリティ・デザイン実践
WCAG基準に基づくインクルーシブなデザインの実装手法
ダークパターン監査
欺瞞的UIパターンを体系的に検出・排除
ニールセンのユーザビリティ10原則
10のヒューリスティック評価基準でUI品質を診断
インクルーシブデザイン原則
デザインが生む排除を認識し、多様性から学び、一人のために解決することで万人が使える設計を目指すフレームワーク。ペルソナスペクトラムやカーブカット効果を活用した実践手順を解説。
ウェイファインディング
ユーザーが現在地を把握し、迷わず目的地に到達できるナビゲーションを設計するフレームワーク。ランドマーク・パンくずリスト・段階的開示を活用したUI誘導設計の手順を解説。
エモーショナル・デザイン実践
ノーマンの3層モデルに基づく感情に訴えるデザイン手法
エモーショナルデザイン3層
本能・行動・内省の3層で感動を設計する
エクスペリエンス監査
既存のUXを全タッチポイントで体系的に評価し改善点を可視化する手法
データインク比（タフテ）
不要な装飾を削りデータの比率を最大化
オッカムの剃刀（デザイン）
同じ目的を達成できるなら最もシンプルな解決策を選ぶオッカムの剃刀をUI設計に応用するフレームワーク。認知負荷を減らし、ヒックの法則やKISS原則と組み合わせたUI簡素化の手順を解説。
モーションデザインの原則
アニメーションで意味と快適さを伝える原則
オンボーディングUXパターン
新規ユーザーの初回体験を最適化するUIパターン集
クロスプラットフォーム・デザイン
iOS・Android・Webをまたいで一貫した体験を提供するデザイン戦略
ゲリラユーザビリティテスト
短時間・低コストで素早くユーザー評価
コンテクスチュアル・インクワイアリー
ユーザーの実際の環境で観察・質問し深い洞察を得る
コンテンツファーストデザイン
ダミーテキストではなく実際のコンテンツを先に確定させてからレイアウトを設計するアプローチ。コンテンツインベントリの作成からレスポンシブ対応まで、情報設計の手順を具体例付きで解説。
シュナイダーマンの8原則
インターフェース設計の8つの黄金ルールで、使いやすいUIの基盤を作る
シンクアラウドプロトコル
ユーザーに操作中の思考を声に出してもらい、UIの問題点を発見する評価手法
ダイアリースタディ
利用者に日記を書いてもらい長期体験を調査
ツリーテスト
情報構造の分かりやすさを検証する調査
ディーター・ラムスのグッドデザイン10原則
革新的・有用・誠実など優れたデザインの10条件
デザイン・ノーススター
3〜5年後の理想のユーザー体験を具体化し、チーム全体の意思決定の基準となるデザインビジョンを策定するフレームワーク。ビジョンプロトタイプの作成からギャップ分析までの手順を解説。
デザインクリティーク手法
主観を排して建設的にデザインレビュー
デザイン主導イノベーション
Samsungが実践する「デザイン主導イノベーション」— デザインを経営の中核に据え、技術ではなくユーザー体験から製品を構想するイノベーション戦略
デザイン成熟度アセスメント
組織のデザイン力を多軸評価し向上計画を立てる
パレートの法則（UX）
20%の機能が80%の利用を占めるUI原則
ビヘイビアル・デザイン
行動科学の知見をプロダクトデザインに組み込み、望ましい行動を自然に促す設計手法
フォームデザインパターン
ユーザーの入力負荷を最小化し、完了率を最大化するフォーム設計の定石
ブランドアーキタイプ（デザイン）
12の原型でブランドの性格を定義する手法
プログレッシブ・エンハンスメントUX
基本機能から段階的に体験を向上させる設計戦略
ボイス＆トーン・フレームワーク
ブランドの言葉遣いを場面別に定義し、一貫したコミュニケーションを実現するガイド
ホワイトスペース（余白）の設計
余白を意図的に使い視認性と品格を高める
マイクロインタラクション（詳細）
ボタンのフィードバックや状態遷移など小さな操作応答を設計してUXを向上させるフレームワーク。イージング関数やスケルトンスクリーンなど5つの実装パターンを具体例付きで解説。
マイクロインタラクション設計
トリガー→ルール→フィードバック→ループで細部設計
マテリアルデザイン
Google提唱の物理法則に基づくデジタルUIデザインシステム
マテリアルデザインの原則
物理法則に基づいたGoogleのUI設計思想と応用
ミラーのマジカルナンバー
短期記憶の容量7±2をUIに活かす法則
モジュラーデザイン
独立した部品の組み合わせで柔軟なUIを構築
ヤコブの法則
ユーザーは他サイトの慣習を期待する法則
黄金比デザイン
1:1.618の比率で視覚的に調和のとれたレイアウト
行動変容デザイン
心理学と行動科学でユーザーの習慣を変える設計
三分割法（デザイン）
画面を9分割して視覚的バランスを整える
参加型デザイン
ユーザーをデザインの共同創造者として巻き込む
書体選定の基本
目的と文脈に合った書体を選ぶ判断基準
色のコントラストとアクセシビリティ
読みやすさを確保するコントラスト比の基準
色彩調和の原理
配色の調和パターンで統一感を生む手法
色彩理論とUI設計
色相環・補色・トライアドでUIの配色を体系的に決定
信頼のデザイン
ユーザーの信頼を獲得・維持するUI/UXパターン
図と地の関係（デザイン）
前景と背景の関係を操り、ユーザーの注目を意図的に誘導するデザイン原則
説得的デザインパターン
ユーザーの行動変容を促すUI設計パターン体系
認知的ウォークスルー
ユーザーの思考プロセスをシミュレートし使いやすさ評価
美的ユーザビリティ効果
美しいデザインは使いやすいと感じる効果
UIパターン
頻出するUIの課題に対する定番の解決策パターン集
UXメトリクス
ユーザー体験の質を定量的に測定・追跡するための指標体系
UXライティング
UIに表示されるテキストをユーザー視点で設計し、使いやすさと体験を向上させるライティング技法
カードソーティング
ユーザーにカードを分類させて情報の最適な整理方法を発見する手法
アクセシビリティデザイン
障害の有無に関わらず誰もが使えるプロダクトを設計するアプローチ
サービスブループリント
顧客体験とバックステージの業務プロセスを一枚の図で可視化する手法
ダークパターン
ユーザーを意図的に騙したり誘導したりする悪質なUI設計パターンとその見分け方
アトミックデザイン
UIを原子→分子→有機体→テンプレート→ページの5階層で設計する手法
アフォーダンス
ユーザーに「どう操作すればいいか」を見た目で直感的に伝えるデザイン原則
インクルーシブデザイン
多様なユーザーの能力・状況・背景を考慮し、できるだけ多くの人が使えるデザインを目指すアプローチ
インタラクションデザイン
ユーザーとプロダクトの対話を設計し、意図通りの操作体験を実現するデザイン手法
ユーザーフロー設計
ユーザーが目的を達成するまでの操作手順を可視化し、最適な導線を設計する手法
ユーザーリサーチ手法
ユーザーの行動・ニーズ・課題を体系的に調査し、デザイン判断の根拠を得るためのリサーチ手法群
ユーザビリティテスト
実際のユーザーに操作してもらい、使いやすさの問題を発見する手法
エクスペリエンスマッピング
ユーザーの体験全体を時系列で可視化し、課題と機会を発見するためのマッピング手法
ゲーミフィケーションデザイン
ゲームの要素やメカニクスを非ゲーム領域に適用し、ユーザーのエンゲージメントを高める設計手法
モーションデザイン原則
UIアニメーションに意味と一貫性を持たせ、ユーザー体験を向上させるための設計原則
グリッドシステム
画面をグリッド（格子）で分割し、要素を規則的に配置するレイアウト手法
クレイジーエイト
8分間で8つのアイデアをスケッチし、短時間で発想を広げるデザインエクササイズ
ゲシュタルト原則
人間の知覚パターンに基づいてUIの視覚的まとまりを設計する法則
コンテンツストラテジー
ユーザーに適切なコンテンツを適切なタイミングで届けるための戦略的な計画・設計手法
ジャーニーマッピング
ユーザーの体験全体を時系列で可視化し、感情の起伏や改善ポイントを発見する手法
システムズデザイン
複雑な問題をシステム全体の視点で捉え、要素間の相互作用を考慮して設計する統合的アプローチ
スタイルガイド
デザインの色・タイポグラフィ・コンポーネントなどのルールを文書化し、一貫性を保つ指針
タイポグラフィの基本
文字の選び方・組み方で読みやすさと印象をコントロールする技術
ダブルダイヤモンド
「発散→収束」を2回繰り返し、正しい課題を見つけてから正しい解決策を導くデザインプロセス
デザイントークン
色・サイズ・余白などのデザインの基本値を一元管理し、デザインと実装の一貫性を保つ仕組み
デザインオプス
デザインチームの生産性と品質を最大化するための運用・仕組みづくりの考え方
デザインクリティーク
デザインの意図と目的に基づいて建設的なフィードバックを行うレビュー手法
デザインシステム
UIコンポーネント・ルール・ガイドラインを体系化し、一貫したプロダクトを効率的に作る仕組み
デザインパターンライブラリ
繰り返し使うUI/UXパターンを収集・分類・管理し、チーム全体のデザイン品質と速度を向上させる仕組み
デザインハンドオフ
デザイナーからエンジニアへ、実装に必要な情報を正確かつ効率的に受け渡すプロセス
デザインファシリテーション
多様なメンバーの知見を引き出し、合意形成を経て質の高いデザイン判断を導くファシリテーション技法
デザインリサーチ
ユーザーの行動・ニーズ・課題を体系的に調査し、デザインの意思決定を根拠づける手法
デザイン言語
ブランドの視覚的・体験的な一貫性を保つために定義するデザインの共通語彙とルール体系
デザイン思考ワークショップ
チームで共感・定義・発想・試作・検証のプロセスを体験し、ユーザー中心の解決策を生み出すワークショップ手法
デザイン倫理
ユーザーの利益と尊厳を守りながら、ビジネス目標を達成するための倫理的デザインフレームワーク
ドット投票法
参加者がドットシールで投票し、チームの優先順位を素早く合意形成する手法
ヒューリスティック評価
ニールセンの10原則に基づいてUIの使いやすさを専門家が評価する手法
ビジュアルヒエラルキー
視覚的な優先順位を設計し、ユーザーの目線を意図した順序で導くデザイン手法
ヒックの法則
選択肢の数が増えるほど意思決定に時間がかかるというUXデザインの基本法則
フィッツの法則
ターゲットまでの距離と大きさからUI操作の難易度を予測する法則
プログレッシブディスクロージャー
情報や機能を一度に見せず、必要なタイミングで段階的に開示するUI設計手法
プロトタイピング手法
動くモックアップを早期に作り、アイデアを検証する手法
ペルソナ設計
ターゲットユーザーを具体的な人物像として定義し、チーム全体の判断軸にする手法
マイクロインタラクション
トグル切替やいいねボタンなど、小さな操作に対する細やかなフィードバック設計
ミラーの法則（7±2）
人間が一度に記憶できる情報のかたまりは7±2個という認知心理学の法則
モバイルファースト
モバイル端末を最優先にUIを設計し、段階的に大画面に拡張するデザインアプローチ
レスポンシブデザイン
あらゆる画面サイズで最適な表示を実現するデザインアプローチ
ワイヤーフレーミング
画面のレイアウトと情報構造を線画で設計する手法
黄金比
1:1.618の比率を使って美しく安定感のあるデザインを作る原則
音声UIデザイン
音声による対話インターフェースを設計し、自然で使いやすいボイス体験を構築する手法
競合UX分析
競合サービスのUXを体系的に分析し、自社プロダクトの改善ポイントを見つける手法
情報アーキテクチャ
情報を整理・分類・構造化してユーザーが目的の情報にたどり着ける設計手法
色彩理論
色の関係性と心理効果を理解して効果的な配色を行う理論
認知負荷デザイン
ユーザーの脳にかかる負担を最小化し、迷わず使えるインターフェースを設計する手法