このページの中身

AIに作らせる

入口A＝言葉で見た目まで決めて組ませるルートです。画像で先に合意を取る入口はカンプ画像から組むです。全体の地図はAIと制作にあります。

曖昧な指示と具体的なブリーフで出力が変わることと、3つのつまみによる方向づけを示した図
図を大きく見る
図の中身を文字で読む
  • 同じ道具でも、渡す言葉の具体性で出てくるものが変わる。
  • 曖昧な指示
  • 「おしゃれなLPを作って」
  • 「モダンな感じで」
  • 中央揃えの見出し、3枚のカード、紫から青のグラデーション。既定値が出る
  • 具体的なブリーフ
  • 誰に：はじめて店を持つ人　左揃え、料金が主役、色は1つ。
  • 態度：格式より親しみ　禁止を書くと既定値から外れる。
  • 禁止：紫青の階調、中央揃え　必須を書くと、削られない。
  • 必須：料金を最初の画面に　参考画像より、言葉で条件を渡すほうが再現する。
  • 3つのつまみを毎回明示する
  • デザイン分散度　モーション強度　視覚密度
  • 既定に近い　大きく外す　静止　大きく動く　余白が広い　詰まる
  • つまみを指定しないと、道具は毎回まん中あたりの無難な値を選ぶ。無難な値が集まると、どこかで見た画面になる。

ひと目で#

同じ道具でも、渡す言葉の具体さで出てくるものが変わる。

デザインブリーフ
誰に、何を、どんな態度で、何を禁止するかを書いたもの
デザインリード
方向を決め、判断の責任を持つ役割。道具ではなく人
プロンプト
指示文。このルートでは、条件を言葉で渡してコードを出させる
デザイン分散度 / モーション強度 / 視覚密度
毎回はっきり指定するつまみ
ジェネラティブデザイン
条件から複数の案を生成し、選んで詰める進め方

ブリーフに書く7項目#

項目例
誰にはじめて店を持つ人。40代。Web に詳しくない
何を相談してもらう。電話ではなくメールで
態度格式より親しみ。ただし軽くはしない
必須料金の目安を最初の画面に置く
禁止紫青の階調、中央揃えのヒーロー、3枚カード
制約更新は専門外の担当者。回線の細い地域が多い
完了の判定コントラスト AA、375px で横スクロールなし

7項目は指示です。指示の前に何を読ませておくかはAIに渡すスキルで分けています。

同じ案件をこの7項目で書いた実物と、書かなかった場合の実物はブリーフの実例に並べました。

3つのつまみ#

つまみ指定しないと指定すると
デザイン分散度既定に近い無難な形どこまで外すかが決まる
モーション強度控えめな動きが一律に入る動かす場所と量が決まる
視覚密度中くらいの余白情報量に合った詰め方になる
つまみを書かないと中央揃えの見出しと3枚カードという既定の型が返ることと、デザイン分散度・モーション強度・視覚密度を低中高で指定したときに何が決まるかの対比
図を大きく見る
図の中身を文字で読む
  • ✕ つまみを書かない　○ 3つのつまみを渡す
  • 既定の型がそのまま返る　どこまで外すか、どれだけ動かすか、どれだけ詰めるかが決まる
  • デザイン分散度
  • 低　中　高
  • 既定の型に寄せる　一箇所だけ外す　配置と構成を外す
  • モーション強度
  • 低　中　高
  • 色と不透明度だけ　入場と状態変化　主役の演出を一つ
  • 視覚密度
  • 低　中　高
  • 中央揃えの見出しに一文、丸いボタン　主役を1つ置く　情報量に合わせる　詰めて見せる
  • その下に等間隔の3枚カード　既定値は「無難」であって、この案件に合っているという意味ではない。

つまみは低・中・高で渡します。書かないと、既定の値が黙って選ばれます。

あとで合流する#

方向が決まったら、次はAIと制作の合流工程と同じです。

  1. AI Slopを避ける — 既定の型が残っていないか外す
  2. 検証と完了 — ブリーフの「完了の判定」を満たしたか確かめる

画像ルートから来た場合は、先にカンプ画像から組むの分解・画面幅・動きを済ませてから、同じ2つに入ります。

間違えやすいところ#

直す例#

架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。

架空の整骨院のLPを「やわらかく、いい感じに」とだけ頼んだ現場です。紫の階調と3枚カードが返ってきたので「もっと親しみやすく」と返すと、今度は意味のない絵文字が増えました。3往復しても近づきません。判定できる語が、指示に1つも入っていないからです。7項目とつまみを書いて渡し直すと、1回目で方向が合いました。差し戻しも「禁止の2行目に反する」と1行で書けます。同じ案件で悪いブリーフと良いブリーフを並べた実物は、ブリーフの実例に置きました。

確認する#

このページで扱う語#

このページで扱う語を並べる本文では太字4 語

語の名前から引くなら用語索引へ。

LLM
大量のテキストで学習し、続きを確率的に生成する言語モデル。
デザイン分散度
版面をどれだけ規則的に、あるいは実験的に組むかを1から10で表す設定値。
モーション強度
動きをどれだけ使うかを1から10で表す設定値。
視覚密度
画面にどれだけ要素を詰めるかを1から10で表す設定値。

この話が要る場面#

このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。

AIへの指示に何を書けばよいか

誰に・何を・どんな態度で・必須・禁止・制約・完了の判定の7つ。

誰に: 初めてサイトを作る事業者
何を: 料金ページ
態度: 信頼
必須: h1, 料金表
禁止: 中央揃えヒーロー, 紫
制約: 375pxで横スクロール0
完了: コントラストAA

「おしゃれに」と伝えても伝わらない

判定できない語は伝わらない。分散度・動きの強さ・視覚密度を数値で指定する。

DESIGN_VARIANCE: 0.3
MOTION_INTENSITY: 0.2
VISUAL_DENSITY: 0.4

この場面のほかの困り事と、そのまま貼れる部品はAIに作らせるにまとめてある。逆引きには全188件。

ブリーフを組む#

6つの欄と3つのつまみを埋めると、AIにそのまま渡せる指示文が組み上がります。見本は架空の珈琲店です。書き換えた内容は下の文にその場で反映されます。

あなたにページの制作を依頼します。次のブリーフに従ってください。

## 案件
- 業種: 自家焙煎の珈琲店
- 目的: 来店前の下見に応え、豆の通販へつなぐ。問い合わせはメールで受ける

## トーン
- 3語で言うと: 静か・実直・手仕事
- この3語に合わない装飾と言葉は入れない

## 参考にする実物
- 地元の設計事務所の作品集サイト。余白の取り方と写真の並びを参考にする。配色はまねない
- 参考は条件として読み替える。見た目をそのまま写さない

## やらないこと（禁止）
- 紫から青への階調。中央揃えのヒーローに一文。等間隔の3枚カード。意味のない絵文字

## 技術条件
- 静的な HTML と CSS。外部ライブラリなし。画像は合計 1MB 以内

## 3つのつまみ
- デザイン分散度: 中。既定の型から一箇所だけ大きく外す
- モーション強度: 低。色と不透明度の変化だけ。移動は使わない
- 視覚密度: 中。余白は情報量に合わせる

## 完了の判定
- 本文のコントラスト比が 4.5:1 以上
- 幅 375px で横スクロールが出ない
- 内部リンクの切れが 0件
- 禁止に挙げたものが含まれない

この道具は JavaScript で動きます。無効の場合は、上の見本の指示文を書き写して使ってください。

出典#

関連#

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。