カンプ画像から組む
入口B＝完成の姿を画像で先に決め、そのとおりにコードへ落とすルートです。言葉から組む入口はAIに作らせるです。全体の地図はAIと制作にあります。
図の中身を文字で読む
- 文章で見た目を説明するより、1枚の絵で決めるほうが早い
- 要件を渡す 部品に分ける コードにする
- 業種・載せるもの 態度・避けたい形 これを採る 画像で出すものと 文字で出すものを決める ここで上位のモデルに切り替える 画面幅ごとの見え方も同時に指示する
- 同じ指示で3〜5枚。1枚に絞らず、部分ごとに採ってよい
- 1枚の絵を、出し方の違うものに分ける
- 写真・イラスト・質感のある背景 画像のまま 文字を画像のまま出すと、4つが同時に起きる
- 選べない 検索されない
- 見出し・本文・ボタンの文字 HTMLの文字 読み上げられない 拡大でぼやける
- アイコン・罫線・単色の図形 SVG か CSS
- 代替テキストを付けても、この4つは埋まらない
- 影・角丸・グラデーション CSS
- 静止画には写っていないもの
- 画面幅ごとの見え方 動き この2つは、カンプとは別に言葉で指示する
- 1つの幅で作り込んだあとに直すのは高い。画面幅の話は、コードにさせる最初の指示に入れておく。
このルートの位置づけ#
AIと制作の2つの入口のうち、画像側です。要件はブリーフに書く7項目と同じ中身で渡します。言葉で直接組む入口と対になる正規のルートで、詰まったあとの逃げ道ではありません。
ひと目で#
- カンプ = 色、書体、写真まで入った、完成時の見た目そのままの静止画。ラフやワイヤーフレームとは別物
- 画像を作るモデルと、コードにするモデルは分けてよい。作らせるのは画像、組ませるのは上位のモデル
- 画像は複数出させて選ぶ。1枚で決めない
文章だけで見た目を指示すると、伝わったかどうかは、コードが出てくるまで分かりません。カンプを先に出させれば、その1枚で合意が取れます。
進め方#
- 要件を渡してカンプを作らせる。 業種、載せるもの、態度、避けたい見た目。ブリーフに書く7項目と同じ中身でよい
- 同じ指示で何枚か出させる。 3〜5枚。似たものしか出てこないなら、指示が細かすぎる
- 選ぶ。1枚に絞らなくてよい。 この配置とこの色使い、と部分を組み合わせて指定する
- 画像をコードにさせる。 ここで上位のモデルに切り替える
- 画面幅ごとの見え方を指示する。 カンプには1つの幅しか写っていない
- 動きを足す。 止まった画像には写っていない
あとで合流する#
手順4以降を済ませたら、文字ルートと同じ工程に入ります。
- AI Slopを避ける — 既定の型が残っていないか外す
- 検証と完了 — ブリーフの「完了の判定」を満たしたか確かめる
画像を作らせる先を選ぶ#
生成のたびに使った分だけ課金される経路と、契約に含まれる範囲で使える経路があります。同じ絵が出るなら、含まれているほうを使います。 何枚も出して選ぶ進め方なので、1枚あたりの差が積み上がります。
契約に含まれる経路がないときは、鍵を登録して使った分だけ払う形になります。金額そのものは小さくても、捨てる枚数のぶんは丸ごと無駄になります。
コードにするときに分けるもの#
カンプは1枚の絵なので、そのまま貼ると全部が画像になります。要素ごとに、画像として出すか、文字として出すかを分けます。
| カンプの中身 | どう出すか |
|---|---|
| 写真、イラスト、質感のある背景 | 画像のまま |
| 見出し、本文、ボタンの文字 | HTML の文字。画像にしない |
| アイコン、罫線、単色の図形 | SVG か CSS |
| 影、角丸、グラデーション | CSS |
文字を画像のまま出すと、選べない、検索されない、読み上げられない、拡大でぼやける、の4つが同時に起きます。代替テキストでも埋められません。
間違えやすいところ#
- ラフ画像で止める配置しか決まらない。色と書体が決まっていないと、結局そこでもめる
- 1枚を採用して直させ続ける方向がずれていた場合の戻りが大きい。何枚か出して選ぶほうが速い
- カンプの色をそのまま使う画像から拾った色はコントラストを満たしていないことがある。組んだあとに測る
- 画面幅の指示を後回しにする1つの幅で作り込んだあとの作り直しは高い。レスポンシブは最初に言う
- 動きまで画像で決めようとする静止画には写らない。動きの設計は別に指示する
- カンプを納品物にする実装との差が残る。決めるための道具であって、引き渡す仕様ではない
以前との違い#
少し前のモデルは、カンプがよくできていても、コードにする段で崩れました。その差分を直す手間のほうが、最初から手で組むより大きい、という状態でした。
いまは画像からの再現性が上がり、この進め方が成り立ちます。ただし条件付きです。上の分解と画面幅の指示を出したときだけで、画像を渡して「これにして」では、文字まで画像で出てきます。