器から作らせる／アステル

決めごとが1枚できたので、次は作ります。ここで普通は中身から手を付けたくなるんですけど、僕は先に空っぽの画面を作らせました。

理由は単純で、記事を100本書いても、それを並べる場所が無ければ誰も読めないからです。逆に器が先にあると、書いたものをその日のうちに置いて、実際に読んでみて、読みにくければ器のほうを直せる。

中身は全部仮の文字です。「コース1」「STEP1」みたいなものが並んでいるだけ。それでも押して移動できる状態にはしてあって、自分で押して回れる。この時点で見えるんですよね、どこが行き止まりになるかも。

いま読んでいるこのページも、その4番目です。器が先にできていて、そこへ中身が入っただけ。

画面の作り方は任せましたが、何を優先するかだけは先に渡しています。これも実物です。

並べ方に意味があって、上から順に強い。迷ったときは上のほうを優先する、という決めごとです。2番目が効きます。何かを判断させるとき、AIは足すほうを選びがちなので、減らす側に倒すと決めておかないと、画面がどんどん賑やかになる。

この5行を渡してあるので、「ここに説明文を足しますか」と聞かれる回数が、はっきり減りました。

見た目を言葉で説明しようとすると、たいてい失敗します。

最初は僕も、静かな感じで、余白を広めに、落ち着いた色で、みたいな言い方をしていました。で、出てくるものは毎回違う。当たり前で、その言葉から浮かぶ絵が、こちらと向こうで一致していないからです。

なので途中から、言葉で説明するのをやめて、見本を渡すようにしました。実際にやったのは本当にこれだけです。見本の画像を渡して、こう言いました。

そのままコピーして使えます

見本の画像を渡します。

この見本の、余白の取り方や、UI・UXの部分を分析してください。そのうえで、それを参考にして作ってください。

それだけで、画面の整い具合が一気にそろいました。やっぱり、すでに整っているものから持ってくるのは大事だなと思いましたね。見本はプロがデザインした完成品なので、そこの水準がそのまま移ってくる。借りたくないところがあるときだけ、「影は要らない」のように名指しで外します。

出てきた画面が思ったのと違うとき、「なんか違う」では直りません。直すときは毎回、この3つをそろえて言っています。

この型は「ズレた出力を一言で直す」でやっているものと同じです。文章を直すのに使う型が、画面を直すのにもそのまま使えます。

そのままコピーして使えます

一覧の画面なんですが、

カードが横に4つ並んでいて、1枚ずつが小さくて絵の中身が読めません。本当は、絵が読める大きさのまま横に並んでいてほしいです。並ぶ数のほうを減らして調整できますか。

つまずきやすいところ

出てきた画面が素っ気なくて、これで本当に完成するのか不安になる。

そこは不安にならなくて大丈夫です。器の段階は中身が仮の文字なので、どうしても間が抜けて見えます。僕も最初の画面を見たときは、正直これでいけるのかと思いました。文字が本物になって、絵が入って、はじめて印象が変わります。見た目の判断は、中身が入るまで保留してください。

ここだけ覚える

先に器、あとから中身。見た目は言葉ではなく見本で渡す。違いは、どこが・いまどうで・本当はどうしたいかの3つで言う。

終わったら、ここが言えるか確かめる