AIでワイヤーフレームを作成し、仕様確定前に画面ごとに承認する
要約： VAONは、AIでワイヤーフレームやモックを作るツールを使い、要件定義書の下書きから画面の下書きを作ります。お客様には、仕様を確定する前に画面ごとにご承認いただきます。画面にすると、文章では決めずに済んでしまう点が表に出ます。必須の入力項目、一覧が空のときの表示、どのボタンを誰が見られるか、といった点です。承認済みのモックは、最終的なデザインではありません。
目次
- なぜ仕様確定の前にモックを作るのか
- 文章では見落とし、モックで見つかることは何か
- AIでワイヤーフレームをどう作り、誰が確認するのか
- お客様には、画面ごとにどう承認していただくのか
- VAONは仕様確定フェーズで画面をどう使っているか
- AIで作るモックの限界
- よくあるご質問
1. なぜ仕様確定の前にモックを作るのか
仕様確定の前にモックを作るのは、同じ一文の要件を読んでも、読む人によって思い浮かべる画面が違うためです。「注文一覧画面。ステータスで絞り込みができる」と書けば、十分に見えます。ところが画面に描くと、ステータスを1つだけ選ぶのか複数選べるのか、並び順はどうするのか、1ページに何件表示するのかを、まだ誰も決めていないことが分かります。
すべての画面のワイヤーフレームを手で描くには手間がかかるため、主要な数画面だけで済ませてしまいがちです。AIでワイヤーフレームやモックを作るツールを使うと、最初の下書きを早く用意できるので、仕様を確定する前にすべての画面を描けます。
VAONのClaude Codeを使った開発フローでは、これがステップ3です。AIがワイヤーフレームやモックの下書きを作り、お客様に画面ごとにご承認いただきます。画面のあるシステムで行う工程で、仕様確定前の質問リストの後に行います。画面を描くには、その質問へのお答えが必要だからです。
2. 文章では見落とし、モックで見つかることは何か
モックで見つかるのは、文章であれば空欄のままにできてしまう決定事項です。「一覧画面がある」は、文章なら1行で済みます。画面は、どの列を表示し、どこにボタンを置くかを決めない限り描けません。
| 文章での書き方 | モックで決めることになる点 |
|---|---|
| 「注文一覧画面がある」 | 表示する列、並び順、注文が1件もないときの表示 |
| 「利用者が注文情報を入力する」 | 必須項目、エラーの表示位置、エラー後に入力内容を残すか |
| 「管理者が注文を承認する」 | 承認ボタンの位置、一般の担当者にボタンが見えるか、承認後にどの画面へ移るか |
| 「スマートフォンでも使える」 | 列の多い表を、幅の狭い画面でどう見せるか |
| 「顧客名を表示する」 | 長い名前を省略するか、折り返すか |
| 「帳票を出力する」 | どの画面にボタンを置くか、絞り込み中の内容だけか全件か |
表の内容は説明のための例で、実際の案件のものではありません。共通しているのは「状態」です。文章はたいてい、すべてが正常に動いているときのことしか書きません。モックでは、データが空のとき、エラーのとき、権限がないときも描く必要があります。
3. AIでワイヤーフレームをどう作り、誰が確認するのか
AIでワイヤーフレームやモックを作るツールは、要件定義書の下書きと、お答えをいただいた質問をもとに画面の下書きを作ります。お客様にお見せする前に、エンジニアが1画面ずつ要件と照らし合わせます。手順は次の4つです。
- エンジニアが、要件定義書の下書きから画面の一覧と画面遷移を書き出します。
- AIが画面ごとの下書きを作ります。データが空の状態とエラーの状態も含めます。
- エンジニアが、すべての入力項目とボタンが要件のどの行に対応するかを確認します。
- 画面上のデータはサンプルデータとし、サンプルであることを明記します。
3番目の確認が必要なのは、AIのツールが「よくあるもの」を足しがちだからです。検索欄、Excel出力のボタン、トップページのグラフなどです。画面に載っていれば、お客様は当然その機能があるものと受け取られます。要件にないものは削除するか、お客様への質問に置き換えます。
4. お客様には、画面ごとにどう承認していただくのか
画面の承認は、まとめてではなく1画面ずつお願いしています。まとめて見ていただくと、「全体的に問題なさそう」で終わりやすいためです。各画面には、次のような短い承認シートを付けます（内容は説明のための例です）。
| 項目 | 内容 |
|---|---|
| 画面 | 注文一覧 |
| 利用者 | 営業担当、管理職 |
| 主な操作 | ステータスでの絞り込み、注文詳細を開く |
| 描いた状態 | 通常、注文なし、読み込みエラー |
| 未決の質問 | 管理職は全拠点の注文を見る必要があるか |
| 結果 | 承認／修正のうえ承認／未承認 |
| 承認者、日付 | （お客様にご記入いただきます） |
チャットでいただいたご意見も含め、VAONがフィードバック管理ファイルに記録するか、バックログのタスクにして、お客様にご確認いただきます。合意した範囲の外にあたるご要望は、変更管理の手順で扱います。費用とスケジュールへの影響を書面でお示しし、ご承認をいただいてから着手します。
承認済みの画面は、要件定義書に反映します。後の工程では、画面キャプチャ付きの受入テストのチェックリストで確認していただく際の比較の基準にもなります。
5. VAONは仕様確定フェーズで画面をどう使っているか
VAONの仕様確定フェーズでは、画面ごとのワイヤーフレームが成果物の一つです。ほかに、要件定義書、データベース設計、システム構成、開発フェーズの固定見積りをお渡しします。期間は通常1〜2週間、大規模な案件では2〜4週間で、ブリッジSE（BrSE）とテックリードが主導します。
まだシステムをお持ちでないお客様の場合は、業務のヒアリング、画面の作図、データ設計を行います。足りない決定の多くは、画面を描く段階で表に出ます。ボタンが何をするのか分からなければ、ボタンは描けないからです。仕様の不足が案件をつまずかせる理由は、オフショア開発が失敗する本当の理由は、仕様書にあるでご説明しています。
高知工科大学のSeminar Naviは、LINEアプリ（LIFF）、PWA、管理画面で構成されています。構築前に決めたことの一つが、学生が4つの手順、約1分で使い始められること、そして氏名を収集しないことでした。「4つの手順」は文章で書けますが、確かめられるのは、実際の画面を数えたときです。
6. AIで作るモックの限界
AIで作るモックは、画面に何を載せるかを合意するためのもので、最終的な画面デザインではありません。次の5点は、あらかじめ押さえておく必要があります。
- モックは、ほぼ完成した製品ではありません。 画面の見た目が整っているほど、システムも完成間近だと受け取られやすくなります。Nielsen Norman Groupは、粗いプロトタイプを見た人は、それが翌日に出荷されるとは考えない、と述べています（UX Prototypes: Low Fidelity vs. High Fidelity）。お送りする版には、内容確認のための下書きであることを明記しておくのが確実です。
- ピクセル単位の確認には使いません。 色、フォント、余白は、内容が合意できた後の画面デザインで決めます。
- 画面からは、裏側のロジックは見えません。 計算式、端数処理、データ単位の権限、性能は、引き続き要件定義書に書く必要があります。
- サンプルデータは、実データよりきれいに見えます。 短い名前、切りのよい数字、1ページに収まる一覧です。長い名前や空の一覧など、「見栄えの悪い」サンプルデータの画面も用意しておくことをおすすめします。
- 画面のないシステム。 バッチ処理やシステム間のAPIでは、モックよりもデータの流れの図が向いています。
7. よくあるご質問
ワイヤーフレームとモックは、何が違うのですか。 ワイヤーフレームは、レイアウト、入力項目、ボタンだけを示す簡単な枠組みで、灰色で描くことが多いものです。モックは実際の見た目に近く、色やフォントが入ることもあります。仕様確定の前に確かめたいのは、画面に何があり、何ができるかです。そのため、通常は簡単な枠組みで足ります。レイアウトが業務上の判断に関わる場合だけ、より詳しいモックを作ります。
承認したモックが、最終的なデザインになりますか。 なりません。承認済みのモックで確定するのは内容です。画面にどの項目とボタンがあり、誰が何を見られ、操作の後にどこへ移るかです。色、フォント、見た目の細部は、その後の画面デザインの工程で決めます。貴社のブランドガイドラインに沿った画面が必要な場合は、その作業を範囲として別途取り決めます。
画面を承認した後でも、修正できますか。 できます。仕様確定の前であれば、画面の修正はごく普通のことで、この工程の目的そのものです。仕様確定の後は、変更管理の手順で扱います。費用とスケジュールへの影響を書面でお示しし、ご承認後に着手します。ご承認いただいていない作業の請求書をお送りすることはありません。
デザインツールの使い方を知っている必要はありますか。 必要ありません。お客様には、閲覧用の画面と、画面ごとの承認シートをお送りします。確認していただきたいのは、その画面が利用者の業務に合っているか、足りないものはないか、誰に何を見せるべきか、の3点です。チャットでいただいたご意見も、VAONがフィードバック管理ファイルやバックログに記録し、ご確認をお願いします。
モックの作成に、自社の実データは必要ですか。 必要ありません。モックは画面の内容を確認するためのものなので、サンプルデータで足ります。サンプルであることも明記します。作業を始める前に、どのデータを使ってよいか、資料をAIツールに渡してよいかをお客様と取り決めます。許可をいただいていない場合、お客様の資料をAIツールに渡すことはありません。
今日からできることが一つあります。ご依頼内容の中から画面を1つ選び、データが1件もないとき、利用者が誤った入力をしたときに何を表示するかを、紙に描いてみてください。手が止まった箇所が、仕様を確定する前に決めておくべき質問です。
構築の契約の前に、貴社の案件の画面をご覧になりたい場合は、無料相談（60分）をご利用ください。CEOが同席します。資料のご準備は不要で、ご契約を前提としたものではありません。
参考資料
- Nielsen Norman Group, Kara Pernice「UX Prototypes: Low Fidelity vs. High Fidelity」2016年12月18日：https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/（2026年10月29日確認）
