今回は、ユーザーストーリーについていろんな方面から意見を聞いて勉強したのでまとめていきます。ちょうどプロジェクトでもユーザーストーリーを作成する機会があったので一月ぐらいの勉強まとめも兼ねています。新米フロントエンドエンジニアが一歩ずつ学ぶシリーズ

初めに

どもども！お久しぶりです。ちょっとプロジェクトが忙しくてブログを書く時間の捻出に悩んでいる龍ちゃんです。仕事が忙しくなることを見越して、炊き込みご飯を炊いていた土日の僕は偉いなと思いながら、炊き込みご飯を食しています。

直近では、仕様書や実装の作業でてんやわんやしています。実際に自分で作るのは勉強にもなって素晴らしいですね。やはり、作ったことのないものを作るのは障壁がいっぱいあるので、周りの先輩方の意見や神上司の意見で補正をしています。ユーザーストーリーで一つ合格の出るものができたので、ブログにまとめていこうと思います。

はい！今回は『ユーザーストーリー』の話になります。プロダクトを作るにあたって必要な仕様書の一つになります。僕がプロジェクトで関わっている中で作成している仕様書は以下になります。

• ユーザーストーリー
• ワイヤーフレーム
• 画面仕様書

プロジェクトの初期は『ワイヤーフレーム』の作成のみでしたが、PoCから本番リリースへの話に移行するということで、仕様書の作成が持ち上がりました。それ以外についてもそのうちブログにまとめていきますが、今回は『ユーザーストーリー』についてです。

それでは、初めて行きましょう。

ユーザーストーリー

僕がユーザーストーリーを作っていく上でたどった脳内をブログのプロットとしてまとめていきたいと思います。ブログの冒頭でも書きましたが、プロジェクトの初期ではワイヤーフレームしか作っていませんでした。先輩社員と雑談していた際に聞いた話では、「プロジェクトをきれいに進めていくためには、ユーザーストーリーを作ってから導線を整理して、ワイヤーフレームを作成して、それを画面仕様書に落とし込むと良い」とのことでした。実際にこの導線で作らなかった影響として以下のことがありました。

もうこれがメインですね。一人で作業している分には全く必要ないのですが、デザイン作成者と実装者が異なる場合ではこのミスがえぐいぐらいダメージになります。というか実際になりました。ダメージに気づいてから実験的に『ユーザーストーリー』を作成し始めました。そこから先輩社員の面談時間を確保して、神上司とPMにレビューを依頼して、修正×5ぐらい重ねてひとまず終了という形になりました。

ユーザーストーリー何それ？（実験的なユーザーストーリー）

さて、ここでは僕が作成していた実験的ユーザーストーリーを提示していこうと思います。さすがにプロジェクトで作成した成果物をそのまま乗っけるわけにもいかないので新しく作成していきます。

さすがに一からプロジェクトを立てるのも大変なので、『飲み屋の情報共有』をベースにユーザーストーリーを構築していきます。基本コンセプトは「呑兵衛がふら～っと飲みに行ける店をすぐ見つけることができるサイト」になります。このフェーズで書いていたもの二関して言えば、ユーザーストーリーというよりお客さんの要求を言語化したものを書いていました。イメージとしては以下の内容です。

• ジャンルでお店を検索したい
• オプションでお店を検索したい
• 地域でお店を検索したい
• 気になったお店を保存して気になるリストを表示したい
• お店がやっているかどうかを一目で判断したい

「～したい」という書き方であったこともあり、ほぼ要求を整理していただけにも感じています。これを最初メモ書き程度にFigmaに張っていたら、PMに見つかって本格的に作成が決定しました。

ここから僕が勉強した内容の共有になります。

ユーザーストーリーに必要な観点

さて、いざユーザーストーリーを作ろうと初めてもどれが正解かわかりませんでした。ということで、社内のデザイナーにHELP要請を出してユーザーストーリーの校閲を依頼しました。意見を頂いている社内デザイナーの方は、褒めから入ってワンポイントアドバイスを頂けるので自己肯定感も上がりながら技術的にも向上するという最高な方です。その話の中でユーザーストーリーに必要な観点の情報を頂けたので以下にまとめます。

各項目について紹介していきます。『網羅性』については、成果物の源流になります。サイトでできることをすべて書き出します。最初に書いた内容としては何がしたいという欲求ベースから、サイトで叶えることができる機能レベルまで落とし込んでいきます。

『ユーザーの前提』については、操作するユーザーの前提がどうかという話です。かなえたい欲求を持っている人を想像するというのが肝となります。何を知りたいかを想像しながら書くと良いようです。例えば『ユーザーの登録を行いたい』などの前提などです。これはペルソナの分析にも近い部分があるかと思います。ゆっくり時間がある場合においては、ペルソナを作ってしっかりと分析しましょう。

『ユーザーの感情』については、『ユーザーの前提』に近い部分ですがトピックとして独立したほうが良かったので書きました。ユーザーの感情では、『会社で必要な請求書類の期限が明日だから、早く確認したい』という前提とセットに考えると良いそうです。『早く確認したい』という焦りの感情があるユーザーの気持ちをUI/UXに反映させることができるようになります。感情をベースにUX改善というのはとても良いですね。

ユーザーストーリーサンプル

お客さんからの依頼で作成するプロダクトと違って、自分で開発するプロダクトはユーザーの前提を作るのがすごく難しいことがわかりましたね。これは妄想力が問われます。心の中の酒飲みと対話しながらユーザーストーリーを作成してみました。

終わりに

お疲れ様です。最近はコーディングしている時間よりも仕様書を作っている時間のほうが長いです。仕様書だと文章を書くこともあるのですが、ひと段落してブログを書こうとすると手が止まってしまうことに気づきましたね。早くコーディング＋ブログの生活に戻りたいです。ここまでは完全に愚痴ですね。

さて、今回は『ユーザーストーリー』について書いてきました。冒頭でも話しましたが、プロジェクトが進むにつれてあるのとないのでは影響が大きいものなのだなと思いましたね。うまい活用法についてはこれから吟味するところです。ワイヤーフレームを作る作業よりも前にあると、情報設計の観点からも役に立つのではと思っています。

ではまた～

RyosukeTanaka