テックタッチアドベントカレンダー10日目を担当するshioriです。
昨日のcanalunによる「コンサルタントからエンジニアになったマン、最近感じた働き方の違いを書いてみたらしいよ！」は、エンジニアとコンサルタントの考え方・見ている世界の違いが分かりやすく書かれた、学びの多い記事でしたね！（まだ読んでない方はぜひ） こういった違いを理解していると、業種の異なるメンバー間での誤解や齟齬を防ぐことができそうだと感じました。
この記事では、テックタッチのエンジニアが、デザインから関わって機能を作り上げた話をご紹介します。
エンジニアがデザインに関わることになった背景
テックタッチでは、機能開発を行うときにPO が課題と要求を整理し、詳細な仕様はデザイナー・エンジニア・QA 含めたスクラムチームで検討しています。（これには、開発メンバー間で課題の本質を共有できるようにする目的と、1名しかいないPO の負担軽減という目的があります）
これまでUI 設計は全てデザイナーにお願いしていましたが、
- ユーザーが直接操作する部分については、エンジニア含めたメンバー全員で考えたほうが、より良いものにできるのではないか
- エンジニアも関わることで仕様の認識ずれを無くし、実装時の手戻りを減らせるのではないか
- そもそもデザイナーが現在1名でリソースが足りておらず、デザイン検討がボトルネックとなって開発が進まないケースが出てきた
という理由からエンジニアもデザイン検討の段階から関わってみることにしました。
どんなことをしたのか
figma というデザインツールを使ってエンジニアがUI を作成し、デザイナーに検討案を提案するという流れで進めました。 デザインのルールがほぼ確立されているため、既存のコンポーネントを組み合わせることでエンジニアでも大体ルールに沿ったデザインに仕上げることができます。（とはいえ余白や文言のテイスト等はズレが発生するので、清書はデザイナーにやってもらいました。）
tandemというリモートコミュニケーションツールを使って、エンジニアメンバーでワイワイ議論しながら、その場でfigmaを操作してUIを作成していきました。 tandemについてはこちらの記事で紹介しているため、ぜひ読んでみてください。
実施してみて感じたこと
エンジニアがUI を作り上げることによって、以下のような利点がありました。
- ユーザーの操作性を重視しつつ、実装する側だからこそ気づく細かい観点を考慮に入れて作ることができた
- その結果、実装時のデザイナーとエンジニア間のコミュニケーションコストを減らすことができた
- 議論しながらその場でUIに反映させるため、ブラッシュアップのスピードが早い
- エンジニアが仕様を理解しているため、実装時の手戻りがほとんどなかった
ただの感想ですが、皆でUIを作り上げていく過程が楽しかったです。 テックタッチではデザインルールが整理されていることもあり、エンジニアでもデザインが逸脱しないように作ることができましたが、ある程度デザインガイドラインが整っていないと、作る人によってデザインがばらばらになりそうだなと感じました。
まとめ
エンジニアがデザイン検討から関わって機能開発を進めた話をご紹介しました。 全体として生産性が向上した実感があるため、今後も継続していきたいと考えています。
