画面遷移フローテンプレート
ユーザーフローのビジュアル画面コンポーネントを検証します。
画面フローテンプレートについて
画面フロー（「ワイヤフロー」とも呼ばれる）は、ワイヤーフレームとフローチャートの組み合わせです。エンドツーエンドのフローでは、各画面でユーザーが見るものをマップし、それが製品やサービスを通じた意思決定プロセスにどのように影響するかを示します。その情報を手にしたことで、インタラクションデザインに関するあなたの決定をより良く説明できます。
スクリーンフローテンプレートを使用して、ユーザーの体験を円滑かつストレスフリーにし、最初から最後までの新しい機会を見つけましょう。
あなたの作業をさらに発展させ、ユーザーエクスペリエンス（UX）デザインの領域に進み、画面ではなくテキストと記号を用いたフローチャートでユーザーのジャーニーを紹介したいとお考えの場合、User Flow Templateに興味をお持ちかもしれません。
読み進めて、画面フローの詳細を学びましょう。
画面フローとは何ですか？
画面フロー（またはワイヤーフロー）は、多画面のレイアウトをフローチャートのように接続し、顧客の意思決定ポイントと開始から終了までの動きをマップ化します。
ワイヤーフレームだけでは、インタラクティブなページごとのユーザーフローがどのようになるかのコンテキストを欠いています。UX フローはそのままではより抽象的であり、お客様が実際に何を見ているのかを示すことはできません。
ワイヤーフロー、もしくはスクリーンフローは、両方の方法の強みを組み合わせ、ユーザーが見るものが製品やサービスの体験にどのように大きな影響を与えるかを説明する手助けをします。
画面フローの使用時期
ワイヤーフレームは、UXおよびプロダクトチームが顧客の旅を画面の集合ではなく、全体のフローとして考えるのに役立ちます。ワイヤーフローまたはスクリーンフローは、画面自体とサービスや製品に対する顧客のインタラクションに焦点を当てています。
デザイナーは、必要に応じて画面フローを図示することができます…
欠落しているシナリオがないことを確認してください。 エンドツーエンドのジャーニーがマップされることで、顧客のニーズに適用されるすべての潜在的なユースケースを考慮することができます。
ユーザーインタラクションを改善する: 登録、確認、ポップアップなど、フローのあらゆる機会を通じて顧客を理解しましょう。
より良い部門横断的なコミュニケーションを構築: デザイナーと開発者を一緒にし、別々の画面ではなく全体の体験を考えることを奨励します。
ステークホルダー教育に従事する: 顧客やチームがあなたの製品や体験を通じてどのように顧客が見ているかを考えたことがない場合、フローに従うことは顧客のペインポイントへの共感を築くことに役立ちます。
自分のスクリーン フローを作成する
画面フローの作成は簡単です。Miro のバーチャルコラボレーションプラットフォームは、作成して共有するための完璧なキャンバスを提供します。スクリーンフローテンプレートを選択して始め、次のステップに従って独自のものを作成してください。
1. ユーザーストーリーを定義する
ビジュアルシーケンスをマッピングする前に、解決すべきユーザーのニーズと課題を説明してください。これは、スクリーンフローの開始点を設定するための基盤です。
2. どの主要画面に何を表示するかを決定する
ジャーニーの始点と終点を考え抜いてください。ランディングページが必要ですか？登録フォーム画面？確認ページですか？プロセスの変更点や追加のステップを特定してください。たとえば、分割が必要なページや追加が必要な画面など。Miro は、ワイヤーフレーム作成ツールとして完璧で、ワイヤーフレーム ライブラリーには 15 を超える UI コンポーネントがあり、それらを簡単に画面フローに追加できます。
3. 画面を接続する
タスクを進めるために、ユーザーを前進させる矢印を各画面間に追加および移動し、Miro のコネクションライン ツールを使用します。また、意思決定ポイントを含めて、ユーザーに対して利用可能なすべてのインスタンスで何が起こるかを示すこともできます。
4. 画面フローをチームまたは関係者と共有してフィードバックを得ましょう
Miroのメンション機能を使用して、チームや個々の人物をタグ付けし、迅速なフィードバックラウンド、デザイン批評、クライアントとのライブワークショップセッション前のレビューを行うことができます。Miro ボードは、メンバーを招待 ボタンをクリックすることで、登録していない人も含めて誰とでも共有できます。
ユーザーフローの例を見つけて、次の大きなプロジェクトを構築しましょう。
Miroの画面遷移図テンプレートの特徴は何ですか？
画面遷移図テンプレートはオンラインで作成することができ、各画面の取捨選択や、画面同士の流れの構築や変更が何度も行えることが特徴です。Miroのワイヤーフレームテンプレートを使用することで、インスピレーションを得ながら簡単に画面遷移図を完成させることができます。また関係者やチームとの共有も簡単に行えるため、Miroのメンション機能やコメント機能を活用して、簡単なフィードバックや意見交換が行いやすく、効率的に全体の改善プロセスを進めることができます。
忠実度の低いワイヤーフレーム テンプレート
活躍するシチュエーション:
デスクリサーチ, 製品管理, ワイヤーフレーム
サイトを設計したりアプリを作成したりする際、初期段階では全体像を把握し、大きなアイデアを伝えることが重要です。忠実度の低いワイヤーフレームは、それを見て実行することを可能にします。これらの大まかなレイアウト（ナプキンにスケッチしたもののデジタル版と考えてください）は、あなたのチームやプロジェクト関係者がデザイン会議がユーザーのニーズに合っているかどうかをすぐに判断するのに役立ちます。テンプレートを使うことで、会議やワークショップ、プレゼンテーション、批評セッションでワイヤーフレームを簡単に使用できます。
アプリワイヤーフレーム テンプレート
活躍するシチュエーション:
UX デザイン, ワイヤーフレーム
アプリの作成を開始する準備はできましたか？機能する様子やユーザーがどのように操作するかを想像するだけではなく、ワイヤーフレームにそれを示させてください。ワイヤーフレームは、各画面の基本レイアウトを作成するための手法です。ワイヤーフレームを作成すると、理想的にはプロセスの早い段階で、各画面がどのような役割を果たすかを理解し、重要なステークホルダーからの合意を得ることができます。これにより、デザインやコンテンツを加える前に、時間とコストを節約できます。ユーザーのジャーニーを考えることで、より魅力的で成功する体験を提供することができます。
オンライン スケッチ テンプレート
活躍するシチュエーション:
UX デザイン, デスクリサーチ, デザイン思考
有望なアイデアを全速力で進める前に、どのように機能するか、また目的をどれだけ達成できるかを知るために、高い視点から見てみましょう。それが、スケッチの役割です。このテンプレートは、プロトタイプの初期段階における強力なリモート コラボレーション ツールを提供します。ウェブページやモバイルアプリのスケッチ、ロゴのデザイン、イベントの計画のいずれでも活用できます。その後、スケッチをチームと簡単に共有し、変更するたびに各段階を保存することができます。
ウェブサイト ワイヤーフレーム作成テンプレート
活躍するシチュエーション:
ワイヤーフレーム, ユーザー エクスペリエンス
ワイヤーフレームは、構造レベルでウェブサイトを設計するための方法です。ワイヤーフレームは、各ページ上のインターフェイス要素を表すウェブページのスタイライズされたレイアウトです。このワイヤーフレーム テンプレートを使用して、ウェブページを迅速かつ低コストで反復作成しましょう。ワイヤーフレームをクライアントやチームメイトと共有して、関係者と共同作業することができます。ワイヤーフレームを使用することで、多くの時間やリソースを投資することなく、利害関係者の賛同を得ることができます。ウェブサイトの構造とフローがユーザーのニーズと期待に応えることを確認するのに役立ちます。