業務システムの画面のワイヤーフレームを、AIで作れるか試してみた

業務システムの相談では、「こういう画面がほしい」という話が、言葉だけで進むことがよくあります。言葉だけだと、頼む側と作る側で思い浮かべている画面が違っていても、気づくのは画面ができあがってからです。

それを防ぐのが、ワイヤーフレームです。ワイヤーフレームは、色や飾りを付けずに、画面のどこに何を置くかだけを描いた図のことです。一覧にどの列を並べるか、ボタンをどこに置くか、入力欄は何があるか。それを図で見せれば、「この列はいらない」「この欄が足りない」が、作る前に分かります。

画面の図には、作り込みの度合いでいくつかの段階があります。手書きの線や灰色の箱で配置だけを示すワイヤーフレーム、色や文字の大きさまで決めたデザイン、ボタンを押すと次の画面に進む試作品（プロトタイプ）です。要件を固める段階で役に立つのは、いちばん手前のワイヤーフレームです。作り込んでいないので、「ここを変えたい」と言いやすく、直すのも早いからです。

ただ、ワイヤーフレームを描くには、慣れと時間がいります。そこで、要件をまとめたメモを生成AIに渡して、ワイヤーフレームの下書きを作らせられるかを試しました。

結論：項目は漏れなく入る。決まっていないことを「決めて描く」ので、そこを人が拾う

結論を先に書くと、次の3つです。

• メモに書いた項目は、9回とも全部画面に入った。 画面に置くべき34の項目を先に決めておいたところ、頼み方や出力の形を変えても、毎回34項目すべてが画面に置かれた。
• ふつうに頼むと、決まっていないことを黙って決めて描く。 「誰が担当を入れられるか」「作業員はどこまで見られるか」など、メモで決めていないことを、3回とも画面の上で決めていた。見た目は完成品に近く、決めたことに気づきにくい。
• 決まりを渡すと、決めずに質問として返してくる。 「メモにない項目には（提案）と付ける」「決まっていないことは最後に箇条書きにする」と頼むと、確認したいことが約30個に増え、こちらが用意した正解表で見落としていた点まで挙がった。

つまり、AIはワイヤーフレームの下書きと、聞くべきことの洗い出しには十分に使えます。人が受け持つのは、AIが決めたことを見つけて、本当にそれでよいかを確かめることです。

試したこと

架空の修理会社の、要件メモ

空調や給湯器の修理を受けている、架空の会社のメモを用意しました。紙の受付表と Excel で管理している修理の受付を、ブラウザで見られる管理画面にしたい、という想定です。画面は3つで、2つは会社のパソコン、1つは現場の作業員のスマホで使います。

【修理受付の管理画面　要件メモ】

いまは紙の受付表とExcelで修理の受付を管理している。これをブラウザで見られる管理画面にしたい。

使う人
・受付事務2人（会社のパソコン）
・課長1人（会社のパソコン）
・作業員6人（スマホ。現場で使う）

■ 画面1　受付の一覧（事務と課長がパソコンで見る）
・毎朝、「今日訪問する分」と「まだ担当が決まっていない分」を確かめたい
・お客様の名前か電話番号で探したい
・急ぎの依頼は目立たせたい
・一覧で見たいのは、受付番号、受付日、お客様名、依頼の内容（短く）、状態、担当、訪問予定日
・状態は「受付済み」「担当決定」「訪問済み」「部品待ち」「完了」の5つ
・ここから新しい受付を登録できるようにしたい

■ 画面2　受付の登録・詳細（事務がパソコンで入力する）
・お客様名、電話番号、住所
・機器の種類（エアコン／給湯器／その他）、型番（わかれば）
・症状
・急ぎかどうか
・訪問の希望日時（第2希望まで）
・担当と訪問予定日は、課長が決める
・修理代が5万円を超えるときは、先に見積を出してお客様の了承をもらう。見積の金額と、了承をもらった日を残したい

■ 画面3　作業員の今日の予定（作業員がスマホで見る）
・自分の今日の訪問先を、時間の順に見たい
・住所から地図を開けるようにしたい。お客様に電話もかけたい
・訪問が終わったら「訪問済み」にして、作業の内容とかかった時間を書く
・写真を3枚まで付けたい

画面に入るべきものと、決まっていないことを、先に決めた

AIに作らせる前に、正解表を作って固定しました。あとから結果を見て基準を変えないためです。

1つ目は、画面に置くべき項目です。メモに書いてある項目を数えると、画面1が13、画面2が14、画面3が7で、合わせて34になります。入力欄や表示、ボタンとして画面に置かれていれば入った、注記の文章で触れただけなら入っていない、と数えます。

2つ目は、メモでわざと決めていないことです。実際の要件メモでも、書く人にとって当たり前のことほど抜けます。それを7つ仕込みました。

これらを、確認したいこととして挙げたか、それとも画面の上で黙って決めてしまったかを記録しました。

頼み方と出力の形を変えて、9回作らせた

使ったのは、Anthropic社の生成AI「Claude」（Opus 5.5）です。2026年11月9日に試しました。過去のやり取りやほかの資料は一切読ませず、頼み方の文章とメモだけを渡しています。同じ条件でも答えが毎回変わるので、1つの条件で3回ずつ作らせました。

ふつうの頼み方は、「次の要件メモから、画面のワイヤーフレームを作ってください。1つの HTML ファイルで出力してください。」の2文だけです。決まりは6つで、文章は記事の後半に載せています。

1回にかかった時間は、HTML で81〜105秒、文字だけで58〜66秒でした。

結果①：34の項目は、9回とも全部入った

条件にかかわらず、9回とも34の項目すべてが画面に置かれました。状態の5つの値も、9回とも一覧や選択肢として画面に出ています。

「型番（わかれば）」は任意の入力と分かるように書かれ、「訪問の希望日時（第2希望まで）」は第1希望と第2希望の2行になり、写真は3枚分の枠が並びました。メモの言葉を、画面の部品に置き換える作業は、ほぼ正確です。

メモに書いたことを画面に起こすだけなら、AIに任せて困ることはほとんどありません。差が出たのは、メモに書いていないことの扱いでした。

結果②：ふつうに頼むと、決まっていないことを決めて描く

ふつうの頼み方で作った3回は、見た目が完成品に近いものでした。灰色だけでなく色が付き、一覧には例のお客様名や日付が入り、2回は画面の上のタブで3つの画面を切り替える作りです。

その一方で、メモで決めていないことを、画面の上で決めていました。

どれも、もっともらしい決め方です。けれども、要件メモには書いていません。たとえば「担当は課長が決める」というメモから、「事務は担当を入力できない」と決めてしまうと、課長が休みの日に誰も担当を入れられないシステムになります。

さらに、メモにない機能も印なしで足されていました。3回で足されたものを並べると、次のとおりです。

• 電話番号を入れると、同じ番号の過去の受付を知らせる表示（2回）
• 見積が必要かどうかを選ぶ欄と、了承日が空のときの警告（2回）
• 誰がいつ何を変えたかの記録（1回）
• 了承日が空のままでは「完了」にできない決まり（1回）
• 作業員がスマホから「部品待ち」を選べる欄（1回）
• 電波が悪くて送れなかったときに、入力を消さずに残す動き（1回）

1回は、足した機能に「あるとよい機能」と書き添えていましたが、ほかは画面の一部として自然に描かれていました。どれも便利そうな機能です。ただ、作る量が増えれば費用と期間も増えます。要件として本当に要るかは、頼む側が決めることです。

確認したいことは、3回とも6〜7個にとどまりました。正解表の7つのうち挙げたのは3〜4個で、「見積を誰が判断するか」「部品待ちの扱い」「完了は誰がするか」の3つは3回とも挙げています。

出力の量も、ふつうの頼み方のほうが多く、HTML の文字数は1回あたり約2万字でした。決まりを渡した HTML は約1万3千〜1万7千字です。色や例のデータ、画面を切り替える仕組みに、そのぶんの量が使われています。

見た目が整っているほど、読む人は「もう決まっている」と受け取りがちです。決めたことが画面に溶け込んでいるので、どこが AI の判断なのかを見分けるのは、メモと1つずつ見比べないと難しい状態でした。

結果③：決まりを渡すと、決めずに質問として返してくる

決まりを渡した6回は、様子が変わりました。

メモにない項目には「（提案）」が付き、HTML では16〜20か所、文字だけでは26〜30か所に印がありました。受付番号の自動採番、保存や戻るのボタン、作業員の画面の機器名など、足した理由が分かるものばかりです。何が足されたかを、印を探すだけで確かめられます。

確認したいことは、1回あたり約25〜30個に増えました。正解表の7つのうち挙げた数は、決まりを渡した6回で4〜6個（平均4.7）です。ふつうの頼み方の3回（平均3.7）より、少し増えました。

それでも、すべては拾えていません。「受付の取り消しや削除」を挙げたのは9回中2回、「急ぎの基準」は9回とも挙がりませんでした。メモの言葉から読み取れる疑問は拾えても、メモに一言も出てこないことは、AIにも思いつきにくいようです。

結果④：正解表で見落としていた点を、AIが挙げた

正解表を作ったこちらも、見落としがありました。いちばん大きいのは、訪問予定の時刻です。

メモでは、課長が決めるのは「訪問予定日」です。一方で、作業員は今日の訪問先を「時間の順に」見たいと書いています。日付だけでは、時間の順には並べられません。決まりを渡した6回はすべて、この食い違いを確認したいことに挙げました。ふつうの頼み方では、2回が黙って時刻の欄を足し、1回が欄を足したうえで確認に挙げています。

ほかにも、正解表になかったけれども、実際の打ち合わせで聞くべき点がいくつも挙がりました。

• 見積の金額は税込か税抜か。5万円ちょうどは見積が要るか
• お客様が見積を了承しなかったときは、どう記録するか
• 実際にかかった修理代を残す欄は要るか（メモには見積の金額しかない）
• 担当は1件につき1人か。2人で行くことはあるか
• 「担当が決まっていない分」と、状態が「受付済み」の分は同じ意味か
• 作業員が書いた作業の内容や写真を、事務や課長も見られるようにするか
• いまの紙や Excel の過去のデータを、新しい画面に移すか

要件をまとめた人が気づいていない食い違いを見つける、という使い方では、AIはかなり役に立ちます。

AIが挙げた質問の例

決まりを渡した回の「確認したいこと」から、画面ごとに、打ち合わせでそのまま使えそうなものを抜き出しました（言い回しは少し整えています）。

画面1　受付の一覧

• 「今日訪問する分」と「担当が決まっていない分」は、切り替えて見るか、2つの表を同時に並べるか
• 「今日訪問する分」に、もう「訪問済み」や「完了」になったものも出すか
• 一覧の並び順は、受付日の順か、訪問予定日の順か、急ぎを先頭にするか
• 「依頼の内容（短く）」は、症状の書き出しを自動で切って出すか、別に短い説明を入れるか

画面2　受付の登録・詳細

• 受付番号は自動で付けるか。いまの紙や Excel の番号の付け方に合わせるか
• 機器の種類で「その他」を選んだとき、機器の名前を書く欄は要るか
• 訪問の希望日時は、10時のような時刻か、午前・午後のような幅か

画面3　作業員の今日の予定

• 「かかった時間」は、1時間30分のような長さか、始めた時刻と終わった時刻か
• 写真は、その場で撮るだけか、スマホに保存してある写真から選べるようにするか
• 「訪問済み」にしたあとで、作業の内容を直せるようにするか
• 作業員が現場で「部品待ち」にすることはあるか

どれも、答え次第で画面の作りが変わる問いです。こうした問いが開発の途中で見つかると、作り直しになります。画面を作る前に、まとめて聞けるのが利点です。

結果⑤：文字だけでも十分。ただし罫線はずれる

HTML ではなく、罫線と記号の文字だけで描かせた3回も、34の項目はすべて入り、確認したいことの数も HTML と変わりませんでした。たとえば、作業員の画面の記録の入力は、次のように描かれています（3回目の出力から抜き出したもの）。

┌──────────────────────────┐
│ ＜ 戻る                  │
├──────────────────────────┤
│ ○○ ○○ 様               │
│ 住所 〒000 ○○市…       │
│ ［ 地図を開く ］          │
│ ［ 電話をかける ］        │
├──────────────────────────┤
│ 作業の内容                │
│ ┌──────────────────────┐ │
│ │                      │ │
│ └──────────────────────┘ │
│ かかった時間              │
│ ［    ］時間［    ］分   │
│ 写真（3枚まで）           │
│ ┌────┐┌────┐┌────┐ │
│ │ ＋ ││ ＋ ││ ＋ │ │
│ └────┘└────┘└────┘ │
├──────────────────────────┤
│  ［   訪問済みにする   ］ │
└──────────────────────────┘

文字だけの形は、チャットの画面にそのまま表示でき、メールや議事録にも貼れます。生成にかかる時間も、HTML より2〜4割短く済みました。

ただし、全角と半角の文字が混ざるため、表示する場所によっては右端の罫線がずれます。配置の確認には使えますが、そのまま資料として見せるには手直しが要ります。打ち合わせで画面を見せたいときは HTML、項目と配置を確かめ合うだけなら文字だけ、と使い分けるのがよさそうです。

使うときに、人が確かめる3つのこと

1. AIが決めたことを、メモと見比べて洗い出す

ふつうに頼んだ場合は特に、画面の上で決められたことを探す作業が要ります。権限（誰が何を入力・変更できるか）、状態の変わり方、表示する範囲の3つは、AIが決めやすく、あとから直すと影響が大きい所です。ここを最初に確かめます。

2. 「確認したいこと」を、打ち合わせの議題に絞る

決まりを渡すと、確認したいことが約30個になります。全部を打ち合わせで聞くと時間が足りません。権限や状態の変わり方のように、画面の数や作りが変わる問いを先に、表示の細かい好みはあとに回すと進めやすくなります。

あわせて、権限と状態の変わり方は、表にしておくと確かめやすくなります。たとえば今回のメモなら、次のような表です。空欄や「？」が、決めるべきことです。

AIが画面の上で決めたことを、この表に書き写していくと、どこを決めたのかが一目で分かります。AIに「この表も作ってください」と頼むこともできますが、空欄を埋めるのは、業務を知っている人の仕事です。

3. メモに一言も出てこないことは、人が考える

受付の取り消しや、急ぎの基準のように、メモに出てこないことは、AIにも拾いにくいものでした。削除や取り消し、間違えたときの直し方、担当者が休んだとき、のような「いつもと違うとき」は、人が意識して足す必要があります。

自社で試す手順

自社の要件で試すときは、次の順で進めます。

1. 画面ごとに、見たいことと入れたいことを箇条書きにする：今回のメモくらいの粒度で十分です。使う人と端末（パソコンかスマホか）も書きます。
2. 名前や金額を置き換える：お客様名や取引先、実際の単価などは、役割や仮の値に置き換えます。
3. 決まりを付けて頼む：下の文章に、メモを続けて貼ります。
4. AIが決めたことと（提案）を見る：上の1つ目です。
5. 確認したいことを絞って、社内や開発会社と話す：上の2つ目です。
6. いつもと違うときを、人が足す：上の3つ目です。

今回使った、決まりを渡す頼み方は次のとおりです。

次の要件メモから、画面のワイヤーフレームを作ってください。次の決まりを守ってください。

1. 1つの HTML ファイルで出力する。外部のファイルやライブラリは読み込まない。
2. 色は白・黒・灰色だけにし、箱と文字で描く。画像は灰色の箱で表す。
3. 画面ごとに見出しを付ける。スマホで使う画面は幅375pxの枠の中に描く。
4. 要件メモに書いてある項目は、すべて画面に置く。
5. 要件メモに書いていない項目は足さない。どうしても必要と考えて足すときは、その項目の横に「（提案）」と書く。
6. 要件メモで決まっていないこと・読み方が分かれることは、勝手に決めず、HTML の最後に「確認したいこと」として箇条書きにする。

文字だけで描かせたいときは、1〜3を「HTML ではなく、文字だけで描く。画面ごとに、罫線や記号で配置を表す」に置き換えます。HTML で受け取った場合は、内容をメモ帳などに貼って「.html」の名前で保存すると、ブラウザで開けます。

6つの決まりには、それぞれ理由があります。

• 1（1つの HTML、外部を読み込まない）：受け取ったファイルを、そのままブラウザで開けるようにするためです。外部の部品を読み込むと、ネットにつながっていない環境で崩れることがあります。
• 2（白・黒・灰色だけ）：見た目の好みの話に流れず、配置と項目の話に集中するためです。色や例のデータが入っていると、完成品のように見え、決まっていないことまで決まっているように受け取られがちです。
• 3（画面ごとの見出し、スマホは幅375px）：画面とメモの対応を確かめやすくし、スマホの画面がパソコンの幅で描かれるのを防ぎます。
• 4と5（メモの項目は全部置く、足すなら印を付ける）：入るべきものが入ったか、余計なものが足されていないかを、印を探すだけで確かめられるようにします。
• 6（決まっていないことは最後に箇条書き）：今回の結果でいちばん効いた決まりです。これがないと、AIは決めて描きます。

なお、デザインの道具そのものにも、文章から画面を作る機能があります。たとえば Figma には、文章から編集できるワイヤーフレームやデザインを作る「First Draft」があり、Professional などの有料プランで使えると公式のヘルプに書かれています。2026年5月20日からは、Figma のエージェント（ベータ版）がこの機能の入口になると案内されています。今回はそうした道具は試していません。ただ、どの道具で作っても、AIが決まっていないことを決めて描く点には、同じように気をつける必要があると考えます。

ワイヤーフレームを開発会社に渡すときに添えるもの

AIで作ったワイヤーフレームを、そのまま開発会社に渡すだけでは、意図が伝わりきらないことがあります。次のものを一緒に渡すと、見積や設計の話が早く進みます。

• もとの要件メモ：画面の項目が、どの要件から来ているかを開発会社が確かめられます。
• 権限と状態の表：上で作った表です。空欄が残っていれば、そのまま「未定」と書いておきます。
• 確認したいことへの答え：社内で答えが出たものと、まだ決まっていないものを分けて書きます。決まっていないものは、開発会社と一緒に決める項目になります。
• （提案）の扱い：AIが足した項目のうち、採用するもの・しないもの・迷っているものを分けます。
• いま使っている紙や Excel：今回のメモなら、紙の受付表です。いまの項目や書き方は、画面の項目を決める手がかりになります。

ワイヤーフレームは、完成した設計図ではなく、話し合うための材料です。AIで早く作れるようになったぶん、話し合いに時間を回せます。

この試しの限界

今回の結果は、次の条件のもとでのものです。

• メモは架空で、画面は3つ：実際の業務システムは、画面が数十になることもあります。画面が増えると、抜けや食い違いが増える可能性があります。
• 作った側が、答えを知っている：メモも正解表も、同じ側が作っています。実際、正解表を作ったこちらも「訪問予定の時刻」を見落としていました。
• AIは1つ、回数は少ない：使ったのは1つのAIで、条件ごとに3回です。別のAIや、別の時期のモデルでは結果が変わる可能性があります。
• HTML は見本で、動く仕組みはない：作らせた HTML は、画面の見た目を示すだけのものです。入力した内容が保存されたり、一覧が実際に絞り込まれたりはしません。
• 使いやすさは確かめていない：今回確かめたのは、項目が入ったか、決まっていないことをどう扱ったかです。画面が使いやすいかどうかは、実際に使う人に見てもらわないと分かりません。

おわりに

要件メモから画面のワイヤーフレームを作らせると、今回の条件では、メモに書いた34の項目が9回とも画面に入りました。白紙から描き始める手間は、かなり減らせます。決まりを渡せば、要件をまとめた側が気づいていなかった食い違いまで、質問として返ってきます。

気をつけたいのは、ふつうに頼んだときの「決めて描く」振る舞いです。整った画面は、決まっていないことまで決まっているように見せます。誰が何を入力できるか、状態がどう変わるか、何を見せるか。この3つをメモと見比べて確かめ、いつもと違うときを人が足せば、AIの下書きは、開発会社と話すための確かな材料になります。

画面を考える前に、業務の流れを整理しておくと、確認したいことに答えやすくなります。進め方は、業務の流れを図にすると、走り書きの業務メモから、業務の流れ図をAIで作れるか試してみたにまとめています。要件全体のまとめ方は、要件定義とはをご覧ください。