中編では「エンジニアから見たデザインの謎」について引き続き現場のエンジニアと、一緒にお仕事をさせて頂いているデザイナーの方をお迎えして、お話を伺いました。デザインにもあるという理論や理由についても詳しく語ってもらいました。

プログラミングとデザイン、やっていることはわりと同じ

町田

エンジニアの方にはデザインの規約を作るみたいな作業、その発想自体がそもそもないっていうことでしょうかね。

赤塚

プログラミングとデザイン、やっていることはわりと同じですよね。原則は同じだというところが実感として分かってくると、もっと楽しくなると思います。

倉貫

デザインにもルールのような、基本原則があるんですか？

赤塚

あります。ただ、状況によって結構変わりますし、一筋縄ではいかないんですけどね。例えば、その画面の中で一番目立たせたい部分はここに置くとか、一覧ページのような同じ要素が並んでいる場合だったら要素同士の余白は、この要素間の余白より小さいとかなんですけどね(笑)

倉貫

もっと感覚的なものかなと思っていたので、実はそういう原理原則があるんだったら教えて欲しいです。全部センスではないかと思っている人もいるはずなので。

赤塚

『ノンデザイナーズ・デザインブック』 とか読むとその辺りが少し分かるかもしれないです。解説も結構書いてあるので。

遠藤

メンタリングの中で一番衝撃だったのは「デザインは感覚じゃない」と言われたことです。「ちゃんと理論があるよ」と赤塚さんに言われて「デザインに理論？」と思いながら聞いていました。

赤塚

感覚のところも、もちろんありますけどね(笑)

倉貫

エンジニアも実は感覚のところがあります。コードレビューして「きれいなソースコードに仕上げる」なんて言うけれど、「きれい」とはいったい何をもって言うのかと。その辺りはセンスだと感じますよね(笑)

デザイナーとプログラマー、一緒に作る方が効率的だった

倉貫

先ほどの役割分担ですが、町田さんと赤塚さんのお二人は、プログラムを書くところまでされますよね。プロジェクトを進めるにあたって、エンジニアと一緒になってプログラムを書いたり、お客様と話をされるということですが、デザイナーさんの中で、そこまでする人は多いですか、少ないですか？

町田

それほど多いとは感じませんが、一昔前よりは、ブログなどで見るようになってきましたね。スタートアップが増えたので、スタートアップでは当たり前になっているのかもしれないですね。

倉貫

デザイナーさん自身がプログラムを書くってことですね。

町田

そうですね。開発チームの中に入るという。

倉貫

お二人は開発チームに入って、絵を描くだけではなくプログラムも書いてきれいにするということに対して、どういうモチベーションでされるようになったんですか？

町田

コミュニケーションをとって誰かに直してもらうより、自分で直したほうが効率が良いからです。 よくエンジニアさんのデザインで気になってしまうのが、「ＸＸ円」という表示です。この場合「円」にspan（*1）がついていないと、「円」を小さく表示できないんですよね。
（*1）span(タグ):<span>~</span>で囲んだ範囲をひとかたまりとしてデザインを適用する際に用いる。

倉貫

なるほど。「円」をちょっと小さくしたいわけですね。

町田

はい。そのために「円にspanを付けてください」と依頼するのは失礼かなって(笑)

遠藤

「円」にspan付けないわ(笑)

松村

最近、逆に数字には必ずつけるようになりましたね(笑)

町田

そういうのがたくさんあって、いちいち言うのは面倒くさくなってしまったんです。あと、自分で責任を取りたいというのが大きいのもあって。

赤塚

私も同じような感じです。デザイナーとディレクターの間ぐらいのところをやっていた時期が長かったんですけど、CSSさえ書いていなかったりして。 だけどやっぱりコードを書かないと最後にやりたいことができないんですよね。エンジニアとの距離もある感じがするし、上手く伝わらなくて出来上がりがイメージとすごく違っていたりして(笑)

倉貫

ディレクターやデザイナーとしてエンジニアにバトンを渡してしまうと手が出せないんですね？

町田

頑張ればできるんだと思うんですけど、ちょっと手間ですね。

倉貫

不要なキャッチボールはしなくてもいいですよね。キャッチボールってもったいないじゃないですか。 同じものを、今みたいにこうやって一緒に作り上げる方が効率的ですね。

前田

そうですね。 デザイナーさんから絵で渡されても、「ここからどうやるんだろう？」と悩むこともあるんで（笑）

赤塚

なので、 逆にデザイナーとしても絵の中に手間でも色々注釈を入れないといけないんですよね。 ここは余白を左右に5mmみたいな（笑）

デザインも作りつつでないと分からない部分がある

倉貫

町田さん、赤塚さんのような、一緒に手を動かしてくれるデザイナーさん、それ以外の描いた絵をバトンとして渡してくれるデザイナーさん。それぞれ違いがありますが、プログラマーの立場として、やりやすさ、やりにくさはありますか？

松村

それぞれ色々ありますが、絵でくれるデザイナーさんとやるときは苦しいです。死にそうですね（笑）

倉貫

それはなぜ？

松村

絵の場合は、そのコンテンツが伸びたりしたケースに備えて考慮が必要です。 実際文字を入れてみたら「あれ、ここ長くなってバランス変だな」と感じる場合がありますね。それに、頂いたデザイン画から、切り抜く作業もあまり得意ではないんです。アイコンなどをうまく配置したり、絵を切り抜く技術があまりないので、狙った場所に配置するには「絵をどうやって切り抜こうかな」という部分から考え込んでしまう。

倉貫

一般的に行われている、 デザイナーさんが絵を描いて、あとはエンジニアさんが作るという形は、実はデザイナーさんから見てもやりにくかったし、エンジニアから見てもあまり嬉しくなかった？

遠藤

そう言えますね。

町田

文字量が多くなったり、崩れるのが分からないというのは、デザイナーも同じです。やはり動いているものを触りながらデザインしないと分からない部分はあるんです。

倉貫

では、こういう一緒にやるやり方が一番いいとして、なぜ世の中にこういうスタイルが増えないのでしょう？

松村

役割分担すると自分の責任範囲が明確なので、楽は楽なんですよ。自分はここだけやっていればいいと分かるので。ただ、デザイナー、プログラマー両方が関わってくる部分は、プロジェクトの全体的な効率改善を考えると、自然と一緒に手を動かすことになると思います。

Gitが使えるとデザイナーは楽しくなる

前田

あとは、プログラミングを知ることで、デザイナーさんにとって嬉しいことはあまりないと思われているのではないでしょうか。「知ったところで何も変わらないし」という感じで。

赤塚

実際にGitが使えると、自分のサービスを、自分の思ったように変えていくことがやりやすくなったりして、自立的に動ける人にはすごく楽しみが増えると思うんですけどね。 スライドにその辺りのノウハウをまとめたんですが、公開しても読む人がエンジニアしかいなくって(笑)

前田

肝心のデザイナーの人に読んでもらえない（笑）

倉貫

そういうノウハウが広がって、Gitが使えるデザイナーさんが増えると僕らプログラマーも助かりますね。

町田

あとは、 僕はエンジニアと仕事をするまでは、ウェブサービスとかウェブアプリを作るというのはものすごく大掛かりなことだと思っていたんですよね。あれはもうシステム会社のもので、デザイナーとは別世界だと考えていました。それがRailsとか出てきて、ウェブアプリがもっと身近な存在になって、Gitなど使えればデザイナーが考えたことでもエンジニアがササッと作ってくれるっていうのが分かった事が大きかったですね。

倉貫

もっとカジュアルに作れるようになりますよね。

赤塚

デザイナーのほうでざっくり作ってしまって「こういうのどうかな」と見せると、面白いと思ってくれたエンジニアは作ってくれちゃったりするんですよね。もっといいものにしてくれたり。

倉貫

そういう風にエンジニアとデザイナーが一緒に作るきっかけとなる場があるといいですよね。