AIで作ったホームページが「AIっぽい」と言われるのは、見た目に決まった特徴がいくつも重なっているからです。特徴は一つずつ数えられるものなので、画面を見て当てはまるものを確認し、効果の出やすい順番で直せば、見た目の印象はかなり変わります。
この記事で紹介するチェック項目と直す順番は、AIが作る画面の特徴を研究しているDamir Sokolovsky氏(X: @heydamir)が公開しているunslopという手順書（CC BY 4.0で公開されており、引用や応用の際はこの出典を残すことが条件になっています）と、私たちが自社の制作物を見直す中で確認してきたことをもとにまとめています。
「AIっぽい」と言われるサイトに共通する特徴
AIに「ホームページを作って」と頼むと、同じような特徴を持つ画面が出てくることがあります。色のグラデーション（2色以上の色がなめらかに変化する塗り方）、絵文字をアイコンの代わりに使う、ボックスの周りを光らせる、余白の大きさがページのあちこちで違う、といった特徴です。
一つだけなら気にならないこともありますが、同じ画面の中にいくつも重なると、見た人に「量産型」「AIで作った感じ」という印象を与えてしまいます。
自分の画面で確認できること
まず、今のホームページを開いて、次の項目に当てはまるものがあるか確認してください。
片側だけの太い線は、カードやボタンの左端や上端だけに、色のついた太い線が入っているパターンです。情報を目立たせる方法として便利に見えますが、実際にはAIが作った画面に非常によく出る特徴で、見る人に「量産された感じ」を与えやすいものです。
絵文字アイコンは、見出しや箇条書きの先頭に、絵文字が並んでいる状態です。絵文字自体が悪いわけではありませんが、アイコンの代わりに使うと、仕上がりが整っていない印象になります。
グラデーション見出しは、見出しの文字色が紫から青、青から緑のように変化しているパターンです。目立たせる意図は分かりますが、使われすぎている表現なので、逆に印象を薄くしてしまいます。
光る装飾は、ボックスの周りがぼんやり光っていたり、浮き上がって見える影がついているパターンです。
バラバラな余白は、同じ種類の要素なのに、場所によって間隔が違うパターンです。見た目の整った印象は、実はほとんど余白の揃い方で決まります。
根拠のない数字は、「導入社数1万社」「満足度98%」のような、確認できない数字がそのまま書かれているパターンです。これは見た目の問題ではありませんが、信頼を損ねる要因になります。
なぜ直す順番が大事なのか
これらの特徴は、どこから直してもいい、というわけではありません。直す順番を間違えると、後で直した部分の効果が見えにくくなったり、手戻りが増えたりします。
たとえば、見出しの文字サイズを先に決めてしまうと、あとで見出しの文章を短く書き直したときに、サイズが合わなくなって調整し直すことになります。逆に、文章を先に決めてから文字サイズを合わせれば、一度で済みます。
余白も同じです。余白がバラバラなまま色やアイコンを直しても、全体の印象は整いません。余白を揃えてから色を直すと、変化がはっきり見えるようになります。
直す順番
まず余白を整えます。同じ種類の要素（カード同士、ボタン同士など）は同じ間隔にし、グループの中の余白より、グループとグループの間の余白を大きくします。
次に色です。グラデーション、光る装飾、色のついた影を外し、背景・文字・枠線の色を少ない色数にまとめます。強調したい部分だけに、一色だけアクセントカラーを使います。
次にアイコンです。絵文字を、同じ種類の線画アイコンに置き換えます。アイコンの大きさと線の太さは、ページ全体で統一します。
次にコピー（見出しや説明文の文章）です。長すぎる見出しは、具体的で短い言葉に書き直します。「〜してみてはいかがでしょうか」のような曖昧な言い回しや、確認できない数字は外します。
次に文字です。コピーが決まった段階で、見出しと本文の文字サイズ、太さを整えます。見出しの太さは強すぎないものを選びます。
最後にレイアウトです。ここまでの変更が終わった段階で、要素の配置やバランスを整えます。先にレイアウトだけ変えても、色や文字が整っていなければ、印象はあまり変わりません。
自分で直せる範囲とプロに頼む範囲
余白を揃える、グラデーションや絵文字を外す、見出しの文章を短くする、という作業は、コードの知識がなくても、サイトを作ったツールの管理画面から進められることが多いです。
一方で、ページ全体のレイアウトを組み直したり、雰囲気に合った写真やイラストを新しく用意したりする作業は、専門的な知識が要ります。この部分は、Web制作の専門家に相談する方が早く済みます。自分で直せる部分を先に済ませておくと、専門家に頼む範囲が明確になり、依頼のやりとりもスムーズになります。
まとめ
AIで作ったホームページが「AIっぽい」と言われるのは、片側だけの太い線、絵文字アイコン、グラデーション見出し、光る装飾、バラバラな余白、根拠のない数字といった特徴が重なっているからです。余白、色、アイコン、コピー、文字、レイアウトの順で直していくと、手戻りが少なく、効果も実感しやすくなります。
AIでサイトやアプリを作る環境そのものに興味がある方は、Google Antigravityの解説記事も参考にしてください。見た目だけでなく集客面も含めてサイトの状態を見直したい方は、Webマーケティング健康診断も合わせて確認できます。
よくある質問
AIで作ったサイトは必ず「AIっぽく」見えますか。
いいえ。特定の特徴がいくつも重なったときに「AIっぽい」という印象になります。特徴を一つずつ直していけば、見た目の印象はかなり変わります。
自分で直せますか。
余白を揃える、グラデーションや絵文字を外す、見出しの文章を短くする、といった作業は専門知識がなくても進められます。レイアウトの組み直しや画像の制作は、専門家に頼んだ方が早いことが多いです。
なぜ直す順番が決まっているのですか。
余白を直さないと他の変更の効果が分かりにくく、見出しの文章の長さが文字の大きさを決めるため、後の工程ほど前の工程の結果に影響されます。順番を守ると手戻りが減ります。
一番よく見かけるサインは何ですか。
カードやボタンの片側だけに太い色付きの線が入っているパターンと、見出しの文字に紫から青へのグラデーションがかかっているパターンです。
