AIに資料やホームページを作らせて、またこの見た目か···とウンザリしたことはありませんか？
淡い色のグラデーション、角の丸いカードが3つ横並び、その下に薄い影。
業種を変えても、頼む相手をChatGPTからClaudeに変えても、出てくるのはこれでした。
「色を変えて」と頼んでも、色だけ変わって、見た目は同じままです。
原因は、色ではなく形にありました。
指示の中に「形の決まり」が無いと、AIは毎回いちばん無難な形を出します。
逆に言えば、文章も数字もそのままで、デザインの決まりを1つ添えるだけで別物になります。
この記事では、それを実際にやってみました。
架空の税理士事務所を題材に、Claude CodeとChatGPTの両方で、同じ材料から「指示なし」と「指示あり」を作り、出てきた画面をそのまま並べています。
「指示あり」で使ったのは、私たちが無料で配っているデザイン様式50という、見た目の決まりを50通り集めたものです。
この記事でわかること
- AIが作るサイトや資料が、なぜ同じ見た目になるのか
- 「デザイン様式50」とは何か。50通りの見た目の決まりを、名前で呼び出す仕組み
- Claude Codeなら、指示に名前を1語足すだけで変わること
- ChatGPTでも、決まりを貼るだけで同じことができること
- 同じ材料で3つのデザイン案を出す方法と、資料でも起きること
先に結論（3つ）
- 同じ見た目になる正体は形。等幅3列のカード、角丸、ふわっとした影、中央寄せ。色を変えても形が残るので直らない
- 「禁止」から始まる決まりを渡すと変わる。Claude Codeなら名前を1語、ChatGPTなら決まりの文章を貼るだけ
- 材料は一文字も変えていない。事務所名も数字も相談の流れも同じまま、見た目だけが変わった
先に、30秒の動画で見たい方はこちらです。指示に1語足した瞬間に、ページが目の前で組み変わります。
ナレーションは、私の声を覚えさせたAIが読んでいます。
動画の「指示なし」のページは、AIがよく出す形を再現したものです。実際に出てきた画面は、この下に並べています。
まず、Claude Codeに指示なしで頼んでみた
題材は架空の「みなと税理士事務所」です。
材料はテキストファイル1枚にまとめました。
事務所名：みなと税理士事務所（架空）
キャッチコピー：数字の心配を、経営の安心に。
サービス：記帳代行、決算・申告、創業支援の3つ
実績：顧問先120社、開業18年、創業支援累計350件
相談の流れ：お問い合わせ→初回面談（無料）→お見積もり→ご契約
お問い合わせ：電話 000-0000-0000（架空）、メールフォームへのボタン
所在地：横浜市中区（架空）頼み方はこうです。
materials.txt の内容で、みなと税理士事務所のトップページを HTML1枚で作って index.html に保存して。デザインについては何も言っていません。
手元の設定が影響しないように、私たちが普段使っている作業用の設定は外して、素の状態で頼んでいます。
2分ほどで、こんなページができました。
一見きれいです。
ただ、よく見ると「相談の流れ」の番号がカードの外にはみ出しています。
人に見せる前に、ここは直す必要があります。
そして上から下まで見て、思ったのはこれでした。
「これ、うちのサイトじゃなくても成り立つ」
グラデーションの上に見出し、角丸のカードが3つ、その下に薄い影。
相談の流れも、同じ大きさのカードが4つ横に並んでいます。
税理士事務所でも、工務店でも、美容室でも、この形で出てきます。
これが「AIが作ったと分かる」見た目の正体です。
なぜ同じ見た目になるのか
AIは、指示に無いことを「いちばん確率の高い形」で埋めます。
見た目の指示が無ければ、いちばんよく見る形、つまり角丸カードの3列と淡いグラデーションになります。
等幅3列のカード、角丸、影、中央寄せの見出し。
この形を使わないでほしい、と伝えない限り、AIはこの形を使い続けます。
色を変えても直らないのはこのためで、あとでChatGPTで実際にやって見せます。
使ったのは「デザイン様式50」。見た目の決まりを、名前で呼び出す
形の決まりを毎回文章で書くのは、正直しんどいです。
そこで私たちは、決まりを50通り書いて、1つずつ名前を付けて配っています。
これが「デザイン様式50」です。
上の一覧は、全部同じ文章・同じ写真です。
違うのは、添えた決まりの名前だけです。
たとえば「law-trust」は士業向け、「scandinavian」は北欧風、「wa-modern」は和モダン、という具合に、50個それぞれに名前が付いています。
1つの決まりの中身は、こういう文章です。
# law-trust / 士業
紺と金。数字と実績を大きく置き、余計なものを足さない。
## 禁止
- 明るい原色
- 丸ゴシック・手書き風
- 角丸16px以上
- 写真をトリミングで遊ぶこと（すべて横長で統一）
- 淡い塗りの左端に濃い帯を置くこと
## 色
- 紺 #132C4A
- 濃紺 #0C1D33
- 紙 #F7F6F2
- 面 #EDEBE4
- 金 #B08D4F
（以下、書体・余白・角丸・ボタンの形が続く）大事なのは、いちばん上の「禁止」です。
色のあとに「角丸16px以上は使わない」「影は使わない」「相談の流れは縦に並べる」と、形の決まりが書いてあります。
この40行ほどの決まりを、AIに渡すだけです。
渡し方は2つあります。
- Claude Code：決まりのフォルダを所定の場所に置き、指示に名前を1語足す
- ChatGPTなど：決まりの文章をそのまま貼る
ここからは、この2つを実際にやります。
指示に1語足したら、こうなった
そこで、材料も頼み方もそのままに、末尾に1語だけ足しました。
materials.txt の内容で、みなと税理士事務所のトップページを HTML1枚で作って index.html に保存して。デザインは law-trust で。「law-trust」は、さきほどの士業向けの決まりの名前です。
デザイン様式50のフォルダを所定の場所に置いておくと、この名前だけで決まりを読みに行きます。
左が指示なし、右が1語足したものです。
事務所名も、120社という数字も、相談の流れの4段階も、一文字も変えていません。
カードが3つ並ぶのをやめて、相談の流れが縦になり、見出しが明朝体になっただけで、「士業のサイト」に見えます。
40行の決まりが、名前1語で渡っています。
ChatGPTでも、貼るだけでできる
「Claude Codeは使っていない」という方も多いと思います。
ChatGPTでも、決まりの文章をそのまま貼れば同じ結果になります。
まず、同じ材料をChatGPTに渡しました。
出てきたのがこれです。
色は違いますが、Claude Codeの指示なし版と同じ形です。
角丸のカードが3つ、薄い影、ステップのカードが4つ横並び。
「色を変えて」では直らない
ここで多くの人がやるのが「色を変えて」です。
私もやりました。
「色を、紺色を基調にしたものに変えてください」と頼んだ結果がこれです。
色は変わりましたが、角丸のカード3つも、薄い影も、淡いグラデーションも、全部そのままです。
決まりを貼って、作り直す
そこで、デザイン様式50の「士業」の決まりを、文章ごとそのまま貼りました。
同じ内容のまま、デザインだけを作り直してください。見た目は、下に貼ったデザイン様式ファイルの指定にすべて従ってください。「禁止」に書かれた形は使わないでください。色や余白の数値はそのまま使ってください。
---
# law-trust / 士業
（デザイン様式50の law-trust のファイルを、ここに全文貼る）返ってきたのが、これです。
最初の画面を並べると、差がはっきりします。
左は「AIが作ったサイト」、右は「士業のサイト」に見えます。
Claude Codeで1語足したときと、同じ決まりを読んでいるので、同じ紺と金の見た目になっています。
同じ材料で、3案並べる
デザインの決まりを差し替えれば、別の案も同じ手順で出ます。
「ミニマル・モノクローム」と「北欧」の決まりで、あと2案作りました。
3つとも、文章と数字は同じです。
お客さんに「どれが近いですか」と聞ける形になりました。
これまでなら、3案出すには3回デザインを考える必要がありました。
いまは決まりの名前を差し替えるだけです。
資料でも、同じことが起きる
ホームページだけの話ではありません。
A4縦1枚の「顧問契約のご案内」を、同じ手順で作りました。
左が指示なし、右が「士業」の決まりありです。
資料は紙1枚なので、サイトほど劇的には変わりません。
それでも、青い枠線のカードが消えて、明朝体の見出しと紙色の面になりました。
「ホームページと案内資料の見た目がそろう」のは、決まりが1枚に書いてあるからです。
うまくいかなかったこと・注意点
いいことばかりではないので、正直に書いておきます。
文章まで書き換えられることがある
1語足した版では、キャッチコピーの下の説明文をClaude Codeが自分で書き足していました。
「材料の文章は変えない」と一言添えるほうが安全です。
細かい数値まで守っているかは、全部は確かめていない
「角丸4px」「余白104px」のような数値は、見た目には守られているように見えます。
ただ、1つずつ測ったわけではありません。
公開するものは、いつもどおりスマホとパソコンの両方で表示を確かめてください。
決まりに無いことは、やっぱり無難な形になる
決まりに書いていない部分（たとえば表やフォームの形）は、AIが無難な形で埋めます。
気になる部分があれば、決まりのファイルに1行足してから作り直すのが早いです。
まとめ
AIが作るサイトや資料が同じ見た目になるのは、AIの性能の問題ではありませんでした。
指示に「形の決まり」が無いだけです。
材料はそのままに、決まりを1つ添える。
Claude Codeなら名前を1語、ChatGPTなら決まりの文章を貼るだけで、税理士事務所のページが士業の見た目になり、差し替えれば3案が出ました。
あなたの会社では、AIに作らせたページや資料を、そのまま人に見せられていますか。
- AIで作ったページが、どれも同じ見た目で使えていない
- 「色を変えて」と頼んだが、印象が変わらなかった
- お客さんにデザイン案を複数見せたいが、作る時間がない
この記事で使った「士業」「ミニマル・モノクローム」「北欧」の決まりを含む50種類を、デザイン様式50として無料で配っています。
Claude Codeで名前を言うだけの使い方と、ChatGPTに貼る使い方、どちらの手順も入っています。
「うちの業種だとどれが合うか」から相談したい方は、AI活用診断で現状を聞かせてください。
その場で見積もりは出しませんし、売り込みもしません。
AIでサイトを作った実例は、AIで会社のホームページを作る｜デザインまで任せた制作実例と、AIでホームページを自動作成｜どこまで任せられるか検証した記録にも書いています。
いま受け取れる特典は、全部で8つ。すべて無料です。
- AIが作る見た目を選べる デザイン様式50 … 名前をひとつ添えるだけで、サイトも資料も50通りに。
- AIの仕上がりを毎回そろえる 型プロンプト … コピペするだけ・作成フォーム付き。
- ChatGPT超入門ガイド … 「何ができるの？」がスッキリ分かる入門書。
- AIで仕事をラクにする 業務改善チェックリスト … “任せられる仕事”を見つける。
- 今日から使えるAI活用シーン10選 … まねするだけ。
- NotebookLMでスライドを作ろう … 資料づくりを10倍速に。
- 撮った動画を“見返せる資産”に変える 手順書 … 文字起こし→目次→字幕まで。
- AI活用ガイドブック（全70ページ） … 登録＋3分のアンケートで無料（Kindleでは980円）。
この記事は役に立ちましたか？
コメント