UIデザインは青写真という自覚

2020年3月頃に執筆した記事に、加筆・修正を加えたものです。

デザインと実装のずれ、という言い方をたまに耳にする。デザインしたビジュアルに対して、実装が合っていない状態を指す。

これは暗黙的に、デザインしたビジュアルを是としており、仕様書として扱っている状態だろう。しかし、デザインツールで作ったものは、あくまでも「こうできたらいいな」という青写真でしかないと思っている。

そもそも、デザインしたビジュアルと、プロダクション環境での見た目を完全に一致させることはできない。ブラウザによっても差異があるし、デバイスの種類によっても、見え方はバラバラだからだ。

また、デザインしたビジュアルの地点では、実装観点での実現可能性は考慮されていない。だから、ずれという現象は事実かもしれないが、デザインしたビジュアルを是とするのを前提とすべきではない。

そもそも、User Interface とは、言葉通りユーザーとシステムとの接点・境界を意味するが、厳密にはそれをデザインしているのはエンジニアである。

では、わたしを含め、UIデザイナーと呼ばれる人たちがやっているのは、一体何なのか。正確に表せば、UIデザインのためのデザインと呼べるかもしれない。デザイン（設計）の意味をどう捉えるかにもよるが、UIデザインをしているのはエンジニアで、UIデザイナーがやっているのは、その前段階で青写真を描く行為である。

だとしても、その青写真を描く行為はとても重要なのだ。目に見えるビジュアルがあることで、素早くアイデアを検証でき、共通認識を作り出せる。

ここで話を戻すが、デザインと実装のずれ、という言葉に対しては、責任が分断されているように感じる。繰り返しになるが、UIデザイナーが「UIデザイン」と呼んでいるものは、厳密には青写真でしかない。

だから、デザインが終わったら、あとはエンジニアがどう実装するかの問題であって、UIデザイナーには関係ない、では済まされないのだ。

そういえば、中学生か高校生くらいの時、結婚できない男というドラマを見ていた。主人公で建築家の桑野が、建設現場で「自分の設計と違う」と棟梁と取っ組み合いの喧嘩をするお約束のシーンを思い出した。

大工の棟梁は、桑野の設計を現場の状況に合わせて変更しているのだが、桑野にはいつも無断で行っていたので喧嘩になる。このシーンはとてもコミカルなものであったが、象徴的である。デザイナーとエンジニアは、コミュニケーションを取らなければならない。

デザインが終わったら知らんぷり、というのは、コンセプトアートだけ丸投げして現場を見に行くことすらしない建築家と同じなのかもしれない。

わたし自身も、とある仕事の中でエンジニアとのコミュニケーションがうまくいかず、苦い経験をしたことがある。デザインから実装フェーズになって、デザインの意図と違った状態でリリースされ、施策としても微妙な結果に終わった。

これは、明らかにコミュニケーション設計に改善の余地が存在する。とはいえ、これらの問題は「必ずこうすべき」というものでもなく、突き詰めればお互いの信頼関係次第でどうとでもなる。

極論かもしれないが、信頼関係が既にできあがっていれば、外から見て丸投げのように見えても、本人たちは気持ちよく仕事ができる。わたしも、何年も同じチームで働いているPMやエンジニアの同僚から「ここのデザイン良い感じでお願いします」とよく頼まれていた。何回も同じ現場で仕事をしてお互いを理解しており、暗黙の共通認識ができているからだ。

理想像としてのデザインを作ったら、その青写真を見ながら、どうやって実現していくのかを一緒に議論していきたい。その先に、良いものづくりがあると信じている。