中身から書き始めると、置き場所が無い
決めごとができたので次は作るんですけど、僕は中身より先に空っぽの画面を作らせました。記事を100本書いても、並べる場所が無ければ誰も読めない。器が先にあれば、書いたものをその日のうちに置いて読んでみて、読みにくければ器のほうを直せます。
最初に作らせたのは、この4画面
| 画面 | 何をする場所か |
|---|---|
| ホーム | 次に何を触ればいいかを1つ出す |
| 一覧 | コースが並んでいて、選べる |
| コースの中 | STEPが順番に並んでいる |
| 本文 | 読んで、終わったら印を付ける |
中身は「コース1」「STEP1」みたいな仮の文字だけですが、押して移動できる状態にしてあるので、どこが行き止まりになるかがこの時点で見えます。いま読んでいるこのページも、その4番目に中身が入った物です。
器と一緒に渡した、優先順位の5行
画面の作り方は任せましたが、何を優先するかだけは先に渡しています。上から順に強くて、迷ったら上を取る、という決めごとです。
- 初心者が迷わない
- 情報を減らす
- 操作を説明文で補わない
- 1画面の目的を増やしすぎない
- 必要な情報は、必要な瞬間だけ見せる
いちばん変わったのは2番目です。AIは足すほうを選びがちなので、減らす側に倒すと決めておかないと、画面がどんどん賑やかになる。この5行を渡してから、「ここに説明文を足しますか」と聞かれる回数が、はっきり減りました。
「おしゃれにして」では出てきません
見た目を言葉で説明しようとすると、たいてい失敗します。
静かな感じで、余白を広めに、と言葉で頼んでいた頃は、出てくるものが毎回違いました。浮かぶ絵がこちらと向こうで一致していないからで、なので今回は、言葉で説明するのではなく、最初から見本を渡すようにしました。
見本の画像を渡します。この見本の、余白の取り方や、UI・UXの部分を分析してください。そのうえで、それを参考にして作ってください。
補足 僕が実際に送った頼み方です。見本の画像を一緒に添付します。
これだけで、画面の整い具合が一気にそろいました。借りたくないところがあるときだけ、「影は要らない」のように名指しで外します。
違うところは、3つに分けて言う
思ったのと違うときは、どこが・いまどうなっているか・本当はどうしたいか、の3つをそろえて言います。「喋れば創れる Vibe Coding」でやっている直し方と同じで、画面にもそのまま使えます。
一覧の画面なんですが、カードが横に4つ並んでいて、1枚ずつが小さくて絵の中身が読めません。本当は、絵が読める大きさのまま横に並んでいてほしいです。並ぶ数のほうを減らして調整できますか。
補足 どこが・いまどうなっているか・本当はどうしたいか、の順に入っています。
出てきた画面が素っ気なくて、これで本当に完成するのか不安になる。
器の段階は中身が仮の文字なので、どうしても間が抜けて見えます。僕も最初の画面を見たときは、正直これでいけるのかと思いました。文字が本物になって絵が入ると、印象は変わります。見た目の判断は、中身が入るまで保留してください。