デザインの基本原則

UI/UXデザイナーのモリです。

今回はプロダクトのUI/UXをデザインする時に、僕が常に心がけている「3つの基本原理」を、普段愛用しているセブンカフェのコーヒーメーカーを例に紹介したいと思います。

※例に出しているコーヒーメーカーですが、実際はブランドや様々な体験を考慮して制作されたプロダクトです。今回はインターフェースのレイアウトやスタイルみにフォーカスした提案として参照していただければ幸いです。

３つの基本原則とは

僕がプロダクトのUI/UXを考慮するに当たって常に意識してる基本原則とは「シグニファイア・対応づけ・フィードバック」の3つです。

因みにこれは「誰のためのデザイン」という本に登場する「7つの基本原理」から、特に重要だと思うもの３つを抜粋しています。ご興味ある方はぜひ一度手にとってみてください。

それではそれぞれについて解説していきます。

シグニファイア

シグニファイアとは人が対象物とどうインタラクションするかを指し示す手がかりのことです。

ここでコーヒーメーカーで考えてみましょう。まずコーヒーメーカーの利用者のゴールはなんでしょう？利用者のゴールは目的のコーヒー（ラテかドリップか、アイスかホットか等）が購入したカップに注がれることですね。このゴールに向かうための手がかりがシグニファイアです。「ヘンゼルとグレーテル」のパンくずみたいなものです。

では実際のコーヒーメーカーを見てみましょう。

コーヒーメーカーの写真

ちょっとわかりずらいので抽象化したのもをイラストにしてみました。

このコーヒーメーカーを利用する上でパッと見て取れるシグニファイアは以下の箇所です。

カップを置く場所
ボタンを押すとコーヒーが出てくるという操作

「カップ」を指定の場所におき「ボタン」を押せばコーヒーが出てくるというのは明確です。これは「カップを置く」という行為と「ボタンを押す」という行為のシグニファイアが適切ということです。

逆にアイスとホットの選択、コーヒーのサイズ選択、これはちょっとわかりづらいですね、ではシグニファイアを適切にデザインし直してみましょう。

変更後

アイスとホットはよりシグニファイアが強くなるようにテキストと合わせて色でも表現しました。またボタンに表記してあるR（レギュラー）とL（ラージ）を一瞬で理解するには熟練の技が必要でしょう。そこでカップのアイコンにして大きさを表現してみました。

このようなインタラクションの手がかりをシグニファイアと呼びます。

対応づけ

対応づけとは操作すべき対象との関係です。

水道の蛇口とバルブのように操作すべき対象との関係が明白であることが「良い対応づけ」の条件です。

コーヒーマシンはどうでしょう？

カフェラテとドリップコーヒーの対応づけは良さそうです、それぞれの排出口の上部にそれぞれのボタンがあります。アイスとホットはどうでしょう？これは少し対応づけが弱いようですね、アイスとホットは並列の関係ですが配置としては上下の関係になっています。逆にカップサイズの対応づけは「普通・大きい」と序列がありますが並列（左から右という弱い順列とも言えます）に並んでいます。

ではこれを上記の概念モデルに照らし合わせて適切な対応づけの関係に配置し直してみましょう。