AIっぽいサイトを卒業する
ClaudeやChatGPTに頼めば、ホームページやLPが数分で形になる時代になりました。ところが、できあがったページを人に見せると「これ、AIで作った？」と言われてしまう。そんな相談が、OTO dESIGNにも届くようになりました。
OTO dESIGNでも、制作の一部をAIと分担しています。その中で感じているのは、AIで作ったサイトが「AIっぽく」見えるのには、はっきりした理由があるということです。
この記事では、AIで作ったサイトが「AIっぽく」見える理由と、3分でできるセルフチェックを紹介します。
なぜAIが作ると「AIっぽく」なるのか
Claudeを開発しているAnthropicは、Webページの見た目（フロントエンド）のデザインについて、プロンプトのガイドを公開しています。そこでは、理由が次のように説明されています。
- AIは、学習したデータの「真ん中」にある、ありがちな出力に寄りやすい
- デザインの知識は持っているが、はっきり指示されない限り無難な選択をする
- その結果、Inter・Robotoといった定番のフォント、白い背景に紫のグラデーション、予想どおりのレイアウトが繰り返される
つまり、AIが手を抜いているわけではありません。一つひとつの判断で「いちばん無難なもの」を選んだ結果が積み重なって、どこかで見たようなサイトになるのです。
日本語のサイトでは、ここにさらに日本語ならではのクセが加わります。
3分でできる「AI感」セルフチェック
自分のサイト（またはAIに作ってもらったページ）を開いて、当てはまるものを数えてみてください。
- 白い背景に、青から紫へのグラデーションがある
- 見出しの上に、小さな英字（CONCEPT、SERVICE など）が付いている
- 順番に意味がないのに、01・02・03 の番号が付いている
- 同じ大きさのカードが、横に3つ並んでいる
- 見出しや箇条書きの頭に、絵文字が付いている
- 「〜を、もっと自由に。」のような、どの会社にも当てはまるキャッチコピー
- 3行以上の文章まで、中央揃えになっている
- 角の丸みが、ボタン・カード・画像でばらばら
- 本文まで文字の間隔が広く、間延びして見える
- スクロールすると、すべての要素がふわっと浮かび上がってくる
3つ以上当てはまったら、見る人に「AIっぽい」と感じさせている可能性が高いです。
ひとつひとつは、悪いデザインではありません。問題は「なぜそうしたのか」という理由がないまま、AIの初期設定が並んでいることです。
「AIっぽくしないで」と頼んでも直らない理由
ここで多くの人が、AIに「AIっぽくないデザインにして」と頼みます。でも、たいていうまくいきません。
禁止するだけでは、AIは別の無難なものに乗り換えるだけだからです。紫のグラデーションをやめたら、今度はクリーム色の背景に金色の差し色。英字の見出しをやめたら、今度は縦書きの飾り文字――。Anthropicのガイドでも、指示を工夫しても、作り直すうちに特定のフォントに落ち着いてしまう例が紹介されています。
デザインの現場では、作り始める前に「文字の大きさは何段階」「色は何色」「角丸は何px」と数値で決めた型紙を用意します。AIに必要なのも、同じものです。
数値の型紙で作り直すと、どう変わるか
架空の革工房のトップページで試してみました。左は、AIに「革工房のトップページを作って」とだけ頼んだ時によく出てくる構成を再現したもの。右は、数値で決めた型紙（デザイン指示書）に沿って作り直したものです。
ページの中で使われている値を数えると、作り直す前は字間が7種類、角丸が4種類、影が3種類。作り直した後は、字間2種類、角丸1種類、影なしになりました。見た目の好みは人それぞれですが、「なぜこの値なのか」をすべて説明できる状態になっていることが、大きな違いです。
続きは、noteで公開しています
値の数え方や型紙の作り方は、noteの記事にまとめました。コードが書けない方でも進められるように、コピペで使える形にしています。
- ページに貼るだけで、文字・色・角丸などのばらつきを数える計測スクリプト
- 参考サイトから「いいな」の正体を数値で拾う方法
- AIに渡すデザイン指示書（DESIGN.md）のテンプレート
- 日本語サイト向けのフォント選びと、文字組みの目安
- 指示書をそのままCSSにしたひな形
- AIに直してもらう時のプロンプト3本（新しく作る・今のサイトを直す・文章を直す）
- 架空のお店のページで試した、作り直す前と後の計測結果の比較
サイトのデザインを見直したい、AIで作ったページを整えたいといったご相談は、お問い合わせからどうぞ。
※本記事は2026年10月29日時点の情報をもとに作成しています。