AIに作らせる
この場面の困り事と、そのまま使えるコード。全14件。 足りなければ、行末のページへ進む。
このページの中だけを絞ります。ページは移りません。
AIで組むとき、文字からか画像からか迷う
入口は二つ。言葉で組むか、カンプで先に決めるか。要件の7項目は同じ。あとから slop と verify に合流する。AIと制作
入口A: 13-ai/brief.html（言葉で組む）
入口B: comp.html（カンプで先に決める）
合流: slop → verify（要件の7項目は同じ）AIに作らせると毎回同じ見た目になる
禁止を先に書く。中央揃えのヒーロー、3枚カード、紫青の階調をやめる、と指示に入れる。AI Slopを避ける
禁止:
- 中央揃えヒーロー + 3枚カード
- 紫青グラデーション
- 角丸シャドウカードAIへの指示に何を書けばよいか
誰に・何を・どんな態度で・必須・禁止・制約・完了の判定の7つ。AIに作らせる
誰に: 初めてサイトを作る事業者
何を: 料金ページ
態度: 信頼
必須: h1, 料金表
禁止: 中央揃えヒーロー, 紫
制約: 375pxで横スクロール0
完了: コントラストAA「おしゃれに」と伝えても伝わらない
判定できない語は伝わらない。分散度・動きの強さ・視覚密度を数値で指定する。AIに作らせる
DESIGN_VARIANCE: 0.3
MOTION_INTENSITY: 0.2
VISUAL_DENSITY: 0.4生成された文章が薄い
抽象的な形容が並んでいる。他社に貼って成立する一文は、固有の事実に置き換える。AI Slopを避ける
NG: 高品質なサービスを提供 OK: 税理士1名が毎月の試算表を経営の言葉に直す
生成物のどこを直せば既定値から外れるか
配置・色・書体・文章の4か所。色だけ変えても、配置と構成が同じなら同じ画面に見える。AI Slopを避ける
1. 配置（中央揃え→左揃え）
2. 色（紫→地+1アクcent）
3. 書体（Inter→Noto Sans JP）
4. 文章（抽象→固有の事実）出荷前に何を確認すればいいか
レビューで意見がまとまらない
AIにデザインの知識をどう渡すか
外部から入れたスキルが自分の方針と合わない
どこまでやったら完成か決まらない
作る前に受入条件を書く。作ったあとに決めると、出来たものに合わせた条件になる。検証と完了
受入条件:
- 375px横スクロール0
- コントラストAA
- リンク切れ0
- 禁止語0文章で見た目を指示しても意図どおりに出てこない
生成した画像をそのままコードにしたら文字まで画像になった
写真は画像、見出しと本文はHTMLの文字、罫線とアイコンはSVGかCSS、と分けて指示する。カンプ画像から組む
写真=img / 見出し本文=HTML / 罫線アイコン=SVGかCSS画像から起こしたページがスマホで崩れる
カンプは1つの幅しか写っていない。画面幅ごとの見え方は、最初の指示に文章で入れる。カンプ画像から組む
375px: 1列 / 768px: 2列 / 1280px: 3列 と指示に書く