Aipoのコーディングフローについて紹介します
ビジネスコラボレーションツール「Aipo」のシステムエンジニアを担当している岩崎です。
これは TOWN Advent Calendar 2019 10日目のエントリーです。
SaaSにおいてデザイナーとエンジニアとの協業は非常に大事です。
デザイナーがモックアップの完成までに責任を持つのではなく、リリースされたサービスがユーザーにとって使いやすいものになっているかまでに責任を持つこと、それを実現できる体制にしているAipoのデザインフローについて紹介します。（このエントリーではモックアップからコーディングへの落とし込みのフローを中心にお話します。）
過去のフロー
受託案件と異なりSaaSは日々の改善が大事になってきます。新しい画面を作ったり新しいナビゲーションを作ったりするときにエンジニアではなくデザイナーがUI/UXについて責務を負うことができる体制になるまでには紆余曲折がありました。
以前は主にこのような流れをとっていました。
1. デザイナーがPhotoshopやIllustratorなどでモックアップを起こす
2. デザイナーがcss、静的htmlでマークアップを行う
3. エンジニアが静的htmlをもとにシステムに組み込む
過去のフローの問題点
・モックアップの時点で動きの確認が取れない
モックアップはあくまで1枚絵なので、どのボタンを押したらどの画面に遷移するのか、どの状態のときにどのメッセージが表示されるのか、といった"動き"が表現しづらいという問題点がありました。
・静的html,cssとシステムに組み込まれたhtml,cssとの乖離
おそらく最も大きい問題がこれです。
例えばエラー時のメッセージであったり、条件による表現の分岐であったり、このパターンのときの表現方法が静的htmlにないな・・・。とりあえずこんな感じかなっ、とエンジニアが静的htmlに存在しないhtmlをつくることによって、新しい機能が増えれば増えるほど静的htmlとシステム上のhtmlが乖離していってしまう問題です。
ちょっとしたボタンの追加やスタイルの崩れをシステム上のhtmlやcssだけに反映して、静的html,cssの方には反映されないケースがたびたび発生しており、システム上のhtmlとcssに比べて静的htmlとcssが古くなってしまう状況が発生していました。
当時は静的html,cssとシステム上のcssが別のリポジトリで管理されていたため、静的htmlの方のcssとシステム上のcssの違いが発生している理由がはっきりせずどちらが正しいのかわからないようになってしまっていました。
現在のフロー
改善を重ねて今はこのようなフローになっています。
1. デザイナーがAdobe XDで動きも含めたモックアップを起こす
2. デザイナーとエンジニアが協力してscss,Vue.jsでマークアップを行う
Adobe XDを使うことで動きまで表現したモックアップを作成
モックアップの作成には Adobe XDを使用しています。ボタンをクリックした際の画面の遷移といった動きまで表現できるため、エンジニアだけでなくカスタマーサクセスやマーケティングのメンバーも次にリリースされる機能がどのようなものか事前に把握することができるようになりました。
scss,Vue.jsにより静的htmlが不要に
モックアップ用とシステム上のフロントエンドは完全に同じものを使っています。（静的html,css用のリポジトリは廃止しました）
モックアップのhtml確認時にはwebpack-dev-serverを立ち上げ、api.getのレスポンスとして静的なJSONを返すようにしています。システムからアクセスする場合にはフロントエンドは変わらず、静的なJSONではなく動的なJSONを返すようになりました。
内部のルーティングをシステムに組み込んだ環境とモックアップ環境とで動的に切り替える仕組みを用意したことで、デザイナーとフロントエンドエンジニアはモックアップの段階で動きまで含めたscss,Vue.jsによるhtmlを作るところまで進め、静的なJSONを返すところをサーバーサイドエンジニアが動的なJSONに作り変えるような分担になっています。
モックアップ
npm run startすることでwebpack-dev-serverが8888ポートで立ち上がります。
開発環境
docker-compose up -dすることでDockerが8080ポートで立ち上がります。
フロントエンドとサーバーサイドの担当範囲の切り分けが明確になったことで、新機能開発の際などに先にモックアップまで作ってしまう、といったことがしやすくなりました。（とはいえ現在の開発体制上、フロントエンドエンジニアとサーバーサイドエンジニアの切り分けはしていないため開発者全員がどちらも対応しています。）
そして何よりも大きいのはcssやhtmlの二重管理から解放されたことです。ボタンの追加やエラーメッセージの追加など、エンジニアがデザイナーに依頼しやすくなりました。
また、近年は"動き"をデザインすることが大切になってきています。ボタンクリック時の動き、登録処理をしたあとのアクションなど今まで静的なhtmlだけでは表現が難しかった動きの表現もVue.js上でモックアップを作ることで簡単に共有できるようになりました。