書評「UIデザインの基礎知識」

私はずっとプログラマとして活動してきたが、ウェブデザインをはじめとする見かけのデザインは苦手だった。ずっと避けて通っていたのだが、いまの時代、ウェブサイトのプロトタイプくらい自分で作れるようになりたいと思った。デザイナーの知人に相談したところ、紹介してくれたのがこの本。

ユーザーインタフェースデザインの基礎知識 ~プログラム設計からアプリケーションデザインまで~

豊富な例を引用しながら、ユーザーインターフェイスをデザインする上で陥りがちな典型期な過ちを解説していく。数学科出身の著者というだけあって、解説は理論的で、感覚より論理を重視するプログラマにも分かりやすい。

理想的なコンピュータシステムは、ユーザーがそれを操作するとき、ストレスを感じをさせず、間違いを引き起こしにくいものであるべきだ。「利便性を考慮した上で安全性を確保するためには、ヒューマンエラーの研究における人間の動作や認識、学習といった要素、すなわち認知科学的な基盤をしっかり理解しておくことはとても大切なことです」といえる。デザインの要素としては次のようなものが例示されている。

1. 色と配色
2. レイアウト
3. 形
4. 配置
5. 操作方法
6. フィードバックの方法

一言で言えば、当たり前だが、色と形が重要ということだ。

印象に一番影響を与えるのは、色彩である。色は物理的には光の3原色である赤(R), 緑(G), 青(B) の各成分の大きさで表現されることが多い。だが、色相（色合い）・明度（明るさ）・彩度（鮮やかさ）で区別したほうが人間の感覚にしっくり来る。色相を現すには、色相環というものがよく使われる。

色のデザインの定石は次のようなものであるらしい。

1. 原則として、同一色相や類似色相を使う
2. 補色色相（色相環の反対に位置する色）を使ってもよい
3. 彩度が低ければ（くすんだ灰色に近い色であれば）色相はかなり自由に選べる。こういう色の組み合わせをパステルカラーという
4. 暖色系（例：赤）で彩度の高い色は興奮色。寒色系(例：青）で彩度の低い色は沈静色。注意を惹きたい場合だけに興奮色を使い、通常は沈静色を使うとよい。
5. 明度が高ければ軽い印象。明度が低ければ重い印象。
6. 寒色系の暗い色は、収縮色。暖色系の明るい色は、膨張色。

色をある種の語彙として考えればいいのだろう。デザイナーが表現したいことは場面ごとに異なるわけだが、それを最適な色の組み合わせで表現すればよいわけだ。コンピュータの画面デザインとは離れるが、こうした色の性質をきちんと理解した上で、服を選べばオシャレな印象を与えることができるんだろう。

形においては、アフォーダンスを考えることが重要である。アフォーダンスとは「ものの形による情報から提供される動作」のことである。たとえば、椅子を見たら、説明なしにその形自体が「座るべきもの」という情報を表現している。あるいは、出っ張ったボタンは、その形自体が「押されるべきもの」という情報を表現している。

コンピューターの画面では、当然、アイコン等、さまざまな図形がユーザーが行うべき操作を表現するために使われる。ここでアフォーダンスをうまく使えば、ユーザーは多くの説明を受けなくても、直感的にソフトウェアを操作できるようになる。その一方で、アフォーダンスに反する画面デザインは、むしろユーザーのヒューマンエラーを引き出す結果になってしまうことに注意すべきである。

プログラマのような普段あまり画面デザインについてきちんと考えていない人間には、この本はお勧めである。ただ、唯一不満があるとすれば、最近流行のタッチパネル式のユーザーインターフェイスに対する言及がほとんどないことだ。とくに iOS におけるピンチイン・ピンチアウトのような新しい操作方法をどう生かしていったらよいか等々について記述があればなおよかったかもしれない。