なぜデザイナーもコードを書くのか

こんにちは、Wantedy でデザイナーをしている青山です。

Wantedly には現在３人のデザイナーがいますが、現在は全員がWeb、モバイルアプリの両方でコードをコミットしています。スタートアップ界隈でもまだ珍しい環境ではないかな、と思うので、なぜ Wantedly ではデザイナーもコードを書いているのか？についてお話しできればと思います。

このテーマでは5月 UICrunch #8 にてチーム開発での効率性を主体にお話していますが、今回は別の観点も加えて書こうと思っています。UICrunch のスライドは、以下に貼っておきますね。

今、Wantedlyでデザイナーがコードを書く理由は以下の3つ。
それに加えて、 1つの気持ちがあると考えています。

ビジュアルはプロダクトの体験のほんの一部だから

もし、見た目がとても美しいデザインのプロダクトがあったとしても、ものすごくレスポンスが悪く感じたり、そもそも表示されているコンテンツが興味のないものであったりすれば、使う人は良い体験をしたとは感じることができないでしょう。

チャットアプリの Sync でいえば「メッセージを送信して表示する」「リアルタイム性」「検索で相手が見つかること」といったような体験の中でもより本質的な部分に貢献できた方が、体験の質全体を高められるはずです。

プロダクトの体験の芯の部分は、デザイナーが作ったり考えることができることよりもずっと高度なエンジニアリングによって実現されているので、デザイナーがコードを書いてみる、といっても、限界はあります。しかし、エンジニアリングに対する理解を持っておくことで、ちょっと別の視点からコミットできる部分を見つけられるかもしれませんし、改善するための手法やアイデアを提案することができます。

チームでのより良い判断のために、共通言語が必要だから

チームでシゴトをしていくにあたり、１人でやるよりもより良い判断をしていくためには、自分と異なる視点を持っている人が見えているものを共有して、ちゃんと理解した上で、判断の材料とすることが重要です。デザイナーがある程度コードを書ける≒エンジニアリングに対して共通言語を持っていることは、この相互理解にとても役立ちます。

Wantedly のシゴトでのコミュニケーションは GitHub を中心に回っていて、誰でも、いつでも Pull request（作ったからプロダクトに入れて欲しい！）を出すことができるようになっています。そこに送られてきたコードを見てなんとなくでも理解ができることで、余計なコミュニケーションの手間がなくなり、まずは手を動かして作ってみることの連続でシゴトが進んでいくようになります。もちろん、デザイナー側から Pull request を送ってコミュニケーションをとっていくこともできます。

ここでは、日常業務の中でコードを書いているかということよりも、デザイナーが自分で何かを開発しようとしたことがあるのか、コードを書いてみたことがあるのか、という経験が重要だと思っています。

共通言語といえば、Wantedly のエンジニアはデザインに対する読解力もとても高い人が多いですよ！

プロジェクトをもっと早く、効率的に進めたいから

Wantedly では、開発チームの人数は1つのプロダクトにつき３、４人で進めることが多いです。少ない人数で高速にリリースのサイクルを回していく中で、デザイナーが忙しくて手が回らないときもあれば、エンジニアの側に優先すべきタスクがあってデザイナーがこだわりたい部分まで手が出せないこともあります。

デザイナーがコードを書かない場合では、デザイナーの仕事が終わってからからエンジニア側でデザインデータにあわせた見た目を作るため、デザイナー、エンジニアがお互いに必要な時期が、リリースのタイミングから見て決まってしまいます。必要な時期にリソースを確保できない場合には、本当は作りたかったデザインをあきらめるしかありません。

一方、デザイナーが表現の部分に関しての実装を巻き取ることができるのであれば、エンジニア側で機能の実装を先に行っておいて、あとから見た目を作りこんだすることもできます。逆に、エンジニアが利用しやすいように先に再利用できる部品を用意して、プロジェクトの中では素早くビジュアルを組み上げられるようにするなど、柔軟にプロセスを組み立てることができるようになります。

スピード感のある開発の中でも、細部まで気持ちのこもったデザインの完成度を出していくためには、この柔軟性は大きな強みになります。

再利用できる部品の一例として、独自のアイコンをフォントとしてコマンド１つで Sketch から書き出せるようにしていたり、共通のコンポーネントとスタイルをCSS等のライブラリで用意して再利用しやすくしており、画面のデザインはスタンプを押すような感覚で組み上げることが可能になっているところもあります。

ユーザーまで届けたい熱量があるから

もし、デザイナーであるあなたに、強い情熱を持って、どうしても多くの人に体験してもらいたいコトと、それを実現するためのWebサービスのアイデアがあったとします。あなたの周りには、手伝ってくれる人が見つからなかったとしたら、どうしますか？おそらく、あなたはデザインをして、、、それだけでなく、プログラミングを学んでコードを書き、アイデアをカタチにするのではないでしょうか。最終的にアウトプットしたいものはデザインではなくて、プロダクトとその先にある体験なのだから。

もちろん、私たちは１人でやっているわけではなくチームとしてシゴトをしているので、一人ですべてのことをする必要はありません。しかし、仕事として何かを作っていく中で、絶対にやるべきだと思うのに諸々の事情で実現できなくて悔しい思いをしたことはあるのではないかと思います。私たちがコードも書くようになったきっかけは、どうしてもデザインをプロダクトにして、皆に体験を届けるべきだという情熱があったからだと思っています。

もしかしたら、あなたが絶対に実現すべきだと信じていることは、ある人にとっては瑣末な問題なのかもしれません。例えば、行間が詰まっているか空いているか、アニメーションが0.05秒長いか短いか、といったような。実際にはもうすこし大きな部分であることが多いですが。デザイナーから見れば、全体の印象を左右する重要なポイントで、それを言葉と絵を尽くして伝えたとしても、本当に伝わっているのか不安・・・

あなたに実現したいコトがあって、自分でつくれたらなぁ、と思っているのであれば、、、諦める前に、やってみてはどうでしょうか。

なぜWantedlyではデザイナーもコードを書くかまとめ

- 体験はビジュアルだけでは作り上げることができないから

- エンジニアと理解し合うことが、共通の目標に向かって進むために必要だから

- プロジェクトの進め方を状況に応じて最適化するために、とても助けになるから

- なにより、デザインした体験をプロダクトとして実現したいという情熱があるから

おわりに

デザイナーがコードを書けることについて、良い部分を書いてきましたが、デザイナーは絶対にコードを書かなければいけない、と思っているわけではありません。Wantedly とは別の会社、クライアントワークや大規模なチームでの開発ではデザイナーの価値は違ったものになると思いますし、また、Wantedlyでも組織が成長していく中で、デザイナーに求められる役割も変わってくるのではないかと思います。

しかし、もし必要となった場合には、いつでも Pull request を出せる素地を持っておくことは、「プロダクト」づくりをやっていく上で大きな力であると考えています。