リアル・グラデーションの作法
January 6, 2008 4:06 pm | 1 Comment
色のグラデーションの話。現代的な GUI にはグラデーションがよく使われる。 Mac OS X のツールバー、 Windows Vista ならタスクバーやボタンアイコン、Webサイトだって最近流行の CSS based デザインの背景やタイトルなんかには、よく見られるよね。このようなグラデーションの役割とは何だろう？ それは、肌理（きめ）を作るということだ。平坦なディスプレイの中に、ものの質感や奥行きを与えるんだ。このようなグラデーションは、２つの優れた効果をもたらしてくれる。
ひとつは、ユーザが操作を予測するとっかかりを生み出す、ということ。出っ張っていたり、凹んでいたりすると、何だか動かせそうに見える。異なる色のグラデーションが繋げることで、押すと凹みそうなガラスのボタンに見せることもできる。「押せそう」「引っ張れそう」。ユーザは GUI を見た瞬間、何が出来るのかを無意識的に予測している。グラデーションをそのためのガイドにすることができる。線や単一の色では、それが押すべきものなのか、引っ張るべきものなのかを表現するのは難しいものだ。
もうひとつは、楽しくなる、ということ。楽しさとは、快適さだ。ユーザは生き物であって機械じゃない。感情を持っているし、現実の環境の中で生きている。ユーザに快適さを感じてもらうには、ディスプレイの中に現実感覚と同じ演出を加えるのが近道だ。それがユーザにとっては「なんだか楽しいな」って感覚につながる。ユーザエクスペリエンスを創りだす、ひとつの方法だ。
２分の１ピクセルの輪郭線
October 7, 2007 7:38 pm | 6 Comments
小さなアイコンの話。 Mac界ではそのトレンドが約１年毎に変わっていく。例えばツールバーの地の色。 Mac OS X 10.3 “Panther” 以前では白っぽいしましまだった。現在の 10.4 “Tiger” は明るいグレー。そしてもうじき発売の 10.5 “Leopard” には濃いグレーが採用される。どんどん変わっていくOSの外観。それにマッチするツールバーアイコンのグラフィックも変わる。これには正直うんざりだ。
例えば今のシイラのアイコンは Panther に合うようにアイコンの輪郭を抑え気味に描いた。しかしこれを Leopard で見た場合、輪郭が極端にぼやけてしまう。それに Leopard のツールバーのように、グラデーションによって盛り上がりをはっきり見せているような地には、上に乗っかるボタンよりも埋め込まれたボタンの方がスマートで美しい（実際、Leopardのインタフェースもそうなっている）。かと言って、じゃあ最新の Leopard に合わせようぜ！ってわけにはいかない。次の 10.6 にはどんな地になるかが分からない、というのもあるが、Tiger 以前のユーザを切り捨ててOKというのは、制作者としてちょっと傲慢すぎやしませんか。えぇい、どうすりゃいいんじゃ。せめてどんな色の背景にもマッチするアイコンを作ろう。というわけで、最近の自分的境界線の描き方をメモ。
