https://goodpatch.com/blog/mvp-ui-spec

新規事業などでスピード感を持って開発を進めたい場合や、価値検証のためのMVP（Minimum Viable Product：価値提供可能な最小限のプロダクト）を開発する場合は、必要な機能から優先的に開発したり、開発を進めながら仕様を変更していくことが求められます。このようなアジャイル開発において、仕様書をどのように作成すれば良いか悩む方は多いのではないでしょうか。

この記事では、ユーザー体験を軸に仕様を定義し、スピーディーに開発を行っていくための仕様書「UI Spec」の内容とGoodpatchのプロジェクトでの活用例をご紹介します。

ユーザー体験を軸にした開発仕様書「UI Spec」

UI SpecとはUI Specification（ユーザーインターフェース仕様）の略です。一般的な仕様書は画面ごとに機能要件を記述するのに対してUI Specが異なる点は、ユースケースをベースにしている点です。

ユースケースとは ユーザーが実際にどのようにサービスを使用するかを示したものです。「ユーザーがプロフィール情報を入力する」など、誰が・なにを・どうするかを端的にまとめて整理します。このユースケースをベースに仕様書をかくことでユーザー体験をベースにした開発を実現しました。

UI Specには以下のような利点があります。

• ユースケースをベースにするので機能単位で仕様が分散せず、ユーザーに届けたい価値の共通認識を持って開発を進めることができる
• ユースケースに対して優先順位をつけることで、ユーザーにとって必要な機能をもったプロダクトを素早く開発できる

また、UI Specは開発途中での仕様の追加や変更を前提にしています。開発中に生じた変更点や変更理由をUI Spec上に追記することで、仕様がなぜ・どのように変更されたかをチーム内で共有することができます。そのため、UI Specは単なるドキュメントとしてだけではなく、デザイナーやエンジニアのコミュニケーションを記録するツールとしても有用です。

スプリントが終了して次のスプリントに進むタイミングや、ある程度プロダクトが完成しチーム内でレビューを行う際、UI Specを参照することでユースケースに沿って実装されているかを確認することができます。

Goodpatchのプロジェクトでの活用例

ここからは、Goodpatchのデザインパートナー事業で実際にUI Specを用いてアジャイル開発を行った事例をご紹介します。

今回ご紹介するのは、新規サービスの開発をリサーチ・企画からデザイン、開発まで一貫して支援するプロジェクトです。

今回のプロジェクトでは、以下の手順でUI Specの作成し開発を行いました。

1. 1. ユースケースを作成（UXデザイナー） ユーザーがどんな目的で行動し、その結果どのような反応や状態になるのかという一連の体験の流れをシナリオ化した後に、ユースケースを洗い出しました。この後の工程の基礎となるため、時間をかけて定義していきます。
   2. プロトタイプを制作（UIデザイナー） 1で作成したユースケースを元にオブジェクトモデリングを行い、プロトタイプを作成。また、この段階でユーザーテストを行い、プロトタイプの質を高めることに取り組みました。 参考：オブジェクトモデリング入門編！SmartHRでOOUIワークショップを開催しました
   3. 開発の優先順位づけ（UXデザイナー・UIデザイナー・エンジニア） 提供したい価値やユーザーニーズの優先度も考慮しながら、ユースケースごとに開発優先度を決定。見積もり時に開発コストを考慮し、場合によってはユースケースをさらに分割しました。
   4. UI Specを作成（UXデザイナー・UIデザイナー） ユースケースとプロトタイプを合わせてUI Specを作成。UI画面上の細かい仕様をUI Specの項目に沿って定義していきました。
   5. UI Specレビュー（UXデザイナー・UIデザイナー・エンジニア） 作成したUI Specをチーム全員でレビュー。エンジニア視点で考慮が必要な観点はここで補足しました。
   6. スプリントプランニング（エンジニア） 決定した優先順位を元にスプリントを計画。優先順位をつけた後に技術的観点や工数的観点をもとに対応順の調整も行いました。
   7. スプリント開始（エンジニア） スプリント計画に沿って実装を開始。

UI Specの作成例