UIXHERO
#399
UX基礎・原則
#399

マッピング

マッピング

別名・表記:Mapping

UIXHERO Definition

コントロール(操作部)と、それによって動く対象との対応関係。自然なマッピングは、学習なしで直感的な操作を可能にする。

概要

ドナルド・ノーマンが提唱した概念。操作するためのパーツ(コントロール)と、それによって動く対象物との対応関係のこと。 「右のスイッチを押すと右の電気がつく」「ハンドルを右に回すと車が右に曲がる」といった自然で直感的な対応関係(ナチュラル・マッピング)がデザインされていれば、ユーザーは説明書なしで操作できる。逆にマッピングが悪いと、誤操作の原因になる。

UXでの活用

  • 物理的な配置の模倣: 4つのコンロのスイッチを一直線に並べるのではなく、コンロの配置と同じ四角形に並べることで、どのスイッチがどのコンロに対応するかを一瞬で理解させる。
  • スライダー操作: 音量を上げるときはバーを「上」か「右」に動かし、下げるときは「下」か「左」に動かす。これは物理世界のアナロジーに基づく。
  • ドラッグ&ドロップ: 画面上のファイルをゴミ箱アイコンの上に移動させて離す操作は、現実世界の「物を捨てに行く」行為をマッピングしたものであり、直感的である。

💡 使いどころ

UIのコントロール配置。スライダー、ボリューム操作、スクロールなどは、物理的な動きや画面上の方向と一致させる。

⚠️ 注意点・誤用

「上にスワイプすると下にスクロールする(ナチュラルスクロール)」のように、デジタル特有のマッピングもあるため、プラットフォームの慣習に従うことが重要。

具体例

  • コンロのスイッチの配置と、実際の火が出る場所の配置を一致させる
  • 音量を上げるときはバーを「右」または「上」に動かす
出典・参考文献:
  • Norman, D. A. (2013). The design of everyday things (Revised and expanded edition). Basic Books.
作成: 2026年1月26日
更新: 2026年2月14日

読んだ内容を、自分の画面に当てるとき

UIXHEROは、記事を書くほかに、画面の検品・判定、デザインシステムの構築、実装と改善の伴走を受けています。何を頼めばいいか決まっていない段階の相談も、同じ窓口で受けます。

UIXHEROに頼めることを見る

※ 記事の内容についての質問や、書いてほしいテーマの要望も同じ窓口で受けています

この記事をシェアする
シェア: