認知に基づくデザイン -メンタルモデルと概念モデルについて-
⚠️ これは自分の考えを整理するために書いたものです。内容に誤りがある可能性があります。
はじめに
UI デザインにおいて、メンタルモデルと概念モデルという言葉をご存知でしょうか。
これらは、ユーザーがインターフェースを理解し、操作する際に重要な認知的枠組みを示す概念です。
メンタルモデルとは
メンタルモデルとは、ユーザーが過去の経験をもとに形成している「こう動くはず」という心の中の予測モデルのことです。
例えば、飲食店のタブレットオーダーシステムを初めて使うユーザーでも、特別な訓練なしに操作できるのはなぜでしょうか。
それは、ユーザーがこれまでの経験から「メニューを選び、注文を確定する」という一連の流れに対するメンタルモデルをすでに持っているからです。
概念モデルとは
一方、概念モデルとは、ユーザーが実際にインターフェースと接する中で構築していく理解のモデルです。
同じような飲食店の注文アプリでも、UI デザインや操作手順はそれぞれ異なります。
それでもユーザーは操作を通じて、インターフェースの仕組みや動作のパターンを学び、そのサービス特有の概念モデルを形成していきます。
つまり、
- メンタルモデルは「頭の中で想像する抽象的な理解」
- 概念モデルは「実際のインターフェースから学ぶ具体的な理解」
と捉えることができます。
メンタルモデルと概念モデルの一致
ユーザーが「直感的に使える」と感じる UI は、メンタルモデルと概念モデルが一致している状態です。
たとえば、非エンジニアが GitHub のディレクトリ構造を見たとき、使いづらく感じることがあるでしょう。
一方でエンジニアは、エディタなどを通じてディレクトリ構造の概念を理解しているため、初見でも自然に操作できます。
これは、エンジニアがすでに関連するメンタルモデルを持っているためです。
デザインシステムの役割
ここまでの内容を踏まえると、デザインシステムはユーザーの概念モデルを支え、メンタルモデルとのズレを最小限にするための仕組みであると言えます。
概念モデルを言い換えると、サービス内で「UI がどのような意味を持ち、どのように動作するか」というユーザーの予測モデルです。
デザインシステムは、その予測を裏切らないように一貫性を保つことで、ユーザーの理解と操作性を支えます。
- ボタンの状態変化（hover, active, disabled）を一貫させることで、「操作可能性」という概念を明示する。
- ナビゲーション構造を統一することで、「階層構造」や「移動の文脈」をユーザーに伝える。
このように、デザインシステムは UI の一貫性を保つことで、ユーザーが正確な概念モデルを形成できるよう支援し、結果として操作性や学習コストの低減につながります。
まとめ
デザインにおける理想的な状態とは、ユーザーのメンタルモデルと設計者の概念モデルが自然に重なることです。
デザインシステムやガイドラインは、その一致を実現するための重要な基盤となります。
一貫した UI ルールの設計は単なる見た目の統一ではなく、**ユーザーの認知の一貫性を支える「思考の設計」**でもあるのです。