#514
UX基礎・原則
#514でざいんがいどらいん
デザインガイドライン
別名・表記:Design Guidelineガイドラインデザイン指針
UIXHERO Definition
UIXHEROでは、デザインガイドラインを「特定の文脈で何をどうするかを、判断できる粒度まで具体化した推奨事項の集合」と定義する。
概要
設計の指針には抽象度の階層がある。
- 原則 / ヒューリスティック: 「ユーザーに現在の状態を知らせる」のような、広く適用できるが具体性の低い指針
- ガイドライン: 「処理に1秒以上かかる場合はローディング表示を出す」のような、判断できる粒度の推奨
- 標準 / 仕様: 「WCAG 2.2 AAのコントラスト比を満たす」のような、遵守を求められる基準
ガイドラインはこの中間層にあたる。原則だけでは実装者が迷い、標準だけでは判断が必要な領域をカバーできない。
UXでの活用
- 議論の削減: 一度合意した判断を書き残すことで、同じ論点を毎回議論しなくて済む。
- レビューの基準: 主観的な指摘を減らし、「ガイドラインのどれに反しているか」で会話できる。
- オンボーディング: 新しく入ったメンバーが、チームの判断基準を短時間で把握できる。
誤用・混乱
- ガイドライン＝標準ではない: プラットフォームのHIGやMaterial Designは推奨であって法的・技術的な強制力を持つ基準ではない。一方WCAGは、地域や契約によっては遵守が要求される。両者を同じ扱いにしない。
- 理由なしの規則化: 「なぜ」がないガイドラインは、例外を判断できず、状況が変わっても更新されない。
- 量が多いほど良い、ではない: 参照されないガイドラインは存在しないのと同じである。運用できる量に絞る。
💡 使いどころ
複数人・複数チームで同じ品質を出す必要がある時、あるいは同じ議論が繰り返されている時に、判断を明文化して再利用可能にする。
⚠️ 注意点・誤用
ガイドラインは絶対規則ではなく、前提となる文脈が変われば適用外になる。「なぜそうするか」を併記しないと、状況が変わっても機械的に適用され続け、かえって品質を下げる。
具体例
- 「タッチターゲットは最小44×44ptを確保する」
- 「エラーメッセージには原因と次の行動を必ず含める」
- 「破壊的操作には確認ステップを置く。ただし取り消しが可能な場合は不要」
出典・参考文献:
- Human Interface Guidelines (Apple)
- Material Design Guidelines (Google)
- WCAG 2.2 (W3C)
関連する解説記事
UXデザイン
ヒューリスティクスとガイドラインの違いとは？UI評価における正しい使い分け
UIXHERO POINT
- •UIXHEROでは、ヒューリスティクスを「経験則に基づく評価原則」、ガイドラインを「具体的な実装指針」と定義し区別する。
- •ヒューリスティクスは「なぜ」を問い、ガイドラインは「どう」を示す。評価にはヒューリスティクス、実装にはガイドラインを使う。
UX基礎・原則
ルール化して再利用する (Design System Thinking)
同じボタンが画面ごとに微妙に違う色・サイズ・角丸——「なんとなく作った」UIは、スケールするにつれて一貫性が崩れる。コンポーネントとトークンでルール化し、再利用可能な設計資産を作る原則。