1. UIデザイン原則入門 MOC
- UIデザインとは
- UI (User Interface) デザインの定義 (ユーザーが製品・サービスと対話するための接点の視覚的設計)
- UIデザインの目的 (美しさ、使いやすさ、ブランド表現、信頼性の向上)
- UIデザインとUXデザイン、インタラクションデザイン(IxD)の関係
UXは体験全体、UIはその接点、IxDはその振る舞い
- なぜUIデザイン原則が重要か
設計判断の拠り所となる一貫性と予測可能性を生み出す認知負荷を軽減し、学習しやすくする主観的な「好み」を超えた客観的な評価基準を提供する
- UIデザイン原則の基礎となる考え方
ゲシュタルト心理学とUIデザイン認知心理学とUIデザイン
2. 視覚デザインの基本原則 MOC
2.1. 近接 (Proximity) の原則 MOC
近接の定義 (関連する要素は物理的に近づけて配置する)ゲシュタルトの近接の要因近接による情報のグループ化と構造化良い例 vs. 悪い例 (フォームのラベルと入力欄など)実践のヒント (グループ間のマージンをグループ内のマージンより大きく取る)
2.2. 整列 (Alignment) の原則 MOC
整列の定義 (ページ上の要素を意図的に見えない線に沿って配置する)整列がもたらす効果 (秩序、洗練された印象、視線の誘導)左揃え、中央揃え、右揃え、両端揃えの使い分けグリッドシステムと整列良い例 vs. 悪い例 (要素がバラバラに配置されたデザイン)
2.3. 反復 (Repetition) の原則 MOC
反復の定義 (デザイン要素 (色、形、フォントなど) を一貫して繰り返し使用する)反復がもたらす効果 (一貫性、統一感、学習しやすさ)ブランドアイデンティティの強化デザインシステムにおける反復の役割良い例 vs. 悪い例 (ページごとにスタイルが異なるデザイン)
2.4. 対比 (Contrast) の原則 MOC
対比の定義 (2つの要素を大きく異ならせることで、特定の要素を強調する)対比の要素 (サイズ, 色, 太さ, 形, 方向など)対比がもたらす効果 (視覚的階層の生成、注目点の誘導、可読性の向上)良い例 vs. 悪い例 (曖昧でメリハリのないデザイン)アクセシビリティにおける色のコントラスト
2.5. スペース (Space / ホワイトスペース) の原則 MOC
ホワイトスペース (ネガティブスペース) の定義と重要性ホワイトスペースがもたらす効果 (可読性向上、高級感の演出、情報のグループ化、焦点の明確化)マクロスペースとマイクロスペースホワイトスペースの適切な使い方
2.6. 階層 (Hierarchy) の原則 MOC
視覚的階層の定義 (情報の重要度に応じて視覚的な重み付けを行う)階層を生み出す要素 (サイズ, 色, 配置, 太さ, スペース)FパターンとZパターンの視線誘導効果的な階層設計
2.7. バランス (Balance) の原則 MOC
視覚的バランスの定義 (デザイン要素の重みが均等に分散されている状態)- 対称的バランス (Symmetrical Balance) (安定感、フォーマル)
- 非対称的バランス (Asymmetrical Balance) (ダイナミズム、モダン)
(オプション) 放射状バランス (Radial Balance)
2.8. 統一感 (Unity) の原則 MOC
統一感の定義 (デザインの全ての要素が調和し、一つのまとまりとして機能すること)- 近接、整列、反復、連続性による統一感の創出
3. UIデザインの構成要素 MOC
3.1. レイアウトとグリッドシステム MOC
レイアウトの目的 (情報の構造化と視覚的安定性)- グリッドシステムの定義と利点 (一貫性、効率性、コラボレーション)
- グリッドシステムの種類
カラムグリッド (Column Grid) (Webデザインで一般的)モジュラーグリッド (Modular Grid)階層グリッド (Hierarchical Grid)
ガター (Gutter - カラム間の余白)レスポンシブデザインとグリッドシステム8の倍数グリッド (8-Point Grid System)
3.2. タイポグラフィ (Typography) MOC
タイポグラフィの重要性 (可読性、伝達性、ブランドイメージ)- 書体の基本
書体 (Typeface) vs. フォント (Font)- セリフ体 (Serif) vs. サンセリフ体 (Sans-serif)
スクリプト体、ディスプレイ書体
- タイポグラフィの主要な要素
フォントサイズ (Font Size)フォントウェイト (Font Weight) (太さ)行長 (Line Length) (1行あたりの文字数)行間 (Line Height / Leading)文字間 (Tracking / Letter-spacing)カーニング (Kerning)タイポグラフィの階層 (見出し, 本文, キャプション)テキストの整列 (左揃え, 中央揃え, 右揃え)
フォントペアリングのテクニックWebフォントとシステムフォントタイポグラフィとアクセシビリティ
3.3. 色彩理論 (Color Theory) MOC
色彩の役割 (情報の伝達, 感情の喚起, ブランド表現, 階層の強調)- 色の三属性
色相 (Hue)彩度 (Saturation / Chroma)明度 (Brightness / Value)
- カラーホイールと配色技法
補色配色 (Complementary)類似色配色 (Analogous)トライアド配色 (Triadic)分割補色配色 (Split-Complementary)テトラード配色 (Tetradic)モノクロマティック配色 (Monochromatic)
- UIデザインにおける色の使い方
60-30-10ルール (ベースカラー, メインカラー, アクセントカラー)色の心理的効果と文化的な意味状態を示す色 (エラー:赤, 成功:緑, 警告:黄)
- 色のアクセシビリティ (Color Accessibility) MOC
コントラスト比の確保 (WCAG基準)色覚多様性への配慮色だけで情報を伝えない
- カラーパレット作成ツール
3.4. アイコンと画像 (Iconography and Imagery) MOC
- アイコンデザインの原則
明瞭性 (Clarity)[[一貫性 (Consistency)]]認識しやすさ (Recognizability)適切なメタファーの使用アウトライン vs. フィルド
- 画像とイラストレーションの役割
ユーザーの感情に訴えかけるコンセプトの伝達ブランドイメージの構築画像の品質と最適化
3.5. UIコンポーネントのデザイン MOC (インタラクションデザインMOCと連携)
ボタン (Buttons) (プライマリ, セカンダリ, ターシャリ、状態: hover, active, disabled)フォーム要素 (Form Elements) (入力フィールド, ラベル, チェックボックス, ラジオボタン)カード (Cards)ナビゲーション要素 (Navigation Elements) (タブ, メニュー, パンくず)モーダルとダイアログ (Modals and Dialogs)テーブル (Tables)ツールチップ (Tooltips) とポップオーバー (Popovers)
4. UIデザインプロセスとベストプラクティス MOC
- 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
5. UIデザインのためのツールとリソース MOC
- デザインツール
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)
6. UIデザインのアンチパターン MOC
一貫性のないデザインコントラスト不足情報過多 / 雑然としたレイアウト不明瞭な視覚的階層ユーザーのメンタルモデルを無視したデザインクリックできる要素が分かりにくい標準的なUIパターンからの不必要な逸脱美しさを優先しすぎたユーザビリティの低下テキストが読みにくいレスポンシブ対応の不備