AIを使えば、コードが書けなくてもサイトが作れる時代になりました。ただ、できあがったサイトを見て「なんだか、いかにもAIが作った感じがする」と感じたことはありませんか？
この記事では、AIで作ったサイトが「AIっぽく」見えてしまう理由と、それを避けるための6つの工夫を紹介します。私自身、コードが書けないWebディレクターとして、AI（Claude Code）と会話しながら会社のコーポレートサイトを作ったときに実践した方法です。
この記事でわかること
- AIっぽいサイトによくある6つの特徴
- AIで作ると「量産型」の見た目になってしまう理由
- 脱AI感のために、コードを書かずにできる6つの工夫
- 公開前に見直したいチェックリスト
AIっぽいサイトによくある6つの特徴
AIに細かい指定をせずにサイトを作らせると、次のような見た目になりがちです。
- 紫〜青のグラデーションの背景
- すべてが中央揃えで、左右対称
- 同じ大きさ・同じ角丸のカードが3枚、横に並んでいる
- 見出しの横に絵文字のアイコン
- 「あなたのビジネスを次のステージへ」のような、中身のないキャッチコピー
- 意味のない下線や飾り
▼ここに画像：before.png（「おしゃれなサイトにして」とだけ頼んだ場合の再現イメージ）
一つひとつは悪いデザインではありません。ただ、これらが全部そろうと「どこかで見たことがある」量産型の印象になってしまいます。
AIで作ったサイトが「AIっぽく」なる理由
理由はシンプルで、AIは指定がないと「いちばん無難な選択」を積み重ねるからです。
多くの人に受け入れられそうな色、崩れにくい配置、よく見る言い回し。そうした無難な選択の積み重ねが、そのまま「AIっぽさ」になります。
逆に言えば、人が作ったように見えるサイトには「なぜその色なのか」「なぜここだけ大きいのか」という、人の判断の跡があります。脱AI感のコツは、その判断をAIに渡してあげることです。
脱AI感のための6つの工夫
工夫1：作る前に「誰に、どんな雰囲気で」を決める
最初に決めたいのが、サイトを見る人と雰囲気です。私の会社はアトピー性皮膚炎の方に向けたパジャマを作っているので、サイトの雰囲気は「静かで上品、刺激の少ない印象」と決めました。肌に悩む方が見て、落ち着ける雰囲気にしたかったからです。
ここが決まっていないままAIに頼むと、AIは無難な方向に寄っていきます。雰囲気をひとことで言えるようにしてから頼むのが、いちばん効果のある工夫でした。
工夫2：「おしゃれに」を具体的な言葉に言い換える
「おしゃれにして」「いい感じにして」では、AIには伝わりません。私は「おしゃれ」を、次のように分解して伝えました。
- 余白を大きくとる
- 文字は明朝体
- 色は3色まで
- 飾りは最小限
▼ここに画像：after.png（具体的に伝えた場合の再現イメージ）
あいまいな好みを、AIがそのまま実行できる言葉に言い換える。これが、コードを書かない人にとっていちばん大事な仕事だと思います。
工夫3：色は「理由のある色」を選び、増やさない
色はサイトの印象をいちばん左右します。私のサイトは、アイボリー（生成り）を土台に、ベージュと墨色でまとめました。肌にやさしい商品なので、自然で刺激の少ない色を選んでいます。
- 土台の色・メインの色・差し色の3つに絞る（差し色は目立たせたい場所だけに使う）
- 真っ白・真っ黒はそのまま使わず、少し色味を寄せる（白は生成りに、黒は墨色に）
- グラデーションは使わない
真っ白と真っ黒を少しずらすだけでも、既製品っぽさはかなり消えます。
工夫4：文字の大きさに、はっきり差をつける
AIが作るサイトは、見出しと本文の大きさの差が小さく、全体がのっぺりしがちです。見出しはしっかり大きく、本文は読みやすい大きさにと、差を大きくとるだけで、雑誌のような印象に近づきます。
見出しと本文で書体を分けたり、文字の太さに強弱をつけたりするのも効果的です。
工夫5：飾りを足させない（「控えめに」と伝える）
AIは、放っておくと演出や飾りを盛りがちです。動きを追加すると派手になりすぎたり、頼んでいない装飾が増えたりします。
そこで私は、指示のたびに「控えめに」「これ以上足さないで」とひとこと添えていました。たとえばサイトを開いたときのオープニング演出も、「短く・控えめに」と伝えたことで、上品な雰囲気を保てました。
飾りを入れるなら、「情報を見やすくする」か「雰囲気をつくる」か、どちらかの役割があるものだけにします。役割のない飾りは削りましょう。
工夫6：文章の中身を具体的にする
見た目以上にAIっぽさが出やすいのが文章です。「高品質」「安心・安全」のような、どの会社にも当てはまる言葉ばかりだと、デザインを整えても量産型に見えてしまいます。
会社の情報、事業への想い、商品のこだわりなど、事実と中身は自分で用意して渡す。AIには、それを読みやすく整えてもらうだけにしました。空欄のまま頼むと、AIはそれらしい内容で埋めてしまうので注意が必要です。
公開前に見直したい「AIっぽさ」チェックリスト
サイトができたら、次の6つを見直してみてください。当てはまるものが多いほど、AIっぽさが残っています。
- 紫や青のグラデーションなど、「どこかで見た色」になっていないか
- カードや区切りが、全部同じ大きさ・同じ間隔で並んでいないか
- キャッチコピーが、どの会社にも当てはまる言葉になっていないか
- 役割のない飾り（意味のない下線、絵文字のアイコンなど）が入っていないか
- 見出しと本文の大きさの差が小さく、のっぺりしていないか
- 余白がどこも同じで、メリハリがなくなっていないか
全部を崩す必要はありません。9割はきちんと整えて、1割だけ「人の判断」を入れるくらいが、ちょうどいいバランスだと思います。
よくある質問
デザインの知識がなくても、脱AI感はできますか？
できます。大事なのはデザインの技術よりも、「誰に、どんな雰囲気で見せたいか」を言葉にすることです。言葉さえ決まれば、形にするのはAIに任せられます。
どのAIツールを使っても同じですか？
この記事の工夫は「AIへの伝え方」なので、特定のツールに限らず使えます。私はClaude Codeを使ってサイトを作りました。
すでに公開したサイトにも使えますか？
使えます。上のチェックリストで当てはまった項目から、「この部分を〇〇に変えて」とAIに頼んで、少しずつ直していくのがおすすめです。
まとめ
AIで作ったサイトがAIっぽく見えるのは、AIが無難な選択を積み重ねるからです。脱AI感のコツは、デザインの腕を上げることではなく、「誰に、どんな雰囲気で」という人の判断を、具体的な言葉にしてAIに渡すことです。
実際にAIに送った指示文は、noteで順番どおりに全文公開しています。
→ 【Claude Code】非エンジニアでも簡単にサイトが作れます：実際に投げた指示を、順番に全部お見せします！（note）
「AIっぽくない、自分らしいサイトがほしいけれど、作る時間がない」という方には、同じ方法でのサイト制作もお受けしています。お気軽にXのDMからご相談ください。
コメント