ストーリーで書くことで見えてくるもの 〜ラフ画面から基本設計へ〜

こんにちは、スマートコンテンツ事業部の天野です。
今日は、私が OKR として進めている「開発リーダー育成」取り組みの中から、 要件定義・基本設計に関する事例を紹介します。

※この記事は「エムティーアイ Blog Summer 2025」の 8/21 分の記事です。

機能一覧・ラフ画面から基本設計へ

新しいアプリをゼロから作る機会は多くないかもしれませんが、 OKR では 「新規 WEB アプリを作る」 という想定で、ビジネス側から渡された要求定義・ラフ画面を元に、要件定義〜基本設計をどう進めていくかを学んでいます。今回はその中で、基本設計にあたる 「画面定義」「ER図」 へつなげていくプロセスを題材にします。

題材:小児生活習慣病予防アプリ

OKR では擬似案件を立てています。今回の題材は、小児生活習慣病予防のためのWEBアプリ。例えば以下のようなラフ画面を元に、シナリオを作成していきました。インプットはラフ画面と(カスタマージャーニー型で検討した)機能一覧となります。

(この画面は「小児生活習慣病予防健診結果の取り込み・入力のいずれかを選択できる」「まだ健診を受けていなユーザに対し小児生活習慣病予防健診についての説明を提供する」役割を持ちます)

ストーリーとしてのシナリオ

画面を見ながら、「ユーザになりきって」まるで物語を描くようにシナリオを記述していきます。

※ この文字色は必要となる画面機能を示します. .
※ この文字色は必要となる情報を示します. .
(「xxxさんは「脂肪少し多めタイプ」です」の部分は実装しないこととしました).
(この際、システムの動きも書いておくと良いです。)

  • ユーザ:下部にあるグラフのアイコンをクリックした
  • システムログインユーザ健診結果を取得。データが0件なので健診結果取り込み初期画面を表示する.
  • ユーザ:(グラフアイコンをタップしたところ)健診結果取り込み初期画面が表示された。 健診機関からもらった QR から取り込む機能と自分で入力する機能それぞれについて説明書があり、「健診結果を取り込む」をクリックすると QR 読み込みのためカメラアイコンが表示される。「健診結果を入力する」をクリックすると健診結果を自分で入力する画面へ遷移するようだ。 その下には小児生活習慣病予防健診についての説明が記載されており、健診が受けられる健診機関検索できる画面へのリンクがついている。 ここから検索できる健診機関で生活習慣病予防検診を受けると QR で結果がもらえるということなんだろう。近くに健診を受けられる施設があるか検索してみよう。

ストーリーだからこそ気づけたこと

上記シナリオで、ラフ画面にない UI についての言及があることに気づきましたでしょうか?

まだ健診を受けたことがないユーザだったら、
健診についての説明だけでなく健診を受診できる近くの健診機関を検索したいであろう.
ことが考えられていますね。

もし、画面要素を箇条書きで記載していったら、ラフ画面にある要素以外に必要なものが見つけにくくなります。箇条書きは仕様の整理には便利ですが、「ユーザがどう動くか」「どこで何を感じるか」という文脈を落としがちだからだと考えられます。

OKR ではこのシナリオの記述をメンバーに実施してもらいましたが、数回のシナリオ検討で要求定義時に提示したラフ画面にいくつも画面を追加すべきであること、 UI コンポーネントもだいぶ変更が必要であることがわかりました。

ストーリーで仕様を考えるなんて途方もない時間がかかりそうに思えますが、意外にも短時間に驚くほど改善要素をだすことができます。 楽しさが加わるという利点もあります ♪
皆さんも機会がありましたらぜひ、やってみてください。

最後までお読みいただき、ありがとうございました。