理想的なUIデザインについてメモ

自分自身できているかは別として、こうではないかという仮説。

ただ「カッコよければイイ」という印象的スキ・キライ派：大多数にはうんざり。「わかりやすければイイ」という一見合理的に見えるけど美的基準あんのか？という意見にも、賢しいな、と与したくない気持ちが湧き上がる。

自分で作れば、実際に時間をかけて手を動かしていけば、必ず解答が見つかるという確信はある。なぜかはわからないが。未来の記憶をプロセスがデコードしていくというか、あらかじめ知っていたんだけど情報量が多いので圧縮されていたものを解凍して行くような感じ。

でも、それでは人を育てられない。
真似させて、いわゆるお稽古を続けていけばあるいは、とも思うがそれも気が長い。
促成栽培がうまくいくわけもないが、足掻きは足掻きとして思いつくことをメモしておく。

現実を模倣する事を基本としたい

RGBのピクセルで描く。
矩形ツールで描く。
問題は、その表現である。
ツールにあらかじめ設定されているテンプレートもあるだろうが過去それが十分であったためしはない。
そもそも、テンプレートを見て表現を考えるのではない。逆だ。自分のイメージが先にあり、それを実現するためにツールの機能を使っていく。なければツールそのものを作る。

板があるのならどんな素材なのか？
メタリックならアルミなのかステンレスなのか銀なのか？
いや、合金かもしれない。では合金なら何と何の合金で比率はどれくらいなのか？比重はどれくらいになるのか？
表面処理はどうしているのか？
研磨してあるのか。コーティングなのか。メッキ処理か。ヘアライン処理、梨地、塗装、加工にも様々な手法がある。
それによって写り混み具合も変わってくる。もちろん何が映り混んでいるのかも大切だ。
曲げ処理をしているなら、どうやって曲げたのか？仕上げ処理は何なのか？
角の処理も様々に設定できる。そしてハイライトの入り方が角の設計に依存して変わってくる。

透明な素材はさらに難しい。単にレイヤーの不透明度５０％とかでは決してないと思う。ガラスなのかプラスティックなのか？プラでも硬質なのか柔らかいのか？塩ビなのか、ポリエチレンなのか、疑問はいくらでもある。
半透明のオブジェクトが重なって見える場合、どちらが手前なのかは当然として、影の減衰設計、透過拡散など光学や物理的に正しいというアプローチと、視覚心理学にどのように認知されるかというアプローチがある。
こういうことを全て現実世界で体験した上で、インタフェースの描画を丁寧に描いていくことを理想としたい。それがリッチということだと思う。

PC上でバーチャルなUIを設計していく場合のメリットは

物理的コストからの解放コストの高い加工法を使用しても良い。高価な材料も問題なし。純金をふんだんに使っても問題なし。3次元曲げを多用しても良いし、極めて複雑な形状の成型品であってもいささかの躊躇なく採用できる。
時間の経過を自由に設定できる。磨きこんだ銅版も、ほって置くと数分で酸化し色が変わる。これを停止することができるし、同時に経年変化を加速することもできる。20年経った錆びたテクスチャーを表現するためにあらためて20年待つ必要はない。ただ20年経つとこれくらいになるということを体感として得るには20年かかるかもしれないけど。
物理法則を無視できる。重力を無視して空中に質量のあるものを配置することもできる。少ない電圧で大きな灯りを灯すことも、いや、通電なしで、それどころか発光体なしで明かりを灯すこともできる。

あたりか。いずれにせよ、一定以上現実世界を模倣していることが前提となる。

作りこみの手間やツールへの習熟もそれはたいへんな事だが、一番大きな障壁は、「そこまで厳密に現実を見つめたことは普通の人間にはあまりないことだ」ということ。
言い換えれば、似ていると判断できるほど対象を知るためには、現実レベルで相当深い体験を積む必要があるということだ。
単に爆発といっても、パーティクルジュネレイター、ポンじゃなくて、爆竹をグリコのおまけに詰め込んで、爆発させる程度の小さな実体験と、各種事件映像の取材、あとは想像力の積み重ねとそんな感じ。

文字組みは特に念入りに

UIデザインは、まずはグラフィックデザインの基礎に従うという大前提をあらためて最初に特記したい。かつてジョブズがカリグラフィーの講義を無断で食い入るように聴講したほどに、現在のUIデザイナー達が文字の歴史をリスペクトしているようには残念ながらあまり思えない。そんな今日この頃だからなおさら。

そして特に日本人デザイナーとして忘れてはならないことがもうひとつ。明治維新、そして第二次世界大戦後、かつて西欧文化を追い求め吸収しようとしたタイミングで、当時の先輩デザイナー諸氏がどれほどの苦労をもって、西欧のタイポグラフィーを追いかけ、それと日本の文字を繋げるべく涙ぐましい努力を続けてきたのかを。それはあらかじめ負けが決まった戦いでもあった。だが今の日本はその不屈の試みの恩恵に預かっている。縦書きと横書きを使い分け、平仮名カタカナ漢字アルファベット数字記号を巧みに組み合わせ表記するとき、私は常にその努力を思い出し、少しでも美しい文字組になるように注意を払っている。石垣を積む名もなき職人のように。

想定するユーザーの身長と視野はどれくらいか？その上での視点移動の設計は？全部に注意喚起は難しい。どこを詰めて、どこを抜くのか。
文字絡みは特に綿密な設計が必要となる。左揃えなのかセンタリングするのか、周囲のスペーシングが均一もしくは一定のルールは守られているか。文字の選択は適切か？句読点の使い方や改行ルールは定められているか。行間設定は適切か。後にどんな文字列がデータとしてきても、デザインに破綻をきたさないか？数字の桁数は何桁か？0パディングは行うのか？単位表記は？カンマやピリオドはどうするのか？
テクスチャーで出すのか、テキストデータを流し込むのか。カーニングテーブルは自作するのか。正体でそこそこ見せるよう調整するのか。
遷移が進んでいくとブックデザインやページネーションルールに近しくなっていく。共通項目の整理と一方で変化を強調したい部分の調整。

自分で決めたルールを守る

ここら辺までは、できて当たり前として、インタラクションの設計に入る。デヴァイス、例えばボタンを押す。カーソルが移動する。右へ10pixel。当然左へも10pixel。じゃあ、上へ移動する場合はどれくらい移動したらよいのか？立体表現やオブジェクトのパースによっては必ずしも同じでなくても良いだろう。大切なのは自覚的に決定しているか？そして、時間を置いた後でチェックして違和感がないか？ということだ。いい加減に決めて良い事はない。最初に10pixelと決定したら、そのルールには継続して縛られる。もし不都合があれば、最初まで巻き戻して修正しなければならない。後々、場合によっては数年にわたって自分の後の代まで拘束される可能性があるルールなのだ。うかつに決めてはならない。「なんとなく」はやめよう。

移動するオブジェクトの前後関係も重要だ。立体表現であれば、厚みや影の表現。透明な箇所があれば、重なりの屈折表現等が、物理法則にしたがって妥当に見えるよう表現する。これも最初に自分が決めた表現のルールに従って制作を進める。場当たり的にその場その場のルールで制作を進めた場合、全体にまとまりのあるデザインには決してならない。自分で作ったルールは、自分で守ってこそルール足りえる。

静止画としての整合性を優先するあまり、動かしたときに非現実的になるようではならない。立体表現の投影法にも各種あり、場合によっては、一画面中で複数を組み合わせることもあるが、画面としての効果を受けて視点で判断することが重要だ。自分の稚拙な設計を覆い隠す言い訳として用いることは恥ずかしいことだ。

いずれ、どこかでウソは付かなければならなくなる。そのとき、そのウソがより効果的なものになるためにも、現実の物理や理屈で処理できるものはルール通りに作っておきたい。

動かしてみて魅力が増すデザイン、反対に魅力が薄れるデザイン、色々あるだろう。ここをコントロールするには豊富な経験が必要だ。ただ何回も漫然と仕事を繰り返すのではあまり意味はない。楽ではないが、ある程度先を読みながら様々な事を少しずつ決定していくことだ。小さな決定が後で大きな影響を及ぼすことがある。その見極めはある種のカンのようなものに頼るしかないように思う。そのカンを育てるためにも基本に忠実に予測しながら決定をして行く習慣をつけたい。

経験がないことで必要以上に決断を恐れてはいけない。一番大切な事は、ダメだと思ったらスパッとあきらめて原因となった決断まで戻り修正を行う勇気を持つことだ。これを怠り、間違いを抱えたまま「誰かが何とかしてくれるかも」「これくらい気付かれないかも」とそのまま進めること程、デザイナーとして無責任な事はない。ダメなものはダメだ。例えもう一度同じ事をすることがどれほど困難に思えても、同じ事をもう一度行えば、前より習熟しており、必ず少しは早く、より良いものができるのが人間である。そこを信じて作り続けるしかないように思う。