実例マッピングでデザイン〜開発のフローをよりスムーズに

はじめに

こんにちは！
株式会社Hacobuのテクノロジー本部でUIUXデザイナーをしているテイです。
今回はチームで実例マッピングを取り入れた話について触れたいと思います。

実例マッピングとは

miroを活用した実例マッピングの事例

UIデザインにおける実例マッピングとは、ユーザーの行動やインタラクションを具体的にイメージし、UIデザインの要件を明確にするためのワークショップ手法です。
開発前に行うことで機能の理解が進むだけではなく、考慮漏れによる追加の実装や、認識齟齬の予防などの効果も見込めます。

取り入れた背景

デザイン完了後、FEエンジニアが実装を担当し、QAエンジニアがテストをしてくれるのですが、
要件定義〜デザイン段階で考慮漏れがあり、追加の実装やテストが何度か発生してしまいました。

実装中に気づくことも多少はあると思いつつ、
開発前にもう少し考慮漏れを減らせないかと思っていたところ、
はこてくMeetupにて他のチームが実例マッピングの事例について発表をしていました。

他チームの取り組みを共有いただける場があるのもHacobuのテック組織ならではです✨

実例マッピングの進め方

細かい進め方は異なるかもしれませんが、我々のチームではmiroを活用し、以下のフローで進めてみました。

1. 分割したストーリーを確認（大きめの機能開発の場合）
2. 議論するユーザストーリーの範囲の確認
3. 具体例（ユーザビリティ観点、テスト観点、実装観点、なんでも自由）を緑の付箋に記入
   1. 「こういう条件の時、◯◯はどうなりますか？」の質問形式で記入
      ※次のステップでも具体例の追記は可能なため一旦短めに
4. 議論しながらルール（仕様など）を決めていく
   1. 質問の回答は緑の付箋に記入
   2. 適宜具体例を追加
   3. 具体例を抽象化したルールを青い付箋に記入
   4. 未決定事項は赤い付箋に記入
5. 2~4を繰り返す

試しに規模の小さめな機能開発で実施

私が所属しているチームでは、前述の観点をもとにユースケースや懸念点などを洗い出し、それぞれの細かい仕様やUXの確認を行い、機能やUIの考慮漏れがないかを検討することにしました。

ただし、あまりにも大きな機能開発になると洗い出すまでに相当な時間がかかることから、まずは小さな機能開発を対象にしました。

結果、「やってよかった」の声が多数！

メンバーからは振り返り時に以下のような感想をいただきました。

• 実装観点、ユーザ観点、QA観点と様々な視点から意見が出るため新鮮
• QAのテスト前にテスト設計、動きの期待値などを開発メンバーやPdMとすり合わせているが、それを事前にできてよかった

個人的にも、例えばリファインメントの場では、時間の都合もあり全員が質問することはほぼないのですが、miroに書き出す行為であればその場の全員が疑問点などを気兼ねなく吐き出しやすいと感じました。

また、社歴の浅いメンバーからは、「そんな仕様は初めて知りました」「あの機能も実装前に実例マッピングを実施しておけばもっと開発がスムーズだったかも」という声をいただきました。

今後もブラッシュアップをしながら必要に応じて取り入れていきたいと思います。