要件を文章にまとめ、打ち合わせでも口頭で説明した。エンジニアもうなずいていた。ところが、できあがった画面を見ると、項目の並び順も、ボタンを押したあとの動きも、思っていたものと違う。指摘すると「要件にはそう書いていなかった」と返ってくる。読み返すと、確かに書いていない。こうした経験はないでしょうか。
言葉だけで画面を伝えるのは、思っている以上に難しいことです。「一覧から詳細を開ける」という一文から、人は一人ひとり違う画面を思い浮かべます。一覧に何を表示するのか、詳細は別の画面で開くのか、同じ画面の横に出るのか。書き手にとって当たり前のことほど、文章には書かれません。
このずれを早い段階で埋める道具が、ワイヤーフレームです。画面の骨組みを線と箱だけで描いたもので、デザインの技術がなくても描けます。むしろ、少人数の体制でプロダクトの判断を担っている立場だからこそ、自分で描く意味があります。
本記事では、PdMが自分でワイヤーフレームを描くときの目的、描きはじめる前の準備、5つのステップ、粗さの決め方、そして開発やデザイナーへの渡し方を解説します。
ワイヤーフレームとは何か、PdMが描く意味はどこにあるか
ワイヤーフレームは、画面に何を、どの順序で、どのくらいの重さで置くかを示した設計図です。色、写真、フォントといった見た目の要素は含めません。四角い箱と線、仮の文言だけで構成します。
よく似た言葉に、モックアップとプロトタイプがあります。違いは次のとおりです。
| 名前 | 何を決めるか | 主に誰が作るか |
|---|---|---|
| ワイヤーフレーム | 画面に置く情報と、その並び・流れ | PdM、デザイナー |
| モックアップ | 色や文字の大きさを含めた、仕上がりの見た目 | デザイナー |
| プロトタイプ | 実際に触って確かめられる、操作の動き | デザイナー、エンジニア |
PdMがワイヤーフレームを描く目的は、美しい画面を作ることではありません。要件の抜けと、認識のずれを、作りはじめる前に見つけることです。
文章で要件を書いているときには気づかなかったことが、画面の形にした途端に見えてきます。「この一覧、並び順はどうするのだろう」「登録が終わったあと、利用者はどの画面に戻るのだろう」。こうした問いは、文章の上では素通りしてしまいますが、箱を描こうとすると手が止まります。手が止まった場所が、要件に書かれていなかった場所です。
PdMが描くワイヤーフレームと、デザイナーが描くワイヤーフレームの違い
デザイナーがいるチームでは、「ワイヤーフレームはデザイナーの仕事ではないか」と感じるかもしれません。役割を分けて考えると、整理しやすくなります。
- PdMが描くもの：利用者がこの画面で何をするのか、そのために何の情報が必要か、どの順序で進むのか。いわば「要件を画面の形で書いたもの」
- デザイナーが描くもの：その要件を、利用者にとって最も分かりやすい配置と流れでどう実現するか。いわば「解き方の設計」
PdMが描くワイヤーフレームは、デザイナーへの指示書ではなく、議論のための叩き台です。配置や見せ方は、デザイナーがより良い形に変えてかまいません。変えてほしくないのは、画面に必要な情報と、利用者がたどる順序のほうです。
この区別を最初に共有しておかないと、デザイナーはPdMの描いた配置をそのまま清書するだけになり、専門性を活かす余地がなくなります。反対に、デザイナーのいないチームでは、PdMのワイヤーフレームがそのまま開発の設計図になります。その場合は、後で触れるように、少しだけ描き込みの粒度を上げます。
描きはじめる前に用意する3つのこと
いきなり画面を描きはじめると、「とりあえず思いついた項目を並べた画面」になりがちです。描く前に、次の3つを手元にそろえます。
1. 誰が、何を終わらせるための画面か
画面ごとに、利用者と、その画面で終わらせたいことを1行で書きます。
- 例：「店舗のスタッフが、電話で受けた予約の変更を、顧客を待たせずに終わらせる画面」
この1行が、画面に置く情報を選ぶときの基準になります。この行に関係しない情報は、画面に置く理由を問い直します。
2. 利用者がたどる流れ
その画面の前に、利用者は何をしていたのか。その画面のあと、どこへ進むのか。画面単体ではなく、前後のつながりを箇条書きで並べます。
- 予約一覧を開く → 該当の予約を探す → 変更の画面を開く → 日時を選び直す → 空きを確かめる → 確定する → 一覧に戻る
この流れを書いておくと、必要な画面の数と、画面どうしのつながりが見えてきます。
3. 画面に出す情報の一覧
最後に、画面に表示する情報と、利用者が入力・操作するものを洗い出します。この段階では、並べ方は考えません。思いつく限り書き出したあと、「この画面で終わらせたいこと」に必要なものだけを残します。
この3つは、それぞれ数行ずつで十分です。合わせても15分ほどで書けます。
ワイヤーフレームを描く5つのステップ
準備ができたら、次の5つのステップで描いていきます。
ステップ1：紙かホワイトボードに、手で粗く描く
最初は、ツールを使わずに手で描きます。紙とペンで十分です。オンラインで共有したい場合は、オンラインのホワイトボードに四角を置くだけでもかまいません。
手で描く理由は、捨てやすいことにあります。ツールで丁寧に描いた画面は、それだけで完成品のように見え、描いた本人も手放しにくくなります。最初の段階では、2〜3通りの案を5分ずつで描き、比べてみます。
描くのは、画面の外枠と、情報を置く箱、ボタンだけです。文言は「ここに予約の日時」程度の仮のもので十分です。
ステップ2：情報の優先順位を決め、配置に反映する
次に、ステップ1で描いた画面に置いた情報に、優先順位をつけます。
- 利用者がこの画面で最初に見るべきものは何か
- 操作の判断に必要なものは何か
- 必要なときだけ見られればよいものは何か
優先順位の高いものを上に、大きく置きます。低いものは下に置くか、「詳細を開く」で隠します。すべての情報を同じ大きさで並べると、利用者はどこから見ればよいのかが分からなくなります。
ここで迷った箇所は、要件として決まっていなかった箇所です。メモに書き留めておき、ステップ5で確認します。
ステップ3：画面どうしのつながりを描く
1枚ずつの画面が描けたら、画面どうしを矢印でつなぎます。「このボタンを押すと、どの画面に進むのか」「戻るときは、どこに戻るのか」を書き込みます。
この作業で、抜けていた画面が見つかることがよくあります。確定したあとの完了の画面、キャンセルしたときの戻り先、権限がない人が開いたときの画面などです。画面単体を描いているときには気づかない部分です。
ステップ4：例外の状態を描き足す
ここまでで描いているのは、ほとんどの場合、すべてが順調に進んだときの画面です。実際の開発で手戻りになりやすいのは、そうでないときの画面です。
- データが1件もないとき（初めて使う人の一覧画面など）
- 入力に誤りがあったとき
- 文字数が極端に多いとき、件数が極端に多いとき
- 通信に失敗したとき、処理に時間がかかるとき
すべてを丁寧に描く必要はありません。「データが0件のときは、ここに登録を促す文言とボタン」のように、主な画面の横に注記するだけでも、開発の段階で迷う場面が減ります。
ステップ5：画面ごとに、決まっていないことを書き出す
最後に、描いている途中で迷った点、決めきれなかった点を、画面ごとに一覧にします。
- 一覧の並び順は、登録日順か、予約日の近い順か
- 変更できるのは、予約日の何日前までか
- 変更したことを、顧客に通知するか
ワイヤーフレームの本当の成果物は、絵そのものよりも、この「決まっていないことの一覧」かもしれません。開発やデザイナーと話す前にこの一覧があれば、打ち合わせの時間を、決めるべきことに使えます。
どこまで描き込むか：粗さを決める基準
ワイヤーフレームをどこまで丁寧に描くかは、誰に渡すか、何を確かめたいかで変わります。目安は次のとおりです。
| 渡す相手・目的 | 描き込みの目安 |
|---|---|
| 自分の頭の整理、関係者との方向の確認 | 手描き。箱と仮の文言のみ。1画面5分 |
| デザイナーへの依頼 | 情報の優先順位と画面の流れが分かる程度。配置はデザイナーに任せると明記 |
| デザイナーがいない場合の、開発への引き渡し | ツールで描く。文言、例外の状態、ボタンを押したあとの動きまで書く |
| 利用者に見せて反応を確かめる | 文言は実際に近いものにする。色はつけない |
迷ったときは、今の段階で決めたいことが決まる、最も粗い状態を選びます。描き込みすぎると、時間がかかるだけでなく、見る人の意見が色や細部に向かい、確かめたかった流れや情報の議論が後回しになります。
ツールについては、慣れたものを使えば十分です。デザイナーと共有するなら、デザイナーが普段使っているツールに合わせると、そのまま清書の土台として使ってもらえます。PowerPointやGoogleスライドで四角を並べるだけでも、ワイヤーフレームとしての役目は果たせます。
開発・デザイナーへの渡し方
描いたワイヤーフレームは、渡し方によって効果が大きく変わります。次の3点を押さえます。
1. 何を決めたもので、何を任せるのかを添える
ワイヤーフレームを渡すときは、必ず一言添えます。
- 「画面に必要な情報と、画面の流れは、この形で決めたい」
- 「配置と見せ方は、より良い形があれば変えてほしい」
- 「赤字で書いた箇所は、まだ決まっていない」
この一言がないと、デザイナーは配置まで指示されたものと受け取り、エンジニアは描かれていない部分を推測で作ることになります。
2. 画面の上で、利用者の流れを一緒にたどる
渡すときは、文書を送るだけでなく、15〜30分ほど時間を取り、画面を順にたどりながら説明します。「利用者はここで予約を探して、ここを押して」と流れに沿って話すと、聞いている側から「ここで戻ったらどうなるのか」「この情報はどこから取ってくるのか」といった質問が出ます。
エンジニアからの質問は、特に大切です。「この情報は、今のデータの持ち方では表示できない」「この順序で処理すると、時間がかかる」といった指摘は、作りはじめてからでは手戻りになります。
3. 要件の文書と、つなげて置く
ワイヤーフレームだけが独立していると、あとで要件の文書と食い違ったときに、どちらが正しいのかが分からなくなります。要件をまとめた文書の中に、該当するワイヤーフレームを貼るか、リンクを置きます。打ち合わせで変わった点は、ワイヤーフレームと文書の両方に反映します。
よくある失敗
- 最初からツールで丁寧に描く：時間をかけた分だけ手放しにくくなり、より良い案が出ても切り替えにくくなります。最初の案は、捨てる前提で手描きにします。
- 他社のサービスの画面を、そのまま写す：参考にするのは問題ありませんが、他社の利用者と自社の利用者は、使う場面も目的も違います。写すのではなく、「なぜこの配置なのか」を考えたうえで取り入れます。
- 順調に進んだときの画面しか描かない：例外の状態は、開発の途中でエンジニアがその場で判断して作ることになり、画面ごとに扱いがばらばらになります。主な例外だけでも注記しておきます。
- ワイヤーフレームを、デザインの完成形として扱う：PdMの描いた配置がそのまま清書されると、デザイナーの専門性が活かされません。任せる範囲を明記して渡します。
- 作ったあと、更新しない：打ち合わせで決まったことが反映されないまま古い図が残ると、新しく加わった人が古い図を正しいものとして読んでしまいます。
具体例：見積書の作成画面を描き直したケース
従業員12名、中小企業向けの見積・請求管理サービスを提供するスタートアップを想定した例です。プロダクトの判断は経営者が担い、エンジニア4名、業務委託のデザイナー1名（週2日の稼働）という体制でした。
顧客から「見積書に値引きを入れたい」という要望が続いたため、経営者は要件を文章にまとめ、エンジニアに渡しました。「明細ごとに値引きを入力できる。合計から値引きすることもできる」という内容です。2週間後にできあがった画面では、明細ごとの値引き欄と、合計の値引き欄が同時に表示され、両方に入力できるようになっていました。顧客に見せると、「どちらに入れればよいのか分からない」「両方に入れたら、二重に引かれるのではないか」という反応が返ってきました。
そこで、経営者は作り直しの前に、手描きでワイヤーフレームを描くことにしました。描きはじめてすぐ、ステップ2で手が止まりました。明細ごとの値引きと合計の値引きを、同じ画面にどう並べればよいのかが決められなかったのです。考えた末、そもそも両方を同時に使う顧客がいるのかを、サポートの担当者に確かめることにしました。答えは、「ほとんどの顧客はどちらか一方しか使わない。業種によって使い方が分かれている」というものでした。
この結果を受け、「値引きの方法を最初に選ぶ。選んだ方法の入力欄だけを表示する」という流れでワイヤーフレームを描き直しました。ステップ4では、「途中で値引きの方法を切り替えたとき、入力済みの値引きはどうなるか」という例外にも気づき、決まっていないことの一覧に加えました。
描き直したワイヤーフレームを持って、エンジニアとデザイナーと30分話しました。エンジニアからは「切り替えたときは、入力済みの値引きを消してよいか、確認の表示を出したい」という提案があり、その場で決まりました。デザイナーは、値引きの方法を選ぶ部分の見せ方を、より目立たない形に整えてくれました。手描きの1枚目から開発に渡すまでにかかったのは、1週間ほどでした。
よくある質問（FAQ）
Q1. 絵を描くのが苦手です。それでもワイヤーフレームは描けるでしょうか。
描けます。ワイヤーフレームで使うのは、四角と線と文字だけです。線がまっすぐでなくても、箱の大きさがそろっていなくても、伝わるべきことは伝わります。大切なのは、画面に何を、どの順で置くかであり、絵の上手さではありません。
Q2. デザイナーがいる場合も、PdMが描いたほうがよいのでしょうか。
描いておくことをおすすめします。ただし、デザイナーへの指示ではなく、要件を確かめるための叩き台として描きます。描く過程で要件の抜けに気づけることが、最大の効果です。渡すときは、配置はデザイナーに任せると伝えます。
Q3. どのツールを使えばよいでしょうか。
最初は紙とペンで十分です。共有が必要になったら、デザイナーが普段使っているツールに合わせるのが最も手間がかかりません。デザイナーがいない場合は、普段使っているスライドの作成ツールで四角を並べる方法でも、役目は果たせます。
Q4. 1画面を描くのに、どのくらい時間をかければよいでしょうか。
最初の手描きは、1画面5分ほどを目安にします。2〜3通り描いて比べたうえで、方向が決まってから時間をかけて整えます。最初の段階で30分以上かけている場合は、細部を描き込みすぎている可能性があります。
Q5. ワイヤーフレームを顧客に見せてもよいのでしょうか。
見せてかまいません。むしろ、作る前に利用者の反応を確かめられる貴重な機会です。ただし、色のない画面を見慣れていない人は、仕上がりのイメージがわかずに戸惑うことがあります。「これは画面の骨組みで、見た目はこれから整える」と最初に伝え、「この画面で、予約の変更を最後までできそうか」のように、操作の流れについて尋ねます。
まとめ
ワイヤーフレームは、画面に何を、どの順で、どのくらいの重さで置くかを示した骨組みです。PdMが描く目的は、美しい画面を作ることではなく、要件の抜けと認識のずれを、作りはじめる前に見つけることにあります。
描きはじめる前に、誰が何を終わらせるための画面か、利用者がたどる流れ、画面に出す情報の一覧の3つを用意します。そのうえで、(1)手で粗く描く、(2)情報の優先順位を決めて配置に反映する、(3)画面どうしのつながりを描く、(4)例外の状態を描き足す、(5)決まっていないことを書き出す、の5つのステップで進めます。渡すときは、何を決めたもので何を任せるのかを添え、画面の上で流れを一緒にたどり、要件の文書とつなげて置きます。
まずは、次に要件を文章で書くとき、その横に手描きで画面を1枚描いてみてください。手が止まった場所が、まだ決まっていない要件です。
プロダクトマネジメントについてお気軽にご相談ください
プロダクトマネジメントの顧問支援や、1人目のPdM採用・育成のサポートを承っています。
「経営者が兼務してきたが、そろそろ限界かもしれない」という段階からでもお気軽にご連絡ください。
おおむね2営業日以内にご返信します。
