開発会社との初回相談で、言葉だけでイメージを伝えようとすると、なかなか思い通りに伝わらないことがあります。この記事では、初回相談を実りあるものにする、手書きワイヤーフレームの作り方を解説します。
この記事で分かること
ワイヤーフレームは、専門的なツールを使わなくても、手書きで十分に作成できます。この記事では、非エンジニアでも簡単に作れる、手書きワイヤーフレームの作り方を紹介します。
結論を先に示すと、押さえておきたいポイントは次の3つです。
- 完成度は求めず、伝わることを優先する
- 画面ごとに、何ができるかを書き込む
- 画面の移り変わり（画面遷移）も、簡単に示す
なぜワイヤーフレームが「実りある初回相談」の鍵になるのか
個人・複業でサービスを立ち上げる場面では、開発会社との初回相談にかけられる時間はせいぜい1時間程度です。その短い時間の中で、頭の中にあるイメージを言葉だけで伝えようとすると、次のようなことがよく起こります。
- 「顧客管理ツールを作りたい」と伝えたつもりが、開発会社側は「在庫管理も含むのか」「複数店舗対応が必要なのか」など、こちらが想定していなかった前提を勝手に補って話を進めてしまう
- 発注者側は「画面は1つで十分」と思っていたのに、開発会社側は「一覧画面・詳細画面・編集画面の3画面が必要」と考えていて、後になって認識のズレが発覚する
- 言葉で説明した内容と、実際にイメージしていた画面構成が食い違っていて、見積もりの前提が最初からずれてしまう
こうしたズレは、初回相談の時点では気づかれにくく、要件定義や見積もり提示の段階になって初めて表面化することが多いです。表面化したときには、すでに双方が「認識が合っている」前提で先に進んでしまっているため、修正のコストが大きくなります。
ワイヤーフレームは、この「言葉のズレ」を防ぐための、最も手軽で効果的な手段です。紙に描いた四角と線だけでも、開発会社側は「発注者が何を作りたいのか」を、言葉よりもはるかに正確に理解できます。逆に言えば、ワイヤーフレームを1枚も用意せずに初回相談に臨むことは、認識のズレを放置したまま契約に進むリスクを抱えることでもあります。
なお、ヒアリングの場を実りあるものにするための工夫は、発注者側の準備だけでなく、開発会社側の聞き方にも左右される。この点については、要件定義のヒアリングで失敗しないコツでも詳しく解説されている。
ワイヤーフレームとは何か
ワイヤーフレームとは、Webサイトやアプリの画面に、どの要素をどこに配置するかを、色やデザインを省いた簡易的な線と枠で示した設計図です。装飾を一切気にせず、「どこに何を配置するか」だけを示すことが目的です。
言葉だけで「顧客管理ツールを作りたい」と伝えるより、実際の画面のイメージを見せることで、開発会社側の理解が格段に深まります。
よく混同されるのが「デザインカンプ（完成見本）」との違いです。デザインカンプは、配色・フォント・写真素材まで含めた、完成品に近い見た目のイメージです。一方ワイヤーフレームは、そうした装飾情報を一切含まず、「機能の配置」だけに絞った設計図です。個人が初回相談に持っていくべきは、デザインカンプではなくワイヤーフレームです。デザインの検討は、要件がある程度固まった後の工程であり、初回相談の段階で色やフォントにこだわる必要はまったくありません。
手書きワイヤーフレームの作り方：3つのポイント
ポイント1：完成度は求めず、伝わることを優先する
手書きのワイヤーフレームは、美しく描く必要はありません。四角や線を使って、「ここに入力欄がある」「ここに一覧が表示される」ということが伝われば十分です。デザインの美しさにこだわりすぎず、伝えたい内容が分かることを優先してください。
実際に、開発会社のエンジニアやディレクターは、殴り書きのようなワイヤーフレームを見ることに慣れています。むしろ「きれいに整えようとして時間をかけすぎた結果、内容が薄い」ワイヤーフレームよりも、「線が曲がっていても、伝えたいことがはっきり書かれている」ワイヤーフレームのほうが、圧倒的に役に立ちます。
ポイント2：画面ごとに、何ができるかを書き込む
1つの画面につき、1枚の紙（あるいは1つの枠）を使い、その画面で何ができるかを書き込みます。「顧客の名前を入力する欄」「登録ボタン」「登録済みの顧客一覧」といったように、画面上の要素を簡単な言葉で書き添えることで、見た人が内容を理解しやすくなります。
このとき、「見た目」だけでなく「操作」も書き込むことを意識してください。例えば「一覧表示」と書くだけでは、並び順が新着順なのか、名前順なのか分かりません。「一覧表示（登録日が新しい順）」のように、一言添えるだけで、開発会社側が仕様を推測する手間が減り、見積もりの精度も上がります。
ポイント3：画面の移り変わり（画面遷移）も、簡単に示す
複数の画面がある場合、「この画面のボタンを押すと、次にどの画面に移るか」という流れも、矢印などで簡単に示しておくと、開発会社側が全体の構造を理解しやすくなります。
画面遷移が正しく伝わっていないと、「ボタンを押したら別画面に遷移する」と思っていたものが、実際には「同じ画面の中で表示が切り替わる」仕様として見積もられてしまうことがあります。見た目は似ていても、実装の手間はまったく異なるため、この部分の伝達漏れは、後々の追加費用につながりやすい落とし穴です。
実際に手書きワイヤーフレームを作る手順
- 紙とペンを用意する（デジタルツールを使う必要はありません）
- 必要な画面を、思いつく順にリストアップする
- それぞれの画面を、1枚の紙に手書きで描く
- 画面同士のつながりを、矢印で示す
この手順で作成したワイヤーフレームを、写真に撮って開発会社に事前に送るか、打ち合わせの場で見せることで、口頭だけの説明より、はるかに正確にイメージが伝わります。
手順を具体的な例で見てみる
例えば、個人で「予約管理ツール」を作りたいと考えている場合、次のような手順で進めます。
- まず、必要な画面を書き出します。「予約一覧画面」「予約入力画面」「顧客情報画面」「設定画面」の4つが必要だと分かったとします。
- 次に、それぞれの画面を1枚の紙に手書きで描きます。「予約一覧画面」には、上部に日付を切り替えるボタン、中央に予約の一覧、右上に「新規予約を追加」ボタンを描きます。
- 「予約入力画面」には、顧客名の入力欄、日時を選ぶ欄、メモを書く欄、そして「登録する」ボタンを描きます。
- 最後に、「予約一覧画面」の「新規予約を追加」ボタンから「予約入力画面」へ矢印を引き、「登録する」ボタンを押したら再び「予約一覧画面」に戻る、という流れを矢印で示します。
この4枚の紙があるだけで、開発会社側は「画面数が4つ」「主な操作は予約の登録と一覧確認」という骨格を、初回相談の場でただちに理解できます。言葉だけで説明していた場合と比べて、質問の的が絞られ、相談の時間そのものが有効に使われるようになります。
デジタルツールを使う場合の選択肢
手書きでも十分ですが、より整理された形で伝えたい場合は、簡単な図形描画ツールを使う方法もあります。ただし、ツールの使い方を覚える時間をかけるより、手書きでさっと作成して、早く相談に進むほうが効率的な場合が多いです。
最初のワイヤーフレームは手書きで作成し、開発が進む中で、より詳細な仕様を詰める段階になったら、デジタルツールを検討する、という順番が現実的です。
デジタルツールを使う場合でも、最初から凝ったデザインを目指す必要はありません。あくまで「線と枠」の延長として使うのであれば、手書きと同じ考え方で問題ありません。逆に、デジタルツールを使うことで「きれいに見せなければ」という気持ちが強くなり、本来の目的である「伝わりやすさ」から逸れてしまうこともあるため、その点には注意が必要です。
手書きとデジタル、どちらを選ぶかの判断基準
どちらを選ぶべきか迷う場合は、次のような基準で考えると判断しやすくなります。
- 初回相談まで時間が少ない場合 → 手書きを選ぶ。ツールの操作を覚える時間がもったいないため
- 画面数が多く、後から並び替えたい場合 → デジタルツールを選ぶ。紙だと並び替えや差し替えが手間になるため
- 開発会社と、オンラインで打ち合わせをする場合 → デジタルツールで作成し、画面共有しながら説明できるようにしておくと便利
- 対面で打ち合わせをする場合 → 手書きでも十分。紙を並べて見せながら説明できるため
いずれの場合も、最初の1枚目を描き始めるまでのハードルを低くすることが最優先です。ツール選びに時間をかけすぎて、結局何も準備できないまま初回相談の日を迎えてしまう、という事態が最も避けたい失敗です。
ワイヤーフレームを作る際に、よくある失敗
失敗1：機能を詰め込みすぎる
1つの画面に、あまりに多くの機能を詰め込もうとすると、ワイヤーフレーム自体が分かりにくくなります。予算300万円で何を作るか。機能を削る優先順位のつけ方を先に整理しておくと、ワイヤーフレームもシンプルに作りやすくなります。
例えば、「予約一覧画面」に、予約の確認だけでなく、顧客への一斉メール送信、売上集計、在庫管理まで詰め込もうとすると、1枚の紙に描き切れないほど要素が増えてしまいます。こうなると、開発会社側もどこが本当に必要な機能なのか判断できず、結果として見積もりも高くなりがちです。まずは「この画面で一番やりたいことは何か」を1つに絞り、そこから必要最小限の要素を加えていく描き方が現実的です。
失敗2：デザインの細部にこだわりすぎる
ワイヤーフレームの目的は、機能の配置を伝えることであり、色やフォントといったデザインの細部にこだわる必要はありません。細部にこだわりすぎると、時間がかかりすぎてしまい、本来の目的（相談を実りあるものにする）から逸れてしまいます。
「ボタンの色は何色にしよう」「文字のフォントはどうしよう」といった検討は、要件が固まった後のデザイン工程で行うものです。初回相談の場でそこまで詰めてしまうと、肝心の「どんな機能が必要か」という本質的な議論に時間を使えなくなってしまいます。
失敗3：画面数を最初から絞りすぎる、あるいは広げすぎる
「シンプルに作りたい」という思いから、最初から画面数を1〜2枚に絞り込みすぎてしまうケースもあります。一方で、あれもこれもと機能を思いつくままに広げ、10枚以上の画面を用意してしまうケースもあります。どちらも、開発会社側が全体像を把握しづらくなる原因になります。
理想は、「まず必要な画面を思いつくままに書き出し、その後で本当に初期リリースに必要な画面だけを選び直す」という2段階のプロセスです。書き出す段階では絞り込みを意識せず、後から優先順位をつけて削る、という順番のほうが、抜け漏れが少なくなります。
失敗4：誰の視点で描いているか、書き手自身が混乱する
複数の利用者がいるツール（例えば「利用者用の画面」と「管理者用の画面」がある場合）では、どちらの視点の画面を描いているのか、書き手自身が途中で混乱してしまうことがあります。この混乱は、そのままワイヤーフレームを見る開発会社側にも伝わってしまいます。
対策として、画面ごとに「これは利用者が見る画面」「これは管理者が見る画面」というラベルを、紙の上部に書いておくことをおすすめします。ひと手間ですが、この一言があるだけで、後から見返したときの混乱も、開発会社側の誤解も、大きく減らせます。
失敗5：ワイヤーフレームを作ったこと自体に満足してしまう
意外と多いのが、ワイヤーフレームを頑張って作り上げたことで、「もう準備は十分できた」と満足してしまい、それ以外の準備（予算感の整理や、優先して実現したい機能の順位づけなど）が手薄になってしまうケースです。ワイヤーフレームは、初回相談を実りあるものにするための「材料の1つ」であって、それだけで準備が完了するわけではありません。ワイヤーフレームと並行して、「なぜこのサービスを作りたいのか」「どこまでの予算・期間で考えているのか」といった、言葉で伝えるべき情報も整理しておくことが大切です。
専門知識を活かしたツールで、ワイヤーフレームを作る際の工夫
専門分野の業務ロジックを含むツールの場合、ワイヤーフレームに、専門的な条件分岐や判断の流れも書き込んでおくことをおすすめします。「この条件のときは、こう表示される」という業務ルールを、画面のイメージとセットで示すことで、開発会社側が専門的な要件をより正確に理解できます。
専門用語が多い場合は、ワイヤーフレームの脇に、簡単な注釈として用語の意味を書き添えておくと、開発会社側の理解がさらに深まります。
例えば、士業や専門コンサルタントが、自身の専門知識を組み込んだ診断ツールを作る場合、「ある回答パターンのときは、この結果画面を表示する」という分岐ロジックを、画面のイメージと一緒に描いておくと効果的です。単に「診断結果画面」と書くだけでは、開発会社側はどのような分岐が存在するのか把握できません。一方で、「回答Aの場合はこの結果、回答Bの場合は別の結果」という条件を書き添えておけば、見積もりの段階で必要なロジックの複雑さも正確に伝わり、後から「想定していなかった分岐がある」という手戻りを防げます。
店舗の業務改善ツールで、ワイヤーフレームを作る際の工夫
店舗の業務改善のためのツールでは、実際の業務で使う場面をイメージしながらワイヤーフレームを作ることをおすすめします。「レジ横で、接客中にさっと確認する画面」「閉店後に、まとめて入力する画面」というように、使う場面ごとに画面を分けて考えると、実際の業務フローに合った設計が伝わりやすくなります。
可能であれば、実際に業務を担うスタッフにもワイヤーフレームを見てもらい、「この配置で分かりやすいか」を確認してもらうことをおすすめします。経営者だけの視点では気づけない、現場での使いやすさに関する気づきが得られることがあります。
例えば、飲食店のオーダー管理ツールを検討している場合、「ホールスタッフが接客中に片手で操作する画面」と、「厨房スタッフが調理中に確認する画面」では、必要な情報の量も、文字の大きさへの要望も異なります。この違いを、ワイヤーフレームの段階で書き分けておくことで、開発会社側は「同じアプリの中でも、画面によって求められる操作性が違う」ということを事前に理解でき、設計の精度が上がります。
業種別に見る、ワイヤーフレームの描き方の工夫
同じ「手書きワイヤーフレーム」でも、立ち上げるサービスの業種や特性によって、書き込むべき情報の重点は変わってきます。ここでは、個人・複業でよく検討される3つのパターンを例に、それぞれの工夫を見てみます。
パターン1：予約・スケジュール管理系のツール
美容室、整体院、コンサルティングなど、予約を軸にしたサービスでは、「時間軸」の見せ方がワイヤーフレームの要になります。カレンダー形式で見せるのか、リスト形式で見せるのか、この違いだけで実装の手間は大きく変わります。ワイヤーフレームの段階で、「1日の予約を時間帯で並べたい」「1週間分をカレンダーのマス目で見たい」といった希望を、具体的な形で描き分けておくと、開発会社側の理解が正確になります。
パターン2：診断・コンサルティング系のツール
士業やコンサルタントが提供する診断ツールでは、前述の通り「回答によって表示が分岐する」ロジックが中心になります。ワイヤーフレームには、「質問画面」だけでなく、「その質問にどう答えたら、どの結果画面に進むか」という分岐の道筋を、矢印付きの簡易フローチャートのように描いておくことをおすすめします。分岐の数が多い場合は、ワイヤーフレームとは別に、分岐条件だけをまとめた表を1枚用意しておくと、開発会社側にも伝わりやすくなります。
パターン3：店舗の在庫・受発注管理系のツール
小売店や飲食店の在庫管理ツールでは、「誰が、いつ、どこでその画面を使うか」という利用シーンの書き込みが特に重要になります。前述の通り、レジ横で使う画面と、閉店後の事務作業で使う画面とでは、求められる情報量も操作のしやすさも異なります。ワイヤーフレームの各画面に、「使う場所」「使うタイミング」を一言メモしておくだけで、開発会社側は画面ごとの設計意図をより深く理解できます。
初回相談の当日、ワイヤーフレームをどう使うか
ワイヤーフレームを準備しても、当日の使い方次第で、その効果は大きく変わります。ここでは、初回相談の場でワイヤーフレームを活かすための、いくつかのポイントを紹介します。
事前に共有しておく
打ち合わせの当日に初めてワイヤーフレームを見せるのではなく、可能であれば数日前に、写真に撮ってメールやチャットで共有しておくことをおすすめします。開発会社側が事前に内容を把握しておくことで、当日は「確認したい点」や「気になる点」について、より深い質問が飛んでくるようになります。結果として、限られた相談時間を、より本質的な議論に使えます。
「なぜこの配置にしたか」を説明できるようにしておく
ワイヤーフレームを見せるだけでなく、「なぜこの画面にこの機能を置いたのか」「なぜこの順番で画面が移り変わるのか」という背景も、簡単に説明できるようにしておくと良いでしょう。ワイヤーフレームは「結果」であり、その裏には発注者なりの事業上の理由があるはずです。この理由が伝わることで、開発会社側は、単に指示された配置を実装するだけでなく、「もっと良い実現方法があるかもしれない」という提案もしやすくなります。
その場で修正が入ることを前提にしておく
初回相談では、開発会社側から「この機能は、実装するとこういう制約が出る」「この画面構成なら、こう変えたほうが使いやすくなる」といった意見が出ることが多くあります。手書きのワイヤーフレームは、まさにその場で修正を書き加えやすいというメリットがあります。持参したワイヤーフレームに、その場で赤ペンなどで修正を加えていく、という使い方をすると、打ち合わせの記録としても機能し、後から見返す際にも役立ちます。
完璧な答えを用意していく必要はない
ワイヤーフレームを準備すると、「これで完璧な仕様を伝えなければ」という気持ちになりがちですが、そこまでの完成度は求められていません。むしろ、ワイヤーフレームに書かれていない部分、迷っている部分をそのまま開発会社に伝え、一緒に考えてもらうという姿勢のほうが、良い結果につながることが多いです。ワイヤーフレームは、発注者と開発会社が同じイメージを共有するための「たたき台」であり、そこから対話を通じて仕上げていくものだと考えてください。
初回相談前チェックリスト
初回相談に向けて、ワイヤーフレームを準備する際に確認しておきたい項目を、チェックリストの形でまとめました。
- [ ] 必要な画面を、思いつく範囲でリストアップしたか
- [ ] 画面ごとに、1枚の紙（または1つの枠）に描き分けたか
- [ ] 各画面に、入力欄・ボタン・一覧表示など、主な要素を書き込んだか
- [ ] 一覧表示については、並び順や絞り込みの条件も書き添えたか
- [ ] 画面同士のつながりを、矢印で示したか
- [ ] 1つの画面に機能を詰め込みすぎていないか、見直したか
- [ ] 専門的な条件分岐がある場合、その流れも書き込んだか
- [ ] 専門用語がある場合、簡単な注釈を添えたか
- [ ] 複数の利用者がいる場合、どちらの視点の画面か分かるようにラベルを書いたか
- [ ] 写真に撮って、事前に開発会社へ送る準備をしたか
このチェックリストをすべて満たす必要はありませんが、多くの項目にチェックがつくほど、初回相談での認識のズレは少なくなります。
ワイヤーフレーム準備にかける時間の目安
「どれくらい時間をかけて準備すればいいのか」も、気になるポイントかと思います。目安として、画面数が3〜5枚程度の、個人・複業でよくあるシンプルなツールであれば、1〜2時間程度で一通り描き終えられることが多いです。
時間をかけすぎている場合は、前述の「失敗2：デザインの細部にこだわりすぎる」や「失敗3：画面数を最初から絞りすぎる、あるいは広げすぎる」に陥っている可能性があります。一度手を止めて、「この画面で本当に伝えたいことは何か」を見直してみると、作業が再び前に進みやすくなります。
逆に、30分もかからずに完成してしまった場合は、書き込みが浅すぎる可能性もあります。特に、入力欄や一覧表示の「並び順」「絞り込み条件」など、操作に関わる情報が抜けていないか、もう一度チェックリストと照らし合わせてみることをおすすめします。
まとめ
手書きワイヤーフレームは、専門的なツールも技術も必要とせず、紙とペンだけで誰でも作成できます。それでいて、初回相談の質を大きく左右する、効果の高い準備です。
改めて、押さえておきたいポイントを振り返ります。
- 完成度は求めず、伝わることを優先する
- 画面ごとに、何ができるかを書き込む
- 画面の移り変わり（画面遷移）も、簡単に示す
この3点を意識するだけで、開発会社との初回相談は、言葉だけのやり取りよりもはるかに具体的で、実りあるものになります。相談の前日にでも、まずは1枚、手を動かして描いてみることから始めてみてください。
手書きワイヤーフレームは、決して「立派な設計書」を作ることが目的ではありません。あくまで、あなたの頭の中にあるイメージを、開発会社という第三者にも見える形にする、いわば「翻訳作業」です。翻訳が完璧である必要はなく、大まかな方向性が伝われば、それで初回相談の目的は十分に達成されます。紙とペンさえあれば、今日からすぐに始められる準備です。次にサービスのアイデアを誰かに相談する機会があれば、ぜひ一度、手を動かしてみてください。特別な才能や訓練は不要で、必要なのは「伝えたいことを、図にして残す」という、ほんの少しの手間だけです。
この記事の次に読みたい記事
ワイヤーフレームの作り方を理解したら、次は実際の相談で聞くべきことについても確認しておきましょう。あわせて次の記事も参考にしてください。
