- UIデザインとは
- UIデザインとUXデザイン、インタラクションデザイン(IxD)の関係
[[UXは体験全体、UIはその接点、IxDはその振る舞い]]
- なぜUIデザイン原則が重要か
[[設計判断の拠り所となる]][[一貫性と予測可能性を生み出す]][[認知負荷を軽減し、学習しやすくする]][[主観的な「好み」を超えた客観的な評価基準を提供する]]
- UIデザイン原則の基礎となる考え方
[[ゲシュタルト心理学とUIデザイン]][[認知心理学とUIデザイン]]
[[近接の定義 (関連する要素は物理的に近づけて配置する)]][[ゲシュタルトの近接の要因]][[近接による情報のグループ化と構造化]][[良い例 vs. 悪い例 (フォームのラベルと入力欄など)]][[実践のヒント (グループ間のマージンをグループ内のマージンより大きく取る)]]
[[整列の定義 (ページ上の要素を意図的に見えない線に沿って配置する)]][[整列がもたらす効果 (秩序、洗練された印象、視線の誘導)]][[左揃え、中央揃え、右揃え、両端揃えの使い分け]][[グリッドシステムと整列]][[良い例 vs. 悪い例 (要素がバラバラに配置されたデザイン)]]
[[反復の定義 (デザイン要素 (色、形、フォントなど) を一貫して繰り返し使用する)]][[反復がもたらす効果 (一貫性、統一感、学習しやすさ)]][[ブランドアイデンティティの強化]][[デザインシステムにおける反復の役割]][[良い例 vs. 悪い例 (ページごとにスタイルが異なるデザイン)]]
[[対比の定義 (2つの要素を大きく異ならせることで、特定の要素を強調する)]][[対比の要素 (サイズ, 色, 太さ, 形, 方向など)]][[対比がもたらす効果 (視覚的階層の生成、注目点の誘導、可読性の向上)]][[良い例 vs. 悪い例 (曖昧でメリハリのないデザイン)]][[アクセシビリティにおける色のコントラスト]]
[[ホワイトスペース (ネガティブスペース) の定義と重要性]][[ホワイトスペースがもたらす効果 (可読性向上、高級感の演出、情報のグループ化、焦点の明確化)]][[マクロスペースとマイクロスペース]][[ホワイトスペースの適切な使い方]]
[[視覚的階層の定義 (情報の重要度に応じて視覚的な重み付けを行う)]][[階層を生み出す要素 (サイズ, 色, 配置, 太さ, スペース)]][[FパターンとZパターンの視線誘導]][[効果的な階層設計]]
[[レイアウトの目的 (情報の構造化と視覚的安定性)]]- グリッドシステムの定義と利点 (一貫性、効率性、コラボレーション)
- グリッドシステムの種類
[[カラムグリッド (Column Grid)]] (Webデザインで一般的)[[モジュラーグリッド (Modular Grid)]][[階層グリッド (Hierarchical Grid)]]
[[ガター (Gutter - カラム間の余白)]][[レスポンシブデザインとグリッドシステム]][[8の倍数グリッド (8-Point Grid System)]]
[[タイポグラフィの重要性 (可読性、伝達性、ブランドイメージ)]]- 書体の基本
- タイポグラフィの主要な要素
[[フォントサイズ (Font Size)]][[フォントウェイト (Font Weight)]] (太さ)[[行長 (Line Length)]] (1行あたりの文字数)[[行間 (Line Height / Leading)]][[文字間 (Tracking / Letter-spacing)]][[カーニング (Kerning)]][[タイポグラフィの階層 (見出し, 本文, キャプション)]][[テキストの整列 (左揃え, 中央揃え, 右揃え)]]
[[フォントペアリングのテクニック]][[Webフォントとシステムフォント]][[タイポグラフィとアクセシビリティ]]
[[色彩の役割 (情報の伝達, 感情の喚起, ブランド表現, 階層の強調)]]- 色の三属性
[[色相 (Hue)]][[彩度 (Saturation / Chroma)]][[明度 (Brightness / Value)]]
- カラーホイールと配色技法
[[補色配色 (Complementary)]][[類似色配色 (Analogous)]][[トライアド配色 (Triadic)]][[分割補色配色 (Split-Complementary)]][[テトラード配色 (Tetradic)]][[モノクロマティック配色 (Monochromatic)]]
- UIデザインにおける色の使い方
[[60-30-10ルール]] (ベースカラー, メインカラー, アクセントカラー)[[色の心理的効果と文化的な意味]][[状態を示す色 (エラー:赤, 成功:緑, 警告:黄)]]
- 色のアクセシビリティ (Color Accessibility) MOC
[[コントラスト比の確保 (WCAG基準)]][[色覚多様性への配慮]][[色だけで情報を伝えない]]
- カラーパレット作成ツール
- アイコンデザインの原則
[[明瞭性 (Clarity)]][[一貫性 (Consistency)]][[認識しやすさ (Recognizability)]][[適切なメタファーの使用]][[アウトライン vs. フィルド]]
- 画像とイラストレーションの役割
[[ユーザーの感情に訴えかける]][[コンセプトの伝達]][[ブランドイメージの構築]][[画像の品質と最適化]]
[[ボタン (Buttons)]] (プライマリ, セカンダリ, ターシャリ、状態: hover, active, disabled)[[フォーム要素 (Form Elements)]] (入力フィールド, ラベル, チェックボックス, ラジオボタン)[[カード (Cards)]][[ナビゲーション要素 (Navigation Elements)]] (タブ, メニュー, パンくず)[[モーダルとダイアログ (Modals and Dialogs)]][[テーブル (Tables)]][[ツールチップ (Tooltips) とポップオーバー (Popovers)]]
- UIデザインのワークフロー
[[ムードボードの作成]][[スケッチとワイヤーフレーム]] (再掲・UI視点)[[モックアップの作成]] (再掲・UI視点)[[プロトタイピング]] (再掲・UI視点)[[デザインレビューとフィードバック]][[開発者へのハンドオフ]]
- デザインシステム (Design Systems) とスタイルガイド (Style Guides) MOC
[[デザインシステムの定義と目的 (一貫性、効率性、スケーラビリティ)]][[デザインシステムの構成要素 (デザイントークン, UIコンポーネント, パターン, ガイドライン)]][[スタイルガイドの役割]][[主要な公開デザインシステム (Material Design, Human Interface Guidelines, Atlassian Design Systemなど)]]
- レスポンシブUIデザイン MOC (再掲・UI原則視点)
[[モバイルファーストアプローチ]][[ブレークポイントとレイアウト変更]][[タッチターゲットのサイズ]]
- アクセシビリティ (a11y) とUIデザイン MOC (再掲・UI原則視点)
[[十分なコントラスト比]][[キーボードナビゲーションの考慮]][[フォーカス状態の明確化]][[スクリーンリーダーへの対応 (セマンティックな構造)]]
- UIデザインの評価
[[ヒューリスティック評価]][[ユーザビリティテストにおける視覚的フィードバックの収集]][[5秒テスト]][[A/BテストによるUI改善]]
- プラットフォームごとのデザインガイドラインの遵守
[[Apple Human Interface Guidelines (HIG)]][[Google Material Design]]
- デザインツール
[[Figma]] (主流)[[Sketch]] (macOS専用)[[Adobe XD]]
- プロトタイピングツール (Figma, Principle, ProtoPieなど) (再掲)
- ハンドオフツール (Zeplin, Avocode, Figmaの機能)
- デザインリソースサイト (Dribbble, Behance, Mobbin, UI-Patterns.com)
- アイコンリソース (Font Awesome, Material Icons, Feather Icons)
- ストックフォトサイト (Unsplash, Pexels)
- フォントリソース (Google Fonts, Adobe Fonts)
[[一貫性のないデザイン]][[コントラスト不足]][[情報過多 / 雑然としたレイアウト]][[不明瞭な視覚的階層]][[ユーザーのメンタルモデルを無視したデザイン]][[クリックできる要素が分かりにくい]][[標準的なUIパターンからの不必要な逸脱]][[美しさを優先しすぎたユーザビリティの低下]][[テキストが読みにくい]][[レスポンシブ対応の不備]]