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