最近では、AIに手早くウェブサイトを作ってもらうということが簡単になった。そしてその結果、「あ、これはAIで作ったんだろうな」と分かるようなサイトもよく見かけるようになった。
制作側としては楽でコストも抑えられるが、ユーザーとしてはデザインが一辺倒で魅力を感じなかったりすることが多いのではないだろうか。
私もコーディングAIエージェントツールのCursor（カーソル）を使ってウェブサイトやアプリを作っているのだが、制作中にAI臭さが気になってしまう場面は多々ある。バイブコーディングに頼ると、どうしてもAIのクセが表に出てくるのだ。AIとやりとりを繰り返すことで改善はされるのだが、根本的な原因はいまいち言語化できていなかった。
そこで、今回はインターネット上で見かけた「明らかにAIで作られたサイト」と「生成AI普及以前のサイト」を見比べながら、具体的に何がAIっぽさの原因になっているのかを自分なりに洗い出してみた。
今回確認したサイトがどこなのかは明言しないが、概要は以下のとおり。
AI使用サイト
- サービスを紹介するLP4件（うち1件は海外）
- AIでデザインされたWordPressブログ1件
AI不使用サイト
- 個人開発ブログ1件
- LPアーカイブ（https://rdlp.jp/lp-archive/）で2022年以前に登録されたLP3件
- 企業サイト1件
AIっぽさ一覧
ここから、AIっぽさの要因だと感じたポイントをまとめたい。
参考として、CursorのGrok4.7（medium）にデモサイトをデザインしてもらったので、ここに貼っておきたいと思う。
プロンプトは次のとおりで、「カフェ検索サイト」と「AIコンサル会社のサイト」という想定で2つ作ってもらった。
Webサイトのサンプルとしてhtmlファイルを作ってほしい。
javascriptは不要。htmlとcssだけで再現して。
テーマは
- 落ち着けるカフェを探せるサイト（明るい背景）
- AIコンサルティング会社サイト（暗い背景）
とする。できたデザインが次のとおりである。（何やかんや言っても、撮って出しでもここまで作れるのは便利なものだ…。）
私が確認したのはあくまで第三者のサイトだが、上記のデザインとも共通するAIっぽいポイントも多々あったので、読者の皆さんにも、一度このデザインをながめてみてほしい。
ここから、洗い出したポイントを記載する。
デザイン編
紙色のような薄い背景色を使う
紙のような薄くて淡い色を背景色に使うもの。特にテーマカラーを薄めたような色を用いる。この背景によってサイトがぼやけた印象になっていると思う。
例としてはこんな色だろうか。
対策としては、無彩色や白（#FFF）を使用するなどが考えられる。
同じ色相から作ったカラーを使い倒す
参考にしたサイトを開発者ツールで眺めてみると、同じ色相で黒系、白系、メインカラーなどを用意しているパターンがあった。これももしかするとAIっぽさにつながるのかもしれない。
例えばこんな感じ。薄い赤背景に赤のテキストを使用している。
CTAボタン（行動を喚起するボタン）はこんな色合い。文字は白だがボタン自体は黒に薄く赤を混ぜた色。
無彩色にちょっとだけ色を混ぜるという手法は一般的ではあるものの、AIの出力にはこの傾向が強い印象がある。
また、同じ色相の背景、文字、薄いボーダーを同じエリアで使っている部分もよく見かける。これもぼやけた印象を与える原因になるのではないだろうか。
コントラストの強すぎる色をCTAに使う
上部のAI作成デモサイトにも見られるのだが、CTAボタンにコントラストの強すぎる色を使っているケースが見られた。
スタイリッシュ系のサイトであればまだ許容できるが、ゆるふわ系のサイトでは雰囲気を壊してしまう。
一般的にはメインカラーやその補色を使う方がベターなのではないだろうか。
素材不足
これはある種しょうがないのだが、AIが作成したサイトでは深刻な素材不足を感じる。
ウェブサイトを制作する場合、大抵は依頼者側から写真を提供してもらったり、イラストレーターやデザイナーがちょっとしたアイコンやイラストなどを入れるものだろう。特に写真はサイトが伝えるべきストーリー性やオリジナリティに直結するので、それがないと深みがなく安っぽい印象になってしまう。
グローカラーを使う
突然、高輝度や高明度の色を使うことで、ネオンのようなギラつきを再現するパターンだ。そういったキャラクターのサイトであればまだ許容できるが、こうした演出はかなりAIっぽさを醸し出す気がする。
上部のAI作成デモサイトにも、グローカラーの使用が確認できる。グラデーションをかけるのもAIっぽさにつながると思われる。
デカ文字キャッチコピーをヒーローセクションに設ける
ヒーローセクション（サイト訪問者の目に最初に入るセクション）に大きな文字でキャッチコピーを載せるパターン。これは正直現代のサイトのトレンドでもあると思うので何とも言えないが、文字ばかりが目に入ってうるさい印象を受けるのは私だけではないはず。
背景写真などの素材不足も、もしかすると原因になっているのかもしれない。
巨大ナンバリングを設ける
大見出しの隣に「01」「02」などと大きく添えるパターンである。これもAIの出力としてよく見かける。
見出しに大文字で英語ラベルを添える
例えば、サービスという見出しに対して「SERVICE」という文字を添えるようなことを指す。
これも一般的によくあるパターンではあるのだが、AIが生成したものは
- 見づらい文字サイズ
- 見づらい色相
- 字間を広げて見出し（ここでいうサービス）の幅に近づける
というのが特徴的だ。
1pxのボーダーを設ける
カードやヘッダーフッター、その他要素の境に1pxのボーダーを設けるもの。自分で制作しているときもよく思うが、AIはボーダーをつけたがる傾向がある。
主には、1pxのボーダーをかなり薄い色（明るいグレー）にしてつけるパターンだ。
ボーダーが多すぎると、サイト全体として雑多な印象になってしまう。色が違えば違う領域だと認識できることが多いので、ノイズになるようなボーダーは取り払った方がいいと思う。
フォント・文章編
見出しにセリフ体（明朝体）を使う
日本語ではあまり見出しに適さないセリフ体（明朝体）を見出しに採用しているパターンがあった。使用していたフォントは「Noto Serif JP」など。Thinなどの細字を使用することも多い。だが、見出しにはサンセリフ体（ゴシック体）の方が適しているので、そちらを使った方がいいと思う。
アルファベットであれば、セリフ体の見出しでも様になる場合があるだろう。
例えばBBC（https://www.bbc.com/）などのような海外のニュースメディアなどだろうか。セリフ体を使うことで、格式高さを演出できる。
だが、日本語の場合は明らかにゴシック体の方が見出しに使われるため、それに倣った方が読者に違和感を与えずに済むだろう。
太字多用
文章の節々を太字で装飾するパターンだ。例えば「これは重大なポイントだ。なぜなら、現状では費用対効果が頭打ちだということだからだ。」のようなかたちだ。強調はピンポイントで使った方が強調されるものだ。
文字が小さい
AIが制作したサイトのフォントはやや小さい傾向にあると感じている。
例えばYahoo!ニュース（https://news.yahoo.co.jp/）の本文はPC上で16pxだったが、AIが作ったデザインの場合、12pxを平気で下回っている場合があるので、結構読みづらい。
さらにコントラストが薄いことも多々あるので、なおさら読みづらい。
備考欄のように補足的な要素であっても、読める程度の大きさとコントラストが必要だと思う。
句読点つけがちなキャッチコピー
「これまでの方法を、刷新する。」「一目で分かる、世界。」など、キャッチコピーなどにいちいち句読点を使うパターン。これは皆さんもよく見かけるだろう。
確かに人が作成したキャッチコピーにも句読点はしばしば見られるだろうが、AIが作ったものには大抵の場合、わざとらしさを感じる。なぜなのだろうか、句読点を打つ必然性が感じられないからだろうか。
絵文字多用
ビジュアルの充実のためか、絵文字をアイコンなどとして多用するものだ。くだけたコミュニティサイトなどであれば許容できるが、そうでない場合は安っぽいという印象の方が強くなる。
体言止めの多用
「〜を数値化。」「〜を搭載。」など、体言止めをしばしば用いることがある。
特に、何かを説明する段落（例えば「メリット1 ○○」などの説明文）などで見かける。
個人的には、「素直にですますを付けた方がよくない…？」と思う場合が多い。
無慈悲な改行
画面幅や読者の読みやすさを全く考慮していない、ぶつ切れの改行がよく生み出されている。
私たちはこれまで、いくつもの大きな困難を乗り越
えてきました。
ただ、これについてはしょうがないと思う部分もある。これまでは、「人の仕事」として細かく気が遣われてきたポイントだからだ。
例えば、レスポンシブ対応（PCやスマホなどあらゆるデバイス幅でサイトが適切に表示されるようにすること）を実装するとき、「スマホ幅のときはここで改行させて、ここは中揃えにしよう。」など、細かい調整が行われる。そうしたきめ細かい配慮の積み重ねによって、訪問者はストレスなくサイトを閲覧できるのだ。
AIエージェントにこれを行わせようとなると、何回もスクリーンショットを撮って確認して微調整する…といったループになってしまいそうだ。
検証
こうしたポイントを踏まえて、もう少し実験してみた。
上記の内容を「禁止事項」として、再びGrok4.7にデモサイトを生成してもらったのだ。
禁止事項を守らせてみる
まずは、前述のプロンプトに加えて、「ただし、以下の事項は禁止とする」として今回の禁止事項を明示した上で、同様にデモサイトを作ってもらった。
結果がこちらだ。
写真がないため”素材不足”を解消できないことから色使いが少しうるさくなっているが、デフォルトよりは落ち着いたデザインになっているのではないだろうか。ただ、人によってはシンプルすぎると感じそうだ。
AIがやりがちなことの他に、AIが見逃しがちなことをピックアップして指示に含めると、より違和感がない成果物が出力されやすくなるかもしれない。
禁止事項を破らせてみる
次に、逆に全ての禁止事項をあえて取り入れてもらいながら、同じくGrok4.7にデモサイトを作ってもらった。
結果がこちらだ。
あれ、なんか思ったより見れる？
「AIが作ったんです」と言わんばかりの吹っ切れさが、むしろいい味になっている気すらする？
グラデーションと明朝体もなんかうまくはまっているし、句読点で世界観が引き立てられている…？？
…いや、公開するサイトとしてはナシだろうな。
まとめ
ということで、今回は自分なりにAIっぽいウェブデザインの原因について探ってみた。
思ったのは、
- AIに守らせたいルールを渡すだけでも、結構仕上がりが違ってくる。
- やっぱり写真などの素材は欲しい。
- 凝ったデザインはAIに明示しないと対応しない（曲線の境界、縦方向の文字、写真と背景領域のずらし、アニメーション、レスポンシブ対応を踏まえた文字調整など）
- AIモデルのトレーニングに使われた英語サイトと日本語サイトの量の差が一因としてあるかも。「英文なら許容できるけど日本語にするとダメ」という要素がいくつかあると思う。
などだろうか。
AIでウェブサイトを作ろうと思っている読者の皆さんの参考になれば幸いだ。
将来的に、こうしたAIっぽいデザインがリバイバルブームになったり未来のカルチャーになったりしてもてはやされる日が来るかもしれない。
