ユーザー体験（UX）を向上させる画面とフロー図の作り方とは？ウェビナーレポート
TAMのUX/UIチームが「新サービスの体験（UX）を向上させる画面とフロー図の作り方」WEBセミナーを開催しました！
「企画（アイデア）まで出来たが、よりよいユーザー体験にする方法がわからない」
「形にしてみたが企画でイメージしていたユーザー体験がうまく提供できていない」
という課題をお持ちの方へ向けて、サービスの提供価値をユーザー体験から「見える形」にしていくフローや、提供価値をより向上させていくために実際どんなことを行なっているのかを、参考例を用いて詳しくご紹介しました！
スピーカー
三内 徹
TAM UX/UIチーム リーダー/プロジェクトマネージャー
2008年よりTAMに在籍。大阪ガス、京セラ、ヤンマーなどの企業サイトやアプリのプロジェクトを多数担当。
ユーザー行動の図解からの課題抽出、プロトタイプによる仮設検証など、UX（ユーザー体験）を重視したプロジェクトの設計・遂行を行っています。
今回のウェビナーでのアプリ事例について
今回は、画面や遷移図の作り方を、一般の「ランニングの計測アプリ」を例にしながらお話いたします。（※TAMの事例ではありません。）
ここでの「ランニングアプリ」の前提
1. サービス利用の行動ステップを書き出す
ランニングアプリの利用の流れは、下記の通り。
いろんな状況を想像して行動ステップを作っていくのですが、この作業が意外と大変。
１からステップを考えるとなると「どういうステップがあるんだろう？」「どうやって書き出していけばいいの？」という疑問が出てきます。
そんな時は、そのアプリ（今回で言うとランニング計測アプリ）に、近いサービスを使ったことがある人にヒアリングをして、実際の行動を振り返ってもらうことが大切です。
そして、細かいフローを初めから書いていくのもいいのですが、まずは大きなフローをざっくりと書いていくことが重要です。
大きいフローを書いていくことで全体像を捉えることができます。
また、アプリの提供価値「ユーザーにランニングを継続させる」というゴールに対して、ユーザーの気持ちの変化が起こるステップがあります。
例：初回のランニング結果を見る→ユーザー「意外と走れてる！」→次へ
行動ステップとしてどういったものを書き出すか迷った時は、ユーザーの気持ちの変化が起こって、「ランニングを継続させる」というゴールに一歩ずつ近づけるような行動を区切りとして書き出していきましょう。
2. 各ステップでユーザーの気持ちを書き出す
1で書き出したステップに、ユーザーの気持ちをイメージしながら書き出していきます。
気持ちを書くことで、その状況下での課題・必要条件を想像しやすくなります。
ここで書き出す気持ちは、ポジティブ・ネガティブどちらでもOKです。
ポジティブな気持ちははアプリがそうあるために必要な機能、ネガティブな気持ちはそうならないために必要な機能・画面を考えていくためにあります。
カスタマージャーニーマップの作成とほぼ同じですね！
3. 必要となる画面や機能を書き出す
ユーザーの行動と気持ちを書き出した後に、実際に必要な画面と機能を書いていきます。
そうすることでユーザーの状況がよりリアルにイメージでき、課題や必要条件が見えやすくなります。
画面や機能を書き出さないまま進めてしまうと、ユーザーがどういうところに困っているのかがイメージしづらくなるとのこと。
4.ユーザーが次のステップに進むため、画面や機能に求める条件を書いていく
必要となる機能や画面を洗い出したところで、画面や機能に求める条件（UI条件）を書いていきます。
ここでの条件とは、”各行動ステップを進むために必要な条件”のことを指します。
例えば、ユーザーが初期設定を終えて次に進むためには、初期設定が簡単ではないといけませんよね。簡単だったからこそ次のステップに進む。そういうところを条件とすることが大切です。
こういうことがあったからこそ次に進む、といった前提の条件を書き出していくことで、UIや機能に対して必要なものを想定しやすくなります。
ユーザーの気持ちをベースに、この画面の時にはこの条件が必要だな、ということをイメージしながら書き出していきましょう！
今回はある程度アプリの提供価値（ゴール）が見えた上で書き出しているので上記のように出来上がっていますが、全く新しいサービスではどんなサービスモデルなのかわからないまま作っていかなければならないこともあります。
そういう時は、
を想像して、利用前と利用後のモチベーションが各経過を通すことで、ゴールに辿り着くことができるのかを行動の大きな流れとして検証すると良いとのこと。
ここまでが主要なユーザーの行動・画面・必要な条件の洗い出しをする工程になります。
いろいろ出てくる機能はブレストも込みで書き出すので、必要不必要・優先度が高いか低いかの設定は後から行います。一旦一通り洗い出したあとで、画面や機能に求める条件の優先順位を考えているのだそうです！
5.ユーザー行動に画面フローを追加する
次に、必要となる画面や機能を、ユーザーの行動ステップの中に書き出します。
書き出していた画面や機能で共通するものがある場合は１つのグループにしておきます。（ここでいうと、オレンジの色わけがグループになります）
6.画面遷移図を作成する
ここでようやく今まで作成していたものを遷移図に変更していきます。
以上のことに気をつけながら、実際にユーザーが使う流れがわかるように、より製品に近いイメージを持てるような遷移図を作っていきます。
画面の詳細を含めたユーザーフロー（画面遷移）はどんどん複雑に、大きくなっていきます。
でも、一画面にまとめた方がユーザーのストーリーがわかりやすいですよね。
そこで、UX/UIチームでは、画面遷移図作成ツール「Overflow」を利用しています。
「Overflow」を使った画面遷移の書き方については、デザイナーの萩原がnoteで詳しく紹介しています！
▶︎ チームデザイナー御用達！画面遷移図作成ツール『Overflow』【応用編】
各行動ステップの詳細設計はどうするの？
“初回のランニングを記録する”という行動ステップにフォーカスして、細かい画面作成についてお話しします。
“ランニングを記録する”という行動ステップを細分化。ランニングを記録する際のユーザーの行動を書き出していきます。
そしてユーザーの気持ち、必要となる画面の要素・機能、それらを書き出した後に画面や機能に求める条件をさらに追加していきます。
また、画面の要素や機能をユーザーの行動の中に書き込んでいき、図にしていきます。
大きな流れの中で行なっていたことと同じですね！他の画面も同様に進めていくとのこと。
まとめ
今回はサービスのユーザー体験を向上させる「画面」「画面フロー」の作り方を紹介しました。
大きな流れとしては以下となります。
ただ単に画面や画面遷移を描いていくと、ユーザーの条件や課題が抜け落ちがちです。
ユーザーの行動や気持ちを軸に進めることで、ユーザー体験をより向上させるようなアイデアの検証や施策を行うことができるのですね！
こちらのセミナーの内容は、UX/UIチームのブログでも詳しく掲載されています！
▶︎ 新サービスのユーザー体験を向上させる「画面」「フロー図」の作り方
他にもUX/UIに関する知見や、チームの日常が盛りだくさんのブログとなっておりますので、是非ご覧になってみてくださいね！
