はじめに
カスタマージャーニーで体験の流れが見えた。次は、その流れを具体的な画面構成に落とし込む。
ワイヤーフレームは、画面の「見た目」を決める工程ではない。ジャーニーで見えた流れと課題を、どう情報の配置や導線に翻訳するかを決める設計判断の工程だ。
この記事では、カスタマージャーニーを前提に、ワイヤーフレームの作り方を解説する。定義ではなく、設計判断としてのワイヤーフレームの位置づけと、実務で陥りやすい崩れを避ける方法を示す。
2. ワイヤーフレームとは
ワイヤーフレームは、画面の構成要素とその配置を示した設計図のようなものだ。色や装飾は省き、情報の階層と導線に焦点を当てる。
カスタマージャーニーとの違い
ジャーニーは時間軸での体験の流れを捉える。だが、それだけでは「どう画面に落とし込むか」は見えない。ワイヤーフレームは、その流れを空間的な画面構成に変換する。
ジャーニーで見えた「気づく→確認する→完了する」という流れが、ワイヤーではどう配置されるか。「タスク確認の焦り」が、「重要タスクを画面上部に配置し、確認導線を短くする」といった具体的な配置判断になる。
ワイヤーフレームが設計に役立つ理由
ワイヤーフレームがあると、抽象的な課題が具体的な画面構成に翻訳される。ジャーニーで見えた「時間がない」という課題が、情報の優先順位や導線の長さとして現れる。
また、ビジュアルを省くことで、構成の問題に集中できる。色やフォントに気を取られる前に、情報の階層や導線が適切かを検討できる。
崩れやすいポイント
ワイヤーフレームは実務でよく崩れる。理由は「見た目のラフ案」と「設計判断の材料」の混同が起きやすいことだ。
初心者が陥りやすいのは、ジャーニーの課題を無視して「綺麗な画面」を先に描いてしまうことだ。ユーザーの課題解決よりも、自己満足的な画面構成になりがちだ。
ワイヤーフレームは「設計判断の記録」である。ジャーニーで見えた課題を解決するための配置判断でなければ、実装の基盤として機能しない。逸脱していないかは、ジャーニーの課題と照らし合わせて確認する。
3. ワイヤーフレームの構成要素
ワイヤーフレームは、複数の要素を組み合わせた設計図である。各要素は独立しておらず、相互に関係しながら画面構成を形成する。
情報設計
画面に何を載せるか、どの情報を優先するかを決める。ジャーニーで見えたユーザーのゴールと課題から、必要な情報を洗い出す。
情報の優先順位は、ジャーニーの課題とゴールから逆算して決める。時間に追われているユーザーには、最小限の情報を最優先で見せる。詳細を知りたいユーザーには、階層的に情報を展開する。
グリッドとレイアウト
情報を配置するための骨格となる。グリッドを意識することで、画面内の情報に一貫性が生まれ、視覚的な階層が明確になる。
レイアウトは、情報の流れを導く。ユーザーの視線の動きを予測し、重要な情報から順に目に入るように配置する。グリッドを無視した配置は、後のUIデザインや開発で整合性を失わせ、修正コストが増える原因になる。
注釈と説明
ワイヤーだけでは伝わらない意図を、テキストで補足する。なぜこの配置なのか、どういう課題を解決しているのかを記述する。
注釈は、設計判断の文脈を残すためのものだ。後で見返したときや、他のメンバーに意図を伝える際に必要となる。ワイヤーだけでは、なぜその配置になったかが見えにくい。
導線と遷移
画面内の導線と、画面間の遷移を示す。ユーザーがどう情報に到達し、次にどう移動するかを設計する。
導線は、ジャーニーの流れを画面内に翻訳したもの。タスク確認の前に「気づく」導線が必要なのか、それとも直接アクセスできるのかは、ジャーニーの文脈によって変わる。
4. ワイヤーフレームと前工程の関係
ワイヤーフレームは、ペルソナ・ユーザーストーリー・カスタマージャーニーの文脈を、画面構成に翻訳するものだ。4つのツールは独立して使われるのではなく、設計判断へ至る連続した流れとして機能する。
ペルソナが提供する文脈
ペルソナは「誰のための画面か」を定める。「タロー」という人物像を持つことで、ワイヤーの各要素に共通の文脈が与えられる。
タローの生活リズムや課題を知っていれば、朝の慌ただしい時間帯にどう画面に到達するかが具体的にイメージできる。ペルソナがなければ、ワイヤーは抽象的な一般論になりがちだ。
ユーザーストーリーが提供する具体的な欲求
ユーザーストーリーは「その場面で何をしたいか」を定める。「短時間でタスクを確認したい」という欲求があれば、ワイヤーのどの要素を優先すべきかが見えてくる。
ストーリーはワイヤーの「要件」となる。画面に何を載せるか、どの導線を優先するかの判断基準になる。
カスタマージャーニーが明らかにする流れと課題
ジャーニーは「どう流れるか」と「どこで課題があるか」を示す。ワイヤーは、その流れと課題を画面構成に翻訳する。
ジャーニーで見えた「タスク確認前の焦り」が、ワイヤーでは「重要タスクの優先表示」や「短い導線」といった具体的な配置になる。この翻訳が適切であれば、ユーザーの課題が解決に向かう。
4つを使い分ける
実務では、この4つを使い分ける。ペルソナで文脈を共有し、ユーザーストーリーで具体的な欲求を整理し、ジャーニーで流れと課題を捉え、ワイヤーで画面構成に落とし込む。
どのツールも「実ユーザーの文脈から逸脱していないか」を常に確認しながら使う。そうすることで、設計判断がユーザーの実態に即したものになる。
5. ワイヤーフレームの作り方
ここからは、カスタマージャーニーを前提に、ワイヤーフレームを作成する具体的なステップを解説する。
5-1 情報設計の整理
まず、ジャーニーで見えたユーザーのゴールと課題から、画面に必要な情報を洗い出す。何を載せるか、どの情報を優先するかを決める。
情報の優先順位は、ジャーニーの課題とゴールから逆算して決める。時間に追われているユーザーには、最小限の情報を最優先で見せる。詳細を知りたいユーザーには、階層的に情報を展開する。
実務で崩れやすいのは、ジャーニーの課題を無視して「綺麗な画面」を先に描いてしまうことだ。ユーザーの課題解決よりも、自己満足的な画面構成になりがちだ。
初心者がよく陥るのは、「とりあえず全部載せる」ことだ。情報の優先順位が消えると、ユーザーのゴールへの最短経路が埋もれる。必要な情報に絞ることが、情報設計の最初の判断だ。
5-2 レイアウトの構成
グリッドを意識しながら、情報の階層と導線を配置する。グリッドを無視した配置は、後のUIデザインや開発で整合性を失わせ、修正コストが増える。
レイアウトは、情報の流れを導く。ユーザーの視線の動きを予測し、重要な情報から順に目に入るように配置する。ジャーニーで見えた「タスク確認の焦り」が、「重要タスクを画面上部に配置し、確認導線を短くする」といった具体的な配置になる。
崩れやすいのは、コンテンツブロックを並べるだけで導線を考えないことだ。要素が揃っていても、ユーザーがどう移動するかの流れが設計されていなければ、画面は「要素の集合」になる。
5-3 注釈と説明の付け方
ワイヤーだけでは伝わらない意図を、テキストで補足する。なぜこの配置なのか、どういう課題を解決しているのかを記述する。
注釈は、設計判断の文脈を残すためのものだ。「タスク優先のため上部配置」「短時間で到達できる導線」など、具体的な意図を書き残す。
ワイヤーだけでは、なぜその配置になったかが見えにくい。後で見返したときや、他のメンバーに意図を伝える際に注釈が必要となる。
初心者が省きやすいのが注釈だ。「なんとなく上に置いた」「なんとなく目立たせた」では、設計の根拠が残らない。注釈のないワイヤーは、チームでの議論の起点にならない。
ワイヤーフレームサンプル
「何を配置し、何を注釈するか」を具体的に理解するために、タスク一覧画面の簡易サンプルを示す。
| 領域 | 配置内容 | 設計判断の根拠（注釈） |
|---|---|---|
| ヘッダー | 今日の日付＋未完タスク数 | タローが「今日何が残っているか」を最短で確認できる |
| メインエリア | 期限順タスク一覧（タイトル＋期限のみ表示） | 通勤中の短時間確認を想定。詳細は展開式で省略 |
| 各リスト行 | タップで詳細展開（タップ領域を行全体に） | 電車の揺れの中での片手操作を考慮 |
| フッター固定 | 新規タスク追加ボタン | 使用頻度が最も高いアクション。スクロール位置に関係なく届く |
| 注釈（別記） | 緊急タスクは一覧上部に自動昇格（バッジ付き） | ジャーニーで見えた「見落としへの不安」を解消する配置 |
注釈の欄に注目してほしい。「ジャーニーで見えた〜」という書き方が、設計判断をインタビュー・ジャーニー・ペルソナと接続させている。この接続がある注釈だけが、後から見たメンバーにも意図を伝えられる。
5-4 検証と反復
作成したワイヤーフレームを、ジャーニーの課題と照らし合わせて確認する。ユーザーの文脈から逸脱していないか、設計判断として適切かを検証する。
検証の方法は、ペルソナの文脈に立ち返ることだ。「タローがこの画面を使う場面を想像し、違和感がないか確認する」「ジャーニーで見えた課題が解決に向かっているか見る」。
違和感がある場合は、情報設計やレイアウトに戻り、修正を繰り返す。ワイヤーフレームは一度で完成するものではなく、反復的に磨いていく。
陥りやすいのは、「画面単体」で完結させてしまうことだ。前の画面からどう来て、次の画面へどう遷移するかが設計されていないと、ジャーニーの流れが画面の外で途切れる。
6. この知識がUI設計で効く場面
ワイヤーフレームは、UXリサーチの成果を画面構成に変換する接点だ。設計フェーズで以下の判断を下すとき、ワイヤーが直接の根拠になる。
- 情報の優先順位を決めるとき: ジャーニーで見えた課題とゴールから逆算して、何を最初に見せるかを決める。「全部載せる」ではなく、「何を削るか」が設計の本質だ。
- 主要CTAをどこに置くか決めるとき: ペルソナの文脈とユーザーストーリーの欲求から、ユーザーが最も必要とするアクションの配置場所と視認性が決まる。
- 1画面に何を載せて何を削るか決めるとき: 情報過多になると認知負荷が上がり、ユーザーのゴール到達が遠くなる。ジャーニーで見えたタッチポイントごとの欲求が、取捨選択の判断軸になる。
- 導線を短くする判断をするとき: ジャーニーで感情が落ちていたステップは、導線の長さや迂回が原因であることが多い。ワイヤーで導線を可視化することで、改善箇所が具体的に見える。
設計フェーズに入ったとき、ジャーニーマップとワイヤーを並べておくと、この4つの問いを立てやすくなる。
7. まとめ
ワイヤーフレームは、カスタマージャーニーの文脈を画面構成に翻訳するツールだ。ジャーニーで見えた流れと課題を、情報の配置や導線に変換することで、具体的な設計判断の材料となる。
ペルソナで「誰のため」が定まり、ユーザーストーリーで「何をしたい」が見え、ジャーニーで「どう流れる」が明らかになり、ワイヤーで「どう配置する」が決まる。この4つを通して、実ユーザーの文脈が画面設計に引き継がれる。
実務で崩れやすいのは、どの段階でも「綺麗な画面」に寄りすぎることだ。ジャーニーで見えた課題を無視すると、ユーザーの課題解決から逸脱した自己満足的な画面構成になりがちだ。
この流れを習得すれば、抽象的な体験の課題を、具体的な画面構成の課題に翻訳できる。
ワイヤーフレームで固まった構造は静的な確認だ。次のStep 6「インタラクション・プロトタイプ作成」では、その静的な構造を操作体験として確かめる段階に移る。ワイヤーで設計した導線や画面遷移が自然かどうかは、実際に動かして初めて見えてくる。まずは1つのジャーニーステップのワイヤーを描き上げ、チームで検証しながら次のステップへ進もう。
関連知識
この記事に登場した概念の定義は、以下の用語集で確認できる。