ユーザーフロー図とWebサイトのワイヤーフレーム（無料SVGダウンロード付き）
ユーザーフローとワイヤーフレーム
ユーザーフロー図の例とWebサイト用ワイヤーフレームキット（無料SVG） | We.Inc
ユーザーフローとは何か、会員登録、購入手続き、予約などすぐに使える8つのフロー、そしてトップページ、料金ページ、お問い合わせページのシンプルなワイヤーフレームを紹介します。どれもFigmaで開けるSVGとしてダウンロードできます。
ユーザーフローとは、人があるひとつの作業を終えるまでにサイト内でたどる道筋のことで、画面、操作、分岐を矢印でつないで描きます。ワイヤーフレームは、ひとつの画面のレイアウトを示す簡素なスケッチです。まずフローを描き、次にその中の各画面のワイヤーフレームを作りましょう。以下に、よくある8つのフローと3つのワイヤーフレームを用意しました。SVGでダウンロードできます。
フローで使う図形
- 灰色のボックス
- フォームの入力など、利用者が行う操作
どのフローも目的をひとつに絞り、そこへ到達する最少の手順だけで構成しています。最もよく起こる失敗は点線のループで描いています。自分のサイトの出発点として使い、フローが通過する画面のワイヤーフレームを作りましょう。
- 目的を1行で書きます。たとえば「初めての訪問者が初回の予約を取る」といった形です。
- 入口から目的までのすべての画面と操作を書き出します。メールアドレスの確認のような地味な手順も省かないでください。
- カードが拒否された、予約枠が埋まっていたなど、問題が起こりうる箇所すべてに印を付け、利用者が次にどこへ進むかを決めます。
- 手順の数を数え、目的の達成に役立たない手順は削ります。
- フロー内の各画面のワイヤーフレームを作り、色やフォントを選ぶ前に、何をどこに置くかを決めます。
- 人が実際にたどり着く場所から始めましょう。多くの訪問者はトップページではなく、検索から商品ページやブログ記事にやって来ます。
- ワイヤーフレームはあえて灰色のままにしましょう。色や本物の画像を入れると、構成について意見がほしいのに、見た目についての意見が集まってしまいます。
- 分岐のひし形にはすべて戻り道が必要です。決済に失敗して行き止まりになれば、その売上は失われます。
- 作る前に5人でフローを試しましょう。どこで迷うかを観察すれば、問題の大半が見つかります。
よくある質問
ユーザーフローとユーザージャーニーの違いは何ですか？
ユーザーフローは、サイト上でのひとつの作業の画面と手順を図にしたものです。ユーザージャーニーはもっと広く、製品を使う前、使っている間、使った後に人が何を考え、感じ、行うかを扱い、複数のチャネルにまたがることもよくあります。フローは画面を設計するため、ジャーニーは人を理解するためのものです。
これらのSVGをFigmaで開くには？
ファイルをダウンロードしてFigmaのキャンバスにドラッグするか、ブラウザーで開いてコピーし、貼り付けます。Figmaが図形とテキストを編集可能なレイヤーに変換するので、スタイルを変えたり内容を追加したりできます。
ワイヤーフレームはどこまで細かく作るべきですか？
画面に何がどの順番で並ぶかが分かる程度で十分です。ナビゲーション、見出し、画像、フォーム、ボタンなどです。正確な文言、色、フォントは入れません。青の色合いについて議論が始まったら、細かく作りすぎています。
ユーザーフローを作るには専用のソフトが必要ですか？
いいえ。最初の下書きなら紙とペンで十分です。フローを共有したり、編集したり、デザインと一緒に管理したりしたい場合は作図ツールが役立ちます。今回のような普通のSVGファイルは、ほとんどの作図ツールで使えます。
ページより先にフローを描く理由
- 1ページずつ設計したページは、単体ではうまく機能しても、組み合わせるとうまくいかないことがよくあります。料金ページは見栄えが良いのに次の一歩がはっきりしない、会員登録フォームで尋ねたことを購入手続きでもう一度尋ねる、といった具合です。先にフローを描けば画面間の受け渡しがすべて見えるようになり、そこは多くの人が離脱する場所でもあります。
- フローを描くと、手順がひとつ増えるごとの負担も目に見えるようになります。予約に紙の上で9つのボックスが必要だと分かれば、どれをまとめられるかは一目瞭然です。
ワイヤーフレームから本物のページへ
- コンテンツの順番が決まれば、ワイヤーフレームは本番デザインの指示書になります。灰色のブロックはそれぞれ見出しと本文を持つセクションになり、隅に書かれたラベルは、チームやサイトビルダーとのやり取りで使うセクション名になります。
会員登録
訪問者がアカウントを作成し、最初の役に立つ画面にたどり着く。
訪問者がトップページに来る
「無料で始める」をクリック
登録フォーム：メールアドレスとパスワード
メールアドレスは使用済み？
はい：サインインへ
確認メールのリンク
最初の作業を案内するようこそ画面
購入手続き
買い物客がカートの中身の代金を支払う。
カート
購入手続き：連絡先と配送先
配送方法を選ぶ
支払い情報
支払いは承認された？
いいえ：もう一度試す
注文確認画面とメール
予約
新しいお客さまが初回の予約を取る。
サービスのページ
サービスと担当者を選ぶ
空き枠のカレンダー
枠はまだ空いている？
いいえ：選び直す
連絡先の入力フォーム
予約確定、カレンダーに追加
パスワードの再設定
パスワードを忘れた会員が再びログインできるようになる。
サインインページ
「パスワードを忘れた場合」をクリック
メールアドレスを入力
メールの再設定リンクを開く
リンクはまだ有効？
いいえ：再送する
新しいパスワードを設定
サインイン完了
お問い合わせ
見込み客が質問を送り、いつ返信が来るかが分かる。
任意のページ
お問い合わせページ
名前、メールアドレス、メッセージを入力
入力内容は正しい？
いいえ：エラーを表示
返信の目安を添えたお礼メッセージ
ニュースレター登録
読者が購読を申し込み、確認を済ませる。
ブログ記事
記事の最後にある登録ボックス
「受信箱を確認してください」ページ
確認リンクをクリック
ようこそメールとバックナンバーのページ
検索から商品へ
買い物客が検索ボックスから商品を見つける。
任意のページ
検索欄に入力
絞り込み付きの検索結果ページ
何か見つかった？
いいえ：候補を提案
商品ページ
カートに追加
見積もり依頼
地域のお客さまが作業の料金を問い合わせる。
対応エリアのページ
「見積もりを依頼」ボタン
短いフォーム：作業の種類、郵便番号、写真
対応エリア内？
いいえ：提携先を紹介
折り返し電話の時間を添えた確認画面
トップページ
何をしているかを伝え、その裏付けを示し、次の一歩をひとつだけ示す。
ナビゲーション
ヒーロー：見出し、説明文、メインボタン
ロゴまたは実績
3つのメリット
ご利用の流れ
お客さまの声
最後の行動喚起
フッター
料金ページ
問い合わせをしなくても、プランを比べて選べるようにする。
ナビゲーション
見出しと月払い・年払いの切り替え
プランのカード
機能の比較表
料金に関するよくある質問
フッター
お問い合わせページ
連絡しやすくし、いつ返信するかを明確にする。
ナビゲーション
見出しと返信の目安
お問い合わせフォーム
地図または写真
住所、電話番号、営業時間
フッター
8つのユーザーフローの例
どのフローも目的はひとつです。オレンジの点線は、手順が失敗する最も一般的なパターンと、その後に利用者が進む先を示しています。
ワイヤーフレームキット
ほとんどのサイトに必要なページのための、簡素な3つのワイヤーフレームです。各ブロックのラベルがセクション名を表しています。
{name}のフロー
{title}：{steps}
、次に
SVGをダウンロード
SVGをコピー（Figmaに貼り付け）
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る