手書きの画面スケッチをAIに渡してWebツールの画面を作る：伝え方と直し方

AIに任せること、人が決めること

• 何のツールで、誰がどんな場面で使うか、担当：人
• 部品の種類、文言、並び順、担当：人(スケッチとメモ)
• HTML/CSSへの書き起こし、担当：AI
• 見た目の微調整案の提示、担当：AI
• 意図どおりか、使いやすいかの確認、担当：人

画像を読み取れるかどうか、画像の大きさや枚数の制限は、使うツールごとに違います。使う前に、そのツールの説明で確認してください。

スケッチの描き方は3つだけ決める

1. 部品は四角で描き、1つずつ番号を振る。 丸や装飾は不要です。
2. 上から下へ読める順に並べる。 横に並べたい部品がある場合だけ、同じ高さに描きます。
3. 文字は必要な箇所だけ書く。 細かい文言はスケッチではなくメモに書きます。

紙をスマホで撮るなら、影が入らないよう真上から撮り、番号が読めるか確認します。名前、住所、取引先名など実在の情報は書かず、「山田」「1,000円」のような架空の値にしてください。

部品名メモの書式

スケッチに添えるメモは、次の形にそろえます。

【画面名】
【使う人と場面】
【並び順】上から下 / 2列 など
[番号]｜部品の種類｜表示する文字｜状態・条件

部品の種類は、見出し、テキスト入力、数値入力、選択肢、チェック、ボタン、結果表示、注意書きのように、日本語の一般的な呼び名で十分です。HTMLのタグ名を覚える必要はありません。

記入例(説明用の例:割り勘計算)

【画面名】割り勘計算
【使う人と場面】飲み会の幹事。スマホを片手で操作する
【並び順】上から下、1列
[1]｜見出し｜「割り勘計算」｜-
[2]｜数値入力｜ラベル「合計金額(円)」｜必須、初期値なし
[3]｜数値入力｜ラベル「人数」｜必須、初期値2
[4]｜ボタン｜「計算する」｜-
[5]｜結果表示｜「1人あたり ○○円」｜計算前は非表示
[6]｜注意書き｜「端数は切り上げます」｜常に表示

書くときのポイント

• 入力欄には「ラベル」を必ず書きます。 入力欄の中に薄く出る例の文字(プレースホルダー)と、入力欄の上に常に見えるラベルは別物です。W3Cのフォームのラベルに関するガイドは、見えるラベルを用意し、ラベルは欄の左か上に置くことを勧めています。メモでも「ラベル」と「例の文字」を分けて書くと、AIが取り違えにくくなります。
• 状態を書きます。 「計算前は非表示」「未入力ならボタンを押せない」など、時間とともに変わる部分は絵に出ないので、文字だけが頼りです。
• 書いていないことは任せると決めます。 色やフォントを指定しないなら、「配色はシンプルな白基調で」と一言入れて、AIの判断範囲を示します。

最初の依頼文

スケッチの画像とメモを一緒に渡し、次のように頼みます(説明用の例)。

添付は手書きのスケッチと、番号ごとの部品メモです。
この内容どおりに、1枚のHTMLファイル(CSSは同じファイル内)で
画面を作ってください。

条件:
- 番号の順序と部品の種類を変えない
- 入力欄にはすべて、常に見えるラベルを付ける
- 計算の処理はまだ作らず、ボタンを押しても何も起きなくてよい
- メモにない部品を足さない
- 最後に、スケッチと違うところがあれば箇条書きで知らせる

「計算の処理はまだ作らない」と区切るのが大事です。見た目と動きを同時に頼むと、どちらが原因でずれたのか分からなくなります。画面の形が合ってから、計算を別の依頼で頼みます。

「メモにない部品を足さない」と「違うところを知らせる」は、AIが親切心で付け足した部品に気づくための保険です。

修正依頼を一点ずつ出す

最初の出力は、まず見て、直したい点を全部メモに書き出します。そのうえで1つずつ頼みます。一度に複数頼むと、どれが効いて、どれが無視され、どこが別の箇所を壊したのかが追えなくなるためです。

修正依頼の型

対象:[番号]
今の状態:
直したい状態:
変えないところ:

文例(説明用の例)

• 「もっと見やすくして」、一点ずつの頼み方：対象:[4] 今の状態:ボタンが画面の左端に小さくある。直したい状態:幅を画面いっぱいにし、高さを今の約1.5倍にする。変えないところ:文言と色
• 「入力欄を直して、結果も目立たせて」、一点ずつの頼み方：対象:[2] 今の状態:ラベルが入力欄の右にある。直したい状態:ラベルを入力欄の上に置く。変えないところ:[3]以降の並び
• 「順番が違う」、一点ずつの頼み方：対象:[3]と[4] 今の状態:[4]が[3]より上にある。直したい状態:スケッチどおり[3]の次に[4]。変えないところ:文言

一つ直したら、画面を開き直して確認してから次を頼みます。意図とずれたときは、「直したい状態」を言い換えて同じ点をもう一度頼みます。別の点を足さないことで、ずれの原因を切り分けられます。

人が確認すること

AIの出力を受け取ったら、次を自分で見ます。

• ラベルが入力欄の近くに見えているか。 入力欄とラベルを結びつけるには、<label>要素を使うのが基本です。MDNの<label>の解説では、for属性とidを対応させる方法や、入力欄をラベルで包む方法が説明されています。結びついていればラベルをクリックしたときに入力欄へ移動できるので、実際にラベルの文字をクリックして確かめます。
• Tabキーで移動した順が、スケッチの番号順か。 見た目は合っていても、移動順がずれていることがあります。
• ページの区分けが適切か。 見出しや本文など、役割ごとにheader、main、footerなどの要素を使うと、支援技術がページの構造をたどりやすくなります。MDNの文書構造の解説によると、mainはページに1つ、そのページ固有の内容を入れるものです。気になる場合は、AIに「この画面で使っている要素と、その役割を表で説明して」と頼めます。
• スマホ幅でも崩れないか。 ブラウザの幅を狭めて、ボタンや入力欄がはみ出さないか見ます。
• メモにない部品が増えていないか。 最初の依頼文で頼んだ「違うところの報告」と、実際の画面を見比べます。

次の画面を頼むとき

別の画面を作るときも、同じ書式を使い回せます。メモを書き換えて、「前の画面と同じ見た目で」と添えれば、並びや余白の感じをそろえる指示になります。

まずは、紙に四角を3〜4個描いて番号を振り、上のメモ書式の下書きを作るところから始めてみてください。