Nitram+Nunca

色のグラデーションの話。現代的な GUI にはグラデーションがよく使われる。 Mac OS X のツールバー、 Windows Vista ならタスクバーやボタンアイコン、Webサイトだって最近流行の CSS based デザインの背景やタイトルなんかには、よく見られるよね。このようなグラデーションの役割とは何だろう？　それは、肌理（きめ）を作るということだ。平坦なディスプレイの中に、ものの質感や奥行きを与えるんだ。このようなグラデーションは、２つの優れた効果をもたらしてくれる。

ひとつは、ユーザが操作を予測するとっかかりを生み出す、ということ。出っ張っていたり、凹んでいたりすると、何だか動かせそうに見える。異なる色のグラデーションが繋げることで、押すと凹みそうなガラスのボタンに見せることもできる。「押せそう」「引っ張れそう」。ユーザは GUI を見た瞬間、何が出来るのかを無意識的に予測している。グラデーションをそのためのガイドにすることができる。線や単一の色では、それが押すべきものなのか、引っ張るべきものなのかを表現するのは難しいものだ。

もうひとつは、楽しくなる、ということ。楽しさとは、快適さだ。ユーザは生き物であって機械じゃない。感情を持っているし、現実の環境の中で生きている。ユーザに快適さを感じてもらうには、ディスプレイの中に現実感覚と同じ演出を加えるのが近道だ。それがユーザにとっては「なんだか楽しいな」って感覚につながる。ユーザエクスペリエンスを創りだす、ひとつの方法だ。

少し話がそれるけど、初歩的な絵のお勉強には３種類のグラデーションが出てくる。明度のグラデーションと、彩度のグラデーション、そして色相のグラデーション。それぞれ、明るさが変化していくもの、鮮やかさが変化していくもの、色合いが変化していくもの。これらは、 Photoshop や Illustrator のような画像処理ソフトを使うと簡単に作れる。カラーパレットを HSB というモードに切り替えて、明度のグラデーションは B を変化させるだけだ。彩度だと S で色相だと H。簡単だ。

左から明度、彩度、色相のグラデーション。

ただ、これらは、僕らがリアルに感じている色彩感覚とは異質なものだ。人間が体系づけたルールに従って、コンピュータがはじき出した数値的なグラデーションだからだ。色の仕組みを知るにはいいけれど、実用にはならない。本当に美しい、人に潤いと快適さをもたらすのは、僕らが感じる現実感覚に沿った色合いのグラデーションだ。

それは、僕らの周囲にある光が教えてくれる。僕らが見ている世界は、太陽などの光源から光が出て、物に反射して、目に触れることで感じる世界だ。光で切り取られ陰影づけられた世界から、僕らは出来ることを予測する。「あそこは切り立った崖だな」とか「この桃、まだ堅そう」なんて思う。複雑な形状も光が織りなすものだ。透明なガラスは、表面が周囲の光を直接反射し、奥は背景の光を通す。現実指向のグラデーションとは、実際のところ、光のコーディネーションの話なんだ。

光の在り方を考えることが、グラデーション作成のツボとなる。

最初は、デザインを行うものに対して、光がどこにあるのかを決めることから始まる。光をつくりだすのだ。 Mac OS X のように光源がディスプレイの上中央に設定されている場合、グラデーションは常に垂直方向にかかる。ボタンも背景も垂直方向のグラデーションだ。光の場所は、グラデーションの方向と深さ（変化の度合い）を決める。ボタンも、背景も、常に光源に向かって色が変化するようにすれば、全体の統一がうまく収まる。

次は光の色だ。例えば、晴れた日の屋外では、太陽光の影響で全体が黄味がかって見える。その中でも明るい物はより多くの光を反射して、より黄味が強くなる。人が感じる色の世界は、明度の変化に伴って色相も変わるわけだ。空の高い部分は青みが強く、地平に近い場所は黄味が強かったり。このような屋外タイプの光源を使うなら、オレンジのグラデーションを引く場合、暗い部分は色相は赤っぽくし、明るい部分は色相を黄色に振り、彩度も上げる。濃い青のグラデーションの場合は、暗い部分は彩度を上げて、明るい部分は黄味を強くし彩度を下げる。もし光が青いなら、明るくなるに従って青味を強くすればいいわけだ。

これを全体のカラーと合わせて考えてみる。グラフィック全体がブラウン系や赤なら黄色の光源、もしくは黒地に青の光源、みたいな感じだ。前者は、ちょっと上品な演出ができそうだ。後者はクールな印象。ホームユースのアプリケーションに後者は合わないよなぁ。そんな感じ。

全ての色、そして全体感に対してマッチするグラデーションは、明度、彩度、色相の３つのグラデーションが状況に応じて複雑に組み合わさったものだ。これを体得すれば、リッチなアイコンにも応用することができるだろう。さらには、複数の光源を使ったり、光源の法則をわざと外してみたりすることも有効だ。

辺りを見回してみると、僕らはたくさんの肌理に囲まれて暮らしている。ざらざらしている部分やテカテカしている部分。それらの質感に影響を与えているもの（媒体）は光だ。光の加減が、僕らに印象（陰影・機微）を与える。これを GUI のデザインにも組み込んでやろう。ユーザが感じる（予測できる）幅がぐんと広がるはずだ。それが快適さ、楽しさにつながり、モダンで質の高いプロダクトに仕上がるのだと僕は信じている。

Posted in グラフィック