UI トレースは何をトレースしているのか

エレクトリックベースをはじめて買ったとき、まず練習したのは Mr.Big の To Be With You だった。Billy Sheehan のベースの中ではそこまで難易度が高くないバラードだし、寮で同じ部屋の先輩が、よく口ずさんでいたから。

楽器を手にした人が最初にやるのは、誰かの作った曲を奏でることだろう。たくさんの曲をコピーするうちに、だんだんと自分なりの弾き方が身についていく。

その練習方法について批判する人はあまりいない。しかし UI のデザインやイラストになると、とたんに渋い顔をされたりする。

自分が良いと思ったデザインをトレースし、なぜ良いと思ったのか分析することは、有意義なことだと私は思う。もちろん、ただ写すだけではツールの習得にしかならない。

しかし例えば、有名な Jesse James Garrett の 5 Planes Model を地図に、トレースした表面から深部へと潜り、仮定されたユーザのニーズや目的を探っていけば、デザインプロセスの疑似体験ができるだろう。何より、対象を分解しその構造から思考をたどるのはとても楽しい。

とはいえ初学者が一心に UI をトレースすることに、なんだか納得がいかない気持ちになるのも分かる。その色、その形になった意図をいくら考察しても、十分に写したとは思えないから。5 Planes Model の真ん中辺は、けっこう複雑なのだ。

もし世界がソフトウェアなら

先日開催された、World IA Day Tokyo で上野 学 氏の講演 ( ※ 1 ) に、ソフトウェアの四方界というものが登場した。

現代哲学者グレアム・ハーマンのオブジェクト指向存在論( object-oriented ontology )で扱われている四方界を、オブジェクト指向プログラミングの言葉で言い換えたもので、私はとても感銘を受けた。

もし世界がソフトウェアなら、UI をトレースする時、コピーされるのは UI のインスタンス、つまり感覚的性質だ。Sketch でシンボルを上手く使えば、UI のクラス、感覚的対象までならなんとなくコピーできるのかもしれない。

しかしユーザーがその UI を道具として使い、それが機能する時、感覚的性質から接続するのはプログラムとしてのクラス、つまり実存的対象なのだ。
にも関わらず UI トレースは、この四方界の下半分を写生しているにすぎない。

加えてトレースされた画面の絵は、感覚的性質のスクリーンショットでしかない。現実を複製しているつもりでも、複雑な UI のいち瞬間を、ある面から切り取っているだけだ。

それを "UI のトレース" と表現するにはあまりに限定的すぎるだろう。

UI トレースだけの話ではない。参考になる既存アプリの UI をコレクションしてカタログ的に利用し、それを真似た UI を作る場合も同じだ。これもまた、ただ感覚的性質を複製しているだけなのだ。

表出した感覚的性質をコピーしても実存的対象や、実存的性質まではコピーできない。実装する時になって、技術的に高度でコストがかかりすぎる、などのクリティカルな問題が発生してしまうのはこれが原因だ。

UI デザインをしているのは誰?

ソフトウェアの制作プロセスでは、紆余曲折を経てデザイナーが UI のビジュアルをおこし、それをソフトウェアエンジニアが実装するという作業分担が一般的だ。

しかしこのワークフローをソフトウェアの四方界に照らし合わせて見ると、かなりのアクロバットが行われていることが分かる。

1. デザイナーは諸々の要件を加味しつつ、プログラムの実行結果である感覚的性質をデザインツールを使ってスケッチする。その工程で随時、感覚的対象を編集していく。
2. その様子をみて、リバース・エンジニアリング的にソフトウェアエンジニアが実存的対象と実存的性質を構築する。
3. 実行された感覚的対象と感覚的性質がデザイナーのスケッチと相違ないかテストし、合致するまで修正する。

驚くべきことに、このプロセスにおいて UI デザイナーは UI をデザインしていない。実行結果の ”理想としての絵” を見てUI をデザインをしているのは、ソフトウェアエンジニアなのだ。

もちろん、UI デザイナーは最低限の実装に関する知識は持ち合わせているから、UI のクラス( 感覚的対象 )や、UI のインスタンス( 感覚的性質 )の絵を描く時、実装のクラス( 実存的対象 )や実装のインスタンス( 実存的性質 )を想定してはいるだろう。しかしあまり明確に共有されない。

このアクロバットが成立しているのは、それぞれの工程が完全に分離することなくゆるやかにつながっているからだ。デザイナーとエンジニアはコミュニケーションを重ね、お互いのイメージをあわせていく。それが難しくもあり、楽しくもあり、面白いところでもある。

分断されるデザインプロセス

ところが最初は小さかったチームも、時を経て大きくなると、クロスオーバーしていたはずのデザイナーとエンジニアの共創は、どうしてもアサインの都合で分断されてしまう。特に受託制作会社においては。

そして分断が続くうちに知識さえもつながらなくなっていく。

画作りが得意でも、エンジニアリングを知らないとUI のデザインはできない。しかし実際、CMS のカスタマイズさえ経験がない UI デザイナーはけっこういる。

クラスやインスタンスの概念が分からなくても、既存のアプリの UI を真似たり、変形させたりして感覚的性質のスケッチを描くことはできてしまうから。

それがすべて駄目だというのは言いすぎかもしれない。でもそんな状態では、ただただソフトウェアエンジニアのセンスと力量によって " 理想の絵 " は道具へと転換されていく。デザイナーはそれに加担しない。UI をデザインしているのはエンジニアだから。

デザイナーとエンジニアが、ずっと一緒につくれていたら、ノスタルジーだと笑われるかもしれないが、昔みたいに、デスクでのびをしたら手が後ろの席のエンジニアに当たるくらいの距離で、ずっといれたら、きっとそんなことにはならなかったと思う。

その距離だったからこそ育った人材があったと思う。でもたぶん、これは今更いっても仕方のないことだ。

OOUIとUXエンジニアと

最近 UI デザイナーの間でとても話題になっている OOUI も、 Atomic Design も、実装のアーキテクチャを理解せずに実践することは難しい。実際デザイナーだけでやってみるとよく分かる。

データとレイアウトの分離ができない。タスクベースが駄目なのは分かるけど、オブジェクトが何かよく分からない。結果、イメージ記憶として蓄積された感覚的性質のカタログをただ組み合わせている。

それでもなんとなくキレイにできてしまうし、実装されてしまうから、今まであまり問題が表出しなかった。しかし少しずつその綻びは広がっている。もう、騙し騙し絵をかいて済ませることはできない。

OOUI を単に手法の一つとして、そのプロセスをただ手順にどおりやっても、うまく実践することはできない。オブジェクトがどんなものかイメージできていないデザイナーが、オブジェクトのマッピングをするのは困難だ。

もちろん、洞窟にうつる影をみて、そのイデアを完全に再現するイメージを描くような、神の所業が可能なデザイナーというのは確かにいるだろうし、コードを一行も書くことなく、ハーマンの存在論を理解できてしまうくらい抽象思考が得意なデザイナーもいるだろう。

しかしそんな人は稀にしか存在しない。オブジェクト指向が何か知りたければ、デザイナーもコードを理解しなくてはならないし、結局はそれが近道なのだ。でも多くのデザイナーには、そんな風に見えないようだ。知らないことを知るのは失うことと似ているから、なかなかその一歩を踏み出せない。

一方ソフトウェアエンジニアはいとも簡単にこれを理解する。
デザインとエンジニアリングのどちらについても造詣が深い UXエンジニアもどんどん活躍しはじめてる。

私は Web デザインや Flash の経験から、ずいぶん稚拙ながらも少しは実装について理解している。しかしそんなもの、百戦錬磨のソフトウェアエンジニアには敵わない。

私は UI デザインのことが好きなのに、UI デザインの方は、デザイナーの私ではなく、エンジニアが好きだったのだ。

そう理解したとき、大きな喪失感が私を襲った。

デザイナーである私は、UI をデザインするとき、手をのばしてエンジニアを掴むけれど、その手を握り返してもらえるほど、エンジニアにインプットを与えることができているのだろうか。私の絵は、実装したくなるほど魅力的だろうか。全然そんな気がしない。

さらに恐ろしいことに、UI デザインというのはコンピューターの中だけの話ではない。だからこのソフトウェアの四方界は、あらゆる道具についてのモデルなのだ。

よく、UI デザインは企業やサービスにとって、全体の一部分にすぎない言われたするが、それはソフトウェアを、UI デザインを、パソコンやスマートフォンの中だけのものとして矮小化してしまっている。

だからデザイナーは、コードを書きたくないからといってコンピュータースクリーンの外に逃げても、意味はないのだ。我々はもう殆どソフトウェアの中に生きている

* * *

大きなインプットは大きな喪失とともにやってくる。しかし私は自分の好奇心に抗うことができないし、もはや知る前に戻ることはできない。
強いデザイナーでもなく、強いエンジニアにもなれない私のキャリアパスは消えてしまうのかもしれない。

それでも私は、誰もが哲学を持ち、より良く実装できる世界にしたいし、人が生まれながらに持つ好奇心と創造性を活かして、自分自身の体験をデザインできるような道具を作っていきたい。

そのためには少なくとも、今目の前にあるデザイナーとエンジニアの分断をなんとかしなくては。

Build up your confidence
So you can be on top for once
Wake up !
Who cares about ...

- Mr. Big - To Be With You

* * *

( ※1 )


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

✨🍬 有難うございます 🍬✨
553

ai

文系デザイナーです。note で文章を書く練習をしています。 普段はひっそりとアプリの UI デザインなどをしています。

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
12つ のマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。