仕事でAIを使って試したことを、うまくいかなかった分も含めて書いていきます。1回目は、AIに自社サイトと同じ見た目でページを作らせる実験です。
先に、この実験を6枚にまとめておきます。横にめくって読めます。
同じ内容を、声つきの動画（1分42秒）にもしました。
コビトロジックの実験場 #1（音声はAIで生成しています）ClaudeのプロジェクトにLPを作ってもらったところ、出てきたページがどうもコビトロジックらしくありませんでした。色も見出しも、それらしいけれど少しずつ違う。プロジェクトには、サイトの見た目のルールをきちんと伝えたつもりでした。
確かめたかったのは、AIに渡すものを変えれば、毎回同じ見た目で作れるようになるかです。
プロジェクトの指示とナレッジに、見た目のルールを文章で入れていました。「青は見出しに、黄土は主ボタンに使う」「角丸は箱だけ」「英字の見出しは使わない」といった書き方です。この状態で、ブログの乗せ換えを案内するLPを頼みました。
サイトで実際に使っているCSSと、部品ごとの見本のHTMLを1つのファイルにまとめました。これを「デザインキット」と呼んでいます。FV、見出し、カード、図、比較の表、FAQ、最後の問い合わせの帯まで、部品ごとに見本が並んでいて、末尾にイラストとアイコンのURLを付けています。
プロジェクトの指示も書き換えました。「HTMLを作るときは、キットのstyleをそのまま写して、見本の部品に文字を入れて組む。色・書体・角丸を自分で決めない。新しいCSSを書かない」。そのうえで、同じLPを作り直してもらいました。
1回目のLPを、サイトのルールと並べて確かめると、ずれは次のようなところに出ていました。
| ルールに書いていたこと | 1回目に出てきたもの |
|---|---|
| 主ボタンは黄土（サイトの値は #c3982f）、文字は白 | 少し明るい別の黄土（#D6A54A）に、黒い文字 |
| 英字の見出しは使わない | セクションごとに「Problem」「Price」などの英字の見出し |
| 角丸は箱だけ、形はサイトの部品にそろえる | 角丸20pxの枠線だけのカード |
| 絵はサイトのイラストを使う | 手描きの線画に英字の札、ずっと動き続けるアニメーション |
どれも、ルールの文章に反しているわけではありません。「黄土」と書いてあれば、AIにとっては黄土っぽい色ならどれでも正解です。言葉で渡したルールを、AIは毎回それらしく作り直します。
2回目は、FVの青、黄土のボタン、見出しの上の小さな飾り、イラストまで、サイトと同じ見た目で出てきました。
「青」「黄土」は人には伝わっても、AIには幅のある言葉です。値（#265F8B のような色の番号）まで渡して、はじめて同じ色になります。書体・角丸・余白も同じでした。
カードの形を文章で説明するより、カードのHTMLを1つ見せて「これに文字を入れて」と頼むほうが、ずれません。AIに考えさせる部分を、文字を入れるところだけに絞った形です。
キットを渡しても、AIは親切に新しいCSSを足そうとします。「自分でCSSを書かない」「使わない見た目はこれ」と、やらないことを先に書いたのが効きました。
同じ考え方で、サイトの部品から営業資料とホワイトペーパーを起こせるかを試しています。結果は次の実験として書きます。
もうひとつ気づいたのは、プロジェクト機能の向き不向きです。ローカルのフォルダにある資料をまたいで使う仕事は、プロジェクトでは難しく感じました。資料をたくさん参照する仕事は、手元のファイルを読めるClaude Codeで進めています。
あわせて読む: デザイナーに頼んだのは、全ページではなくサイトのコアだった｜「HubSpotはノーコードだからAIと相性が悪い」は誤解でした