画面遷移フローテンプレート

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

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

スクリーンフローテンプレートを使用して、ユーザーの体験を円滑かつストレスフリーにし、最初から最後までの新しい機会を見つけましょう。

あなたの作業をさらに発展させ、ユーザーエクスペリエンス（UX）デザインの領域に進み、画面ではなくテキストと記号を用いたフローチャートでユーザーのジャーニーを紹介したいとお考えの場合、User Flow Templateに興味をお持ちかもしれません。

読み進めて、画面フローの詳細を学びましょう。

画面フローとは何ですか？

画面フロー（またはワイヤーフロー）は、多画面のレイアウトをフローチャートのように接続し、顧客の意思決定ポイントと開始から終了までの動きをマップ化します。

ワイヤーフレームだけでは、インタラクティブなページごとのユーザーフローがどのようになるかのコンテキストを欠いています。UX フローはそのままではより抽象的であり、お客様が実際に何を見ているのかを示すことはできません。

ワイヤーフロー、もしくはスクリーンフローは、両方の方法の強みを組み合わせ、ユーザーが見るものが製品やサービスの体験にどのように大きな影響を与えるかを説明する手助けをします。

画面フローの使用時期

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

デザイナーは、必要に応じて画面フローを図示することができます…

• 欠落しているシナリオがないことを確認してください。 エンドツーエンドのジャーニーがマップされることで、顧客のニーズに適用されるすべての潜在的なユースケースを考慮することができます。

• ユーザーインタラクションを改善する: 登録、確認、ポップアップなど、フローのあらゆる機会を通じて顧客を理解しましょう。

• より良い部門横断的なコミュニケーションを構築: デザイナーと開発者を一緒にし、別々の画面ではなく全体の体験を考えることを奨励します。

• ステークホルダー教育に従事する: 顧客やチームがあなたの製品や体験を通じてどのように顧客が見ているかを考えたことがない場合、フローに従うことは顧客のペインポイントへの共感を築くことに役立ちます。

自分のスクリーン フローを作成する

画面フローの作成は簡単です。Miro のバーチャルコラボレーションプラットフォームは、作成して共有するための完璧なキャンバスを提供します。スクリーンフローテンプレートを選択して始め、次のステップに従って独自のものを作成してください。

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

ビジュアルシーケンスをマッピングする前に、解決すべきユーザーのニーズと課題を説明してください。これは、スクリーンフローの開始点を設定するための基盤です。

2. どの主要画面に何を表示するかを決定する

ジャーニーの始点と終点を考え抜いてください。ランディングページが必要ですか？登録フォーム画面？確認ページですか？プロセスの変更点や追加のステップを特定してください。たとえば、分割が必要なページや追加が必要な画面など。Miro は、ワイヤーフレーム作成ツールとして完璧で、ワイヤーフレーム ライブラリーには 15 を超える UI コンポーネントがあり、それらを簡単に画面フローに追加できます。

3. 画面を接続する

タスクを進めるために、ユーザーを前進させる矢印を各画面間に追加および移動し、Miro のコネクションライン ツールを使用します。また、意思決定ポイントを含めて、ユーザーに対して利用可能なすべてのインスタンスで何が起こるかを示すこともできます。

4. 画面フローをチームまたは関係者と共有してフィードバックを得ましょう

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

ユーザーフローの例を見つけて、次の大きなプロジェクトを構築しましょう。