ワイヤーフレーム作成の作り方
はじめに
カスタマージャーニーで体験の流れが見えた。次は、その流れを具体的な画面構成に落とし込む。
ワイヤーフレームは、画面の「見た目」を決める工程ではない。ジャーニーで見えた流れと課題を、どう情報の配置や導線に翻訳するかを決める設計判断の工程だ。
この記事では、カスタマージャーニーを前提に、ワイヤーフレームの作り方を解説する。定義ではなく、設計判断としてのワイヤーフレームの位置づけと、実務で陥りやすい崩れを避ける方法を示す。
2. ワイヤーフレームとは
ワイヤーフレームは、画面の構成要素とその配置を示した設計図のようなものだ。色や装飾は省き、情報の階層と導線に焦点を当てる。
カスタマージャーニーとの違い
ジャーニーは時間軸での体験の流れを捉える。だが、それだけでは「どう画面に落とし込むか」は見えない。ワイヤーフレームは、その流れを空間的な画面構成に変換する。
ジャーニーで見えた「気づく→確認する→完了する」という流れが、ワイヤーではどう配置されるか。「タスク確認の焦り」が、「重要タスクを画面上部に配置し、確認導線を短くする」といった具体的な配置判断になる。
ワイヤーフレームが設計に役立つ理由
ワイヤーフレームがあると、抽象的な課題が具体的な画面構成に翻訳される。ジャーニーで見えた「時間がない」という課題が、情報の優先順位や導線の長さとして現れる。
また、ビジュアルを省くことで、構成の問題に集中できる。色やフォントに気を取られる前に、情報の階層や導線が適切かを検討できる。
崩れやすいポイント
ワイヤーフレームは実務でよく崩れる。理由は「見た目のラフ案」と「設計判断の材料」の混同が起きやすいことだ。
初心者が陥りやすいのは、ジャーニーの課題を無視して「綺麗な画面」を先に描いてしまうことだ。ユーザーの課題解決よりも、自己満足的な画面構成になりがちだ。
ワイヤーフレームは「設計判断の記録」である。ジャーニーで見えた課題を解決するための配置判断でなければ、実装の基盤として機能しない。逸脱していないかは、ジャーニーの課題と照らし合わせて確認する。
3. ワイヤーフレームの構成要素
ワイヤーフレームは、複数の要素を組み合わせた設計図である。各要素は独立しておらず、相互に関係しながら画面構成を形成する。
情報設計
画面に何を載せるか、どの情報を優先するかを決める。ジャーニーで見えたユーザーのゴールと課題から、必要な情報を洗い出す。
情報の優先順位は、ジャーニーの課題とゴールから逆算して決める。時間に追われているユーザーには、最小限の情報を最優先で見せる。詳細を知りたいユーザーには、階層的に情報を展開する。
グリッドとレイアウト
情報を配置するための骨格となる。グリッドを意識することで、画面内の情報に一貫性が生まれ、視覚的な階層が明確になる。
レイアウトは、情報の流れを導く。ユーザーの視線の動きを予測し、重要な情報から順に目に入るように配置する。グリッドを無視した配置は、後のUIデザインや開発で整合性を失わせ、修正コストが増える原因になる。
注釈と説明
ワイヤーだけでは伝わらない意図を、テキストで補足する。なぜこの配置なのか、どういう課題を解決しているのかを記述する。
注釈は、設計判断の文脈を残すためのものだ。後で見返したときや、他のメンバーに意図を伝える際に必要となる。ワイヤーだけでは、なぜその配置になったかが見えにくい。
導線と遷移
画面内の導線と、画面間の遷移を示す。ユーザーがどう情報に到達し、次にどう移動するかを設計する。
導線は、ジャーニーの流れを画面内に翻訳したもの。タスク確認の前に「気づく」導線が必要なのか、それとも直接アクセスできるのかは、ジャーニーの文脈によって変わる。
4. ワイヤーフレームと前工程の関係
ワイヤーフレームは、ペルソナ・ユーザーストーリー・カスタマージャーニーの文脈を、画面構成に翻訳するものだ。4つのツールは独立して使われるのではなく、設計判断へ至る連続した流れとして機能する。
ペルソナが提供する文脈
ペルソナは「誰のための画面か」を定める。「タロー」という人物像を持つことで、ワイヤーの各要素に共通の文脈が与えられる。
タローの生活リズムや課題を知っていれば、朝の慌ただしい時間帯にどう画面に到達するかが具体的にイメージできる。ペルソナがなければ、ワイヤーは抽象的な一般論になりがちだ。
ユーザーストーリーが提供する具体的な欲求
ユーザーストーリーは「その場面で何をしたいか」を定める。「短時間でタスクを確認したい」という欲求があれば、ワイヤーのどの要素を優先すべきかが見えてくる。
ストーリーはワイヤーの「要件」となる。画面に何を載せるか、どの導線を優先するかの判断基準になる。
カスタマージャーニーが明らかにする流れと課題
ジャーニーは「どう流れるか」と「どこで課題があるか」を示す。ワイヤーは、その流れと課題を画面構成に翻訳する。
ジャーニーで見えた「タスク確認前の焦り」が、ワイヤーでは「重要タスクの優先表示」や「短い導線」といった具体的な配置になる。この翻訳が適切であれば、ユーザーの課題が解決に向かう。
4つを使い分ける
実務では、この4つを使い分ける。ペルソナで文脈を共有し、ユーザーストーリーで具体的な欲求を整理し、ジャーニーで流れと課題を捉え、ワイヤーで画面構成に落とし込む。
どのツールも「実ユーザーの文脈から逸脱していないか」を常に確認しながら使う。そうすることで、設計判断がユーザーの実態に即したものになる。
5. ワイヤーフレームの作り方
ここからは、カスタマージャーニーを前提に、ワイヤーフレームを作成する具体的なステップを解説する。
5-1 情報設計の整理
まず、ジャーニーで見えたユーザーのゴールと課題から、画面に必要な情報を洗い出す。何を載せるか、どの情報を優先するかを決める。
情報の優先順位は、ジャーニーの課題とゴールから逆算して決める。時間に追われているユーザーには、最小限の情報を最優先で見せる。詳細を知りたいユーザーには、階層的に情報を展開する。
実務で崩れやすいのは、ジャーニーの課題を無視して「綺麗な画面」を先に描いてしまうことだ。ユーザーの課題解決よりも、自己満足的な画面構成になりがちだ。
5-2 レイアウトの構成
グリッドを意識しながら、情報の階層と導線を配置する。グリッドを無視した配置は、後のUIデザインや開発で整合性を失わせ、修正コストが増える。
レイアウトは、情報の流れを導く。ユーザーの視線の動きを予測し、重要な情報から順に目に入るように配置する。ジャーニーで見えた「タスク確認の焦り」が、「重要タスクを画面上部に配置し、確認導線を短くする」といった具体的な配置になる。
5-3 注釈と説明の付け方
ワイヤーだけでは伝わらない意図を、テキストで補足する。なぜこの配置なのか、どういう課題を解決しているのかを記述する。
注釈は、設計判断の文脈を残すためのものだ。「タスク優先のため上部配置」「短時間で到達できる導線」など、具体的な意図を書き残す。
ワイヤーだけでは、なぜその配置になったかが見えにくい。後で見返したときや、他のメンバーに意図を伝える際に注釈が必要となる。
5-4 検証と反復
作成したワイヤーフレームを、ジャーニーの課題と照らし合わせて確認する。ユーザーの文脈から逸脱していないか、設計判断として適切かを検証する。
検証の方法は、ペルソナの文脈に立ち返ることだ。「タローがこの画面を使う場面を想像し、違和感がないか確認する」「ジャーニーで見えた課題が解決に向かっているか見る」。
違和感がある場合は、情報設計やレイアウトに戻り、修正を繰り返す。ワイヤーフレームは一度で完成するものではなく、反復的に磨いていく。
6. まとめ
ワイヤーフレームは、カスタマージャーニーの文脈を画面構成に翻訳するツールだ。ジャーニーで見えた流れと課題を、情報の配置や導線に変換することで、具体的な設計判断の材料となる。
ペルソナで「誰のため」が定まり、ユーザーストーリーで「何をしたい」が見え、ジャーニーで「どう流れる」が明らかになり、ワイヤーで「どう配置する」が決まる。この4つを通して、実ユーザーの文脈が画面設計に引き継がれる。
実務で崩れやすいのは、どの段階でも「綺麗な画面」に寄りすぎることだ。ジャーニーで見えた課題を無視すると、ユーザーの課題解決から逸脱した自己満足的な画面構成になりがちだ。
この流れを習得すれば、抽象的な体験の課題を、具体的な画面構成の課題に翻訳できる。次のステップは、この記事で学んだ流れを、自社のプロダクトやサービスに応用してみることだ。まずは1つのジャーニーステップから始め、情報設計とレイアウトを描いてみるとよい。