Confit機能拡張におけるデザイナーの役割

こんにちわ。いつの間にか2020年も年の瀬になっていて愕然としているさいとう(くろ)です。時が経つのが早すぎる。

今回は自社サービスであるConfitの機能拡張において、デザイナーがどうやって仕事をしているかについて簡単に紹介したいと思います。

機能仕様決定プロセスとデザイナー

少し前にCTOの大神が書いた「Confit機能拡張の仕様書作成に関係者全員が参加するメリット」という記事にあるとおり、Confitでは機能仕様を決める初期の段階で多くのメンバーが関わっており、デザイナーも例外ではありません。

というよりも、仕様が細かく決まっていない段階で画面のプロトタイプを作らないといけないケースがわりとよくあります。画面設計をしながらプロマネやエンジニア、サポートメンバと一緒に仕様を固めていく、というイメージのほうが近いかもしれません。

仕様書は文章主体となるので、どうしても機能や実際の操作のイメージがしにくくなりがちです。そこで画面のプロトタイプを用意することで、実際の操作感のイメージがしやすくなり、細かな仕様の確認であったり、機能についての議論も進みやすくなります。

デザイナーに求められること

機能仕様が細かく決まっていない段階で画面を作らなければいけなかったり、文章で書かれた仕様書から画面を作るということは、曖昧でボヤケているイメージを具体的なものに落とし込んで可視化する作業であり、この作業を担うのがデザイナーだと言えます。個人的にデザイナーの存在意義のほとんどがこれだと思っています。曖昧な状態から具現化していくためには、UIやツールについての知識やスキルだけでなく、システムについての理解であったり、サービスやユーザーについての理解を深めておく必要があります。

実際に画面のプロトタイプを作る場合、その機能が求められている背景や状況などのコンテキストであったり、ユーザーの特性、他の機能のUIとのバランスを考えながら作っていきます。その過程で、「仕様書には書かれているけれどこれ不要ですよね」「仕様書にはないけれどこの機能(表示)も必要ですよね」ということももちろん出てきます。そういったことを提案したり、関係者とすり合わせて調整することも必要になります。

実際にどうやっているのか

UI作成のプロセスは開発する機能や状況によって異なりますが、大きな機能であったり画面の変更が多い場合は仕様書の大枠が固まり次第、画面のプロトタイプを作り始めます。

プロトタイプというと、一般的にはワイヤーフレームだったり、SketchやFigmaなどのデザインツールを使った画面モックのようなものをまずは作る現場も多いと思いますが、ConfitではHTMLで作ってしまうケースが多いです。Confitはデザインシステムを作っており、HTMLの作成がある程度楽にできることに加え、最初からHTMLであればレスポンシブ対応も考慮しやすかったり、JavaScriptでの動きもある程度組み込んでUIを確認できたり、そのHTMLをそのままプロダクトに流用して作業工程の短縮にも繋がるので、メリットのほうが大きいと感じています。

HTMLで作成したプロトタイプは関係者全員に展開して確認とフィードバックをもらいます。

AdobeXDを使用した確認時の画面キャプチャAdobe XDを使って確認してもらう例
コメントに返信したり、ツール内でもコミュニケーションを取っています

HTMLで作ってるのに結局Adobe XDを使ってたら意味がないのでは…?と言われてしまいそうですが、画面の一部分を選択してコメントできる機能が便利なのでXDを使っています。HTMLで動くものも確認してもらいつつ、XDでコメントを残す、という方法を取っていることも多いです。

作成した画面プロトタイプとコメントは機能仕様検討会議で確認し、仕様を固めていきます。セールスと導入コンサルティング担当は実際に画面を操作して運用業務をしていたり、Confitユーザーに近い場所で日々業務をしているので、そういった観点でフィードバックをしてくれるのでとても助かっています。こうやって機能を作っていく過程で小さくフィードバックと改善のループをまわし、更に良いものに仕上げていきます。

そして仕様が決まった後にエンジニアが機能を作り込んでいくわけですが、その際にも画面や挙動を確認して画面の変更が必要そうであれば修正していきます。実際にバックエンド側を作ってみて分かることがあったり、性能や機能面での課題が出てきたりするので、エンジニアと協業しながら、機能がリリースされるまでデザイナーが関わって修正や改善をしています。

さいごに

ということで簡単にですがデザイナーの役割についてのご紹介でした。

デザイナーは機能をリリースするまで関わっていると書きましたが、実際にはリリース後にもユーザーの意見や使用状況に応じて画面を改修することもあります。受託案件だと特に「作って納品して終わり」になりがちですが、自社サービスなので、改善すべきところがあれば自分から率先して改善提案して改修していくことができます。

画面UIに関してはデザイナーに一任されているので、わりと自由にやらせてもらえています。もちろん自由にできる反面、自分たちで方針を決めたり決断しなければならないことも増えるため、大変な面もありますが、やりがいもあります。

Confitはリリースから数年経過しており、画面UIに限らず改善すべきことや課題が山積みになっています。ということは、サービスとしてもっと良くなる伸びしろがある、ということでもあるので、Confitのさらなる成長をご期待ください。