ユーザーフローテンプレート
創造的なソリューションのための条件を育むことで、UX や製品チームがユーザー体験を向上させるのを支援します。
ユーザーフローテンプレートについて
ユーザーフロー ダイアグラム（インタラクションやタスクフロー ダイアグラムとも呼ばれます）は、視覚的なステップバイステップのマッピングプロセスであり、ユーザーがあなたの製品や体験を通じてタスクを完了したり、目標を達成するための行動を概説します。
ユーザーフロー ダイアグラミングは、ユーザーが選択したパスの質や体験を解釈するのに役立ちます。このフローは、ユーザーがタスクを完了するために選んだステップ数や、製品やサービスとやり取りして問題を解決する際に選択する経路を明らかにすることもできます。
ユーザーフロー ダイアグラムが特定の製品をユーザーがどのように移動するかに焦点を当てる一方、スクリーンフロー テンプレートはワイヤーフレームスタイルのページレイアウトをフローチャート形式で提示します。
ユーザーフロー ダイアグラムとは何ですか？
ユーザーフロー ダイアグラムは、UX や製品チームがシステムとやり取りする際にユーザーが取るべき論理的なパスをマッピングするのに役立ちます。ビジュアルツールとして、ユーザーフロー ダイアグラムは、ウェブサイトやアプリの機能、ユーザーが取りうる可能なアクション、およびユーザーの判断が生む結果との関係を示します。
ユーザーフローの主な要素は次のとおりです。
開始点または終了点: フローがどこから始まり、どこで終了するかを明確に示します。
プロセスまたはアクション: ユーザーが取るステップを示します。例えば「ログイン」や「購入」などです。
意思決定ポイント: ユーザーが選択を迫られるタイミングを示します。
矢印: 彼らは、ユーザーがした決定に基づいてどこに進むかを示します。
既存のユーザー体験がどのように顧客のコンバージョン率向上に繋がるかを評価または改善しようとしている場合は、ユーザーフローを試してみてください。
このプロセスは、ユーザーを念頭に置き、購入やニュースレターへの登録、無料トライアルの選択など、ビジネスの目的を特定するのに役立ちます。
ユーザーフロー テンプレートを使用するタイミング
ユーザーフローダイアグラムは以下を支援できます。
直感的なインターフェイスを構築する:フローはユーザーにとって移動が容易で、効率よく使え、直感的なものですか？
既存のインターフェイスが目的に合っているか決定する: うまくいっていることは？うまくいっていないことは？改善が必要なことは？フローはシームレスで理にかなっていますか？
製品フローを社内チームやクライアントに提示する:デザインチームは、顧客が購入時、登録時、ログイン時に何を言ったりしたりするのかを見ることができますか？クライアントは一歩一歩の概要を得て、あなたのビジョンに一致させることができますか？
ユーザーフローを作成する、または再作成する際には、あなた自身とチームに問いかけましょう。
ユーザーは何をしようとしているのですか？
ユーザーにとって重要なことは何か、そして継続する自信を与えるのは何か？
ユーザーが成功するためにどんな追加情報が必要ですか？
ユーザーがタスクを完了する上での不安や障害は何ですか？
ユーザーフローマップは、デザイナー（およびそのチームやクライアント）が、複雑なプロセスをマッピングする際にも、ユーザー中心の視点を保つのに役立ちます。
デザイナーとして、ユーザーフローダイアグラムを使用して、ウェブサイトやアプリのページ、画面、またはサーフェスをどのようにデザインするかを決定し、含めるコンテンツやナビゲーションタスクを再配置できます。
独自のユーザーフローダイアグラムを作成する
独自のユーザーフローを作成するのは簡単です。Miro のビジュアルワークスペースは、ダイアグラムを作成して共有するのに最適なキャンバスです。ユーザーフローテンプレートを選択し、自分のものを作るために次のステップを踏みましょう。
ビジネス目標とユーザーの目標を決める。
ユーザーにたどり着いてほしい場所を見極める。すでに持っていない場合（または更新が必要な場合は）、カスタマージャーニーマップを使って、顧客体験の共有ビジョンを作成しましょう。すべてのチームメンバーは、製品やサービスとのあらゆる可能な接点で顧客の感情を共有して理解することで利益を得ることができます。ユーザーへの共感を築くことで、ユーザーフロープロセスのすべてのステップに役立ちます。
ビジターがどうやってあなたのウェブサイトを見つけているかを発見する。
あなたの製品やサービスを、直接トラフィック、自然検索、広告、ソーシャルメディア、紹介リンク、メールなどを通じて見つけていますか？これらのポイントは、あなたのユーザーフローダイアグラムの出発点となります。
ユーザーが必要とする情報とそれを必要とするタイミングを見つけ出す。
ユーザーは適切なタイミングで必要な情報を提供されるとコンバージョンします。したがって、顧客がデジタルタッチポイントから何を求めているのか、またどのように感じているかを考慮してください。エンゲージメント—例えば、チャットボットとのやり取り—も依然として潜在的な成功指標であり、最終購入に結びつけることだけが重要ではありません。
ユーザーフローを図式化。
既存の図形と矢印をユーザーフローテンプレートから編集して、前のステップで得られたユーザーリサーチに適応させることができます。顧客が最初の接点を見つけた後、次に何をしますか？タスクを完了するまでに何ステップ必要ですか？テンプレートの基本的なユーザーフローを使用して、自分自身のフローを描き始めましょう。タッチポイントやドロップオフ、コネクターラインの矢印の向きを変更して、ユーザーフローダイアグラムにより適合させましょう。
チームからのフィードバックを得ましょう。
チーム、クライアント、またはクロスファンクショナルな関係者を招待して、Miroのボードを閲覧してもらいましょう。付箋や@メンションを使用して、非同期でフィードバックを残すことを選択でき、ピアレビューに活用できます。Miroのボードでビデオ通話に参加し、ノートテイカーの役割をチーム内から誰かに割り当てることもできます。チームから十分な意見を得たら、それに応じて調整を行いましょう。
他のステークホルダーやクライアントと共有し、必要に応じて繰り返し調整を行いましょう。
ユーザーフローは、顧客の態度や動機が変化するにつれて変わっていきます。それに応じて適応し、ユーザー中心のままでいましょう。
ユーザーフローの例とは何ですか？
イベント用のウェブサイトを開発していると想像してください。ユーザー体験を向上させたい場合は、イベントの登録からチケットの購入までのすべての必要な手順を明確に定義する必要があります。 まず、顧客の動向を追跡し、彼らがイベントのチケットを購入するまでの旅程の始まりを特定することから始めることができます。ユーザーフロー図は、顧客が購入を完了するまでの流れ（ウェブサイトにおける最終目標）を、登録から支払いページまでを一目で把握できるように可視化します。
このテンプレートで作業を開始する
忠実度の低いワイヤーフレーム テンプレート
活躍するシチュエーション:
デスクリサーチ, 製品管理, ワイヤーフレーム
サイトを設計したりアプリを作成したりする際、初期段階では全体像を把握し、大きなアイデアを伝えることが重要です。忠実度の低いワイヤーフレームは、それを見て実行することを可能にします。これらの大まかなレイアウト（ナプキンにスケッチしたもののデジタル版と考えてください）は、あなたのチームやプロジェクト関係者がデザイン会議がユーザーのニーズに合っているかどうかをすぐに判断するのに役立ちます。テンプレートを使うことで、会議やワークショップ、プレゼンテーション、批評セッションでワイヤーフレームを簡単に使用できます。
ウェブサイト用フローチャートテンプレート
活躍するシチュエーション:
Flowcharts, Mapping, User Experience
サイトマップとしても知られるウェブサイト用フローチャートでは、現在または今後作成するウェブサイトの構造や他のページのマッピングができるようになります。また、フローチャートを使用すれば、チームは今後のコンテンツに関して把握している情報の差を明らかにすることができます。ウェブサイトを構築する際に、ウェブコンテンツに関連するキーワードに基づいて、各コンテンツがユーザーに正確な検索結果を提供できるようにする必要があります。プロダクトチーム、UX チーム、コンテンツチームは、フローチャートやサイトマップを使用して、ウェブサイトに含まれる内容をすべてを理解し、コンテンツの追加や再構築を計画して、ウェブサイトのユーザーエクスペリエンスを向上させることができます。
プロトタイプ テンプレート
活躍するシチュエーション:
UX デザイン, デザイン思考
プロトタイプは、製品の構造、ユーザーフロー、ナビゲーションの詳細（ボタンやメニューなど）を定義するライブモックアップで、ビジュアルデザインのような最終的な詳細にこだわることなく作成されます。プロトタイピングにより、ユーザーが製品やサービスをどのように体験するかをシミュレーションし、ユーザーのコンテキストやタスクフローをマッピングし、ペルソナを理解するためのシナリオを作成し、製品に対するフィードバックを収集することができます。プロトタイプを使用することで、プロセスの初期段階での障害を見つけることによってコストを節約できます。プロトタイプは様々ですが、一般的には矢印やリンクで接続された一連のスクリーンやアートボードを含みます。
アプリワイヤーフレーム テンプレート
活躍するシチュエーション:
UX デザイン, ワイヤーフレーム
アプリの作成を開始する準備はできましたか？機能する様子やユーザーがどのように操作するかを想像するだけではなく、ワイヤーフレームにそれを示させてください。ワイヤーフレームは、各画面の基本レイアウトを作成するための手法です。ワイヤーフレームを作成すると、理想的にはプロセスの早い段階で、各画面がどのような役割を果たすかを理解し、重要なステークホルダーからの合意を得ることができます。これにより、デザインやコンテンツを加える前に、時間とコストを節約できます。ユーザーのジャーニーを考えることで、より魅力的で成功する体験を提供することができます。