#510
UX基礎・原則
#510いっかんせい
一貫性(UIの一貫性)
別名・表記:ConsistencyUI一貫性内部一貫性外部一貫性
UIXHERO Definition
UIXHEROでは、UIの一貫性を「同じ意味のものは同じ見た目と振る舞いで、違う意味のものは違う見た目で示す状態」と定義する。
概要
一貫性は大きく2つに分けて考えると扱いやすい。
- 内部一貫性: 同じプロダクトの中で揃っていること。ボタンの形、余白、用語、エラーの出し方など。
- 外部一貫性: プロダクトの外、つまり世の中の慣習と揃っていること。カートのアイコン、右上のアカウントメニュー、戻るジェスチャーなど。ヤコブの法則が扱う領域にあたる。
ニールセンのユーザビリティ10ヒューリスティクスでは「Consistency and standards(一貫性と標準)」として、内部の一貫性と業界標準への準拠が同じ原則の中でまとめられている。
UXでの活用
- 学習コストの削減: 一度覚えた操作が他画面でも通用すれば、ユーザーは推測で操作できる。
- 実装コストの削減: 一貫性を担保する仕組み(デザインシステム、コンポーネント)は、そのまま開発の再利用性につながる。
- 信頼感: 表記や表示形式のばらつきは、細部の粗さとして受け取られやすい。
誤用・混乱
- 一貫性のための一貫性: 「全部同じにする」は、重要度の差を潰してしまう。強調すべきものが強調されなくなるなら、それは一貫性の失敗である。
- 見た目だけ揃える: 見た目が同じで挙動が違う要素は、一貫していない状態より危険な場合がある。
- 一貫性 vs 改善: 既存の一貫性を守ることが、明確に悪いパターンの温存になることもある。その場合は移行計画を含めて変更するほうがよい。「一貫性」は変更しない理由の万能札ではない。
💡 使いどころ
画面数が増えて表記や部品がばらつき始めた時、複数チームで同じプロダクトを作っている時、デザインシステムの必要性を判断する時。
⚠️ 注意点・誤用
一貫性は目的ではなく手段である。学習コストを下げるために揃えるのであって、揃えること自体が正しいわけではない。挙動が異なるものを見た目だけ揃えると、かえって誤操作を招く(誤った一貫性)。
具体例
- 破壊的操作のボタンは全画面で同じ色・同じ位置に置く
- 「削除」「消去」「取り消し」の使い分けを決め、表記を統一する
- 日付の表記形式をプロダクト全体で1つに揃える
出典・参考文献:
- 10 Usability Heuristics for User Interface Design(第4原則 Consistency and standards)Jakob Nielsen
- About Face (Alan Cooper)
関連する解説記事
UIデザイン
一貫性と標準の違いとは?UIデザインにおける2つの「揃える」を区別する
UIXHERO POINT
- •UIXHEROでは、一貫性を「プロダクト内で揃えること」、標準を「業界やプラットフォームの慣習に従うこと」と定義し区別する。
- •一貫性は「内部の統一」、標準は「外部との整合」。両方を守ることで、学習コストを最小化できる。
視覚デザイン
反復・一貫性 (Visual Consistency)
画面ごとにボタンの色や位置が違うUIは、ユーザーに毎回「これは何のボタンか」を学習させる。同じ機能には同じ見た目を繰り返し適用し、ユーザーの予測を裏切らない一貫性の設計原則。
視覚デザイン
コンポーネントの視覚一貫性 (Component Consistency)
同じ役割を持つUIコンポーネントが、画面をまたいで異なる見た目・振る舞いをしていると、ユーザーは毎回「これは何だ?」と学習し直す羽目になる。コンポーネント単位で視覚的一貫性を担保するための原則です。