画面フローテンプレート

画面フローテンプレートについて

画面フロー（「ワイヤーフロー」とも呼ばれます）は、ワイヤーフレームとフローチャートを組み合わせたものです。エンドツーエンドのフローは、各画面でユーザーが見るものと、それがプロダクトやサービスを通しての意思決定プロセスにどのように影響を与えるかをマッピングします。その情報を手にすることで、インタラクションデザインに関するあなたの決定をよりよく説明することができます。

ユーザーエクスペリエンスを開始から終了までスムーズでストレスフリーにする新しい機会を見つけるために、Screen Flow Template を使用してください。

作業をさらに進め、UXデザインの領域に入り込み、スクリーンではなくテキストやシンボルでユーザージャーニーをフローチャートとして表示したい方は、User Flow Templateがおすすめです。

画面フローについてもっと詳しく知りたい方は、このままお読みください。

画面フローとは？

画面フロー（またはワイヤーフロー）は、フローチャートのように接続された複数の画面レイアウトを組み合わせ、顧客の意思決定ポイントと移動を開始から終了までマッピングします。

ワイヤーフレームだけでは、インタラクティブなページごとのユーザーフローがどのように見えるかの文脈を欠いています。また、UXフローだけでは抽象的で、顧客が実際に何を見ているのかは示せません。

ワイヤーフローまたはスクリーンフローは、両方の手法の利点を組み合わせ、ユーザーが製品やサービスをどのように体験するかに大きな影響を与えることを理解するのに役立ちます。

スクリーンフローの使用タイミング

ワイヤーフレームは、UXおよび製品チームが、画面のセットではなく、顧客の旅を全体のフローとして考えるのを助けます。ワイヤーフローまたはスクリーンフローは、画面自体と顧客のサービスまたは製品とのインタラクションに焦点を当てます。

デザイナーがスクリーンフローをマップ作成する必要があるとき…

• シナリオの欠落を防ぐ: エンドツーエンドのジャーニーマップを示すことで、顧客のニーズに応じたすべてのポテンシャルなユースケースを考慮することができます。

• ユーザーインタラクションを改善する: フロー内のサインアップや確認、ポップアップなどの機会を通じて顧客をより深く理解します。

• 部門間のコミュニケーションを強化する: デザイナーや開発者を集めて、個々の画面ではなく全体の体験について考えることを促します。

• ステークホルダー教育を行う: クライアントやチームが、製品や体験を通して顧客が何を見ているかをこれまで考えたことがない場合、フローを追うことで顧客の困難点への共感を築く手助けとなります。

あなた自身のスクリーンフローを作成する

画面フローの作成は簡単です。Miro のバーチャル コラボレーション プラットフォームは、フローを作成して共有するのに最適なキャンバスです。スクリーン フロー テンプレートを選択して開始し、その後次の手順で自分だけのフローを作成します。

1. ユーザーストーリーを定義する

視覚的なシーケンスをマッピングする前に、ユーザーのニーズと解決すべき課題を記述してください。これが画面フローの出発点を設定するための基礎となります。

2. 主要画面で表示する内容を決める

旅の始点と終点について考えましょう。ランディングページが必要ですか？ 登録フォームの画面？ 確認ページ？ プロセスにおける変更や追加ステップを特定し、分岐が必要なページや追加が必要な画面を確認してください。Miroはワイヤーフレーム作成ツールとして最適で、ワイヤーフレーム ライブラリーには簡単に画面フローに追加できる15以上のUIコンポーネントがあります。

3. 画面を接続する

Miroのコネクションラインツールを使って各画面間に矢印を追加し移動させ、ユーザーがタスクを進めるための経路を作成しましょう。また判断点を含め、ユーザーが利用可能なすべてのインスタンスで何が起こるかを示すこともできます。

4. 画面フローをチームやステークホルダーと共有してフィードバックを得る

Miroのメンション機能を使用して、クイックフィードバックラウンドやデザインレビュー、クライアントとのライブワークショップセッションの前に、チームや個々の人々にタグ付けすることができます。また、メンバー招待ボタンをクリックすることで、Miroボードを誰とでも（既に登録していなくても）共有できます。

次のビッグプロジェクトを構築するために役立つユーザーフローの例をもっと見つけてみてください。

画面フローテンプレートに関するFAQ

UXにおける画面フローとは何ですか？

スクリーン フローは、ユーザーのインタラクションを分析するために役立ち、主に製品の画面に焦点を当てます。ワイヤーフレームとフローチャートの利点を組み合わせ、お客様の流れをより詳細に把握できるため、より良いユーザー エクスペリエンスを構築するためのデータを得ることができます。