AI が作った画面はなぜどれも似て見えるのか — 繰り返される癖と直す方向

同じ顔が繰り返される理由

生成モデルは自分が見たものの真ん中を出す。公開ウェブに最も多く積み上がっている画面はここ数年の SaaS ランディングページとダッシュボードのテンプレートで、それらが互いに似ているのだから、学習したモデルの既定値もその真ん中に寄る。会社も、モデルも、プロジェクトも違うのに、結果は同じ顔をしている。

これはモデルが作れないからではない。指示がないときに何を選ぶかの既定値が一つしかないために起きる現象だ。既定値を変えない限り、プロンプトをいくら磨いても同じ場所へ戻ってくる。

だから必要なのは、もっと良い形容詞ではなくリストである。何が繰り返されるかに名前を付けておけば、「野暮ったい」という感覚が「この十一か所を直せ」という作業指示に変わる。オープンソースの Impeccable がそのリストを規則にした。Anthropic が公開していた frontend-design スキルから出発したプロジェクトだ。

繰り返される癖と、代わりにすること

以下は検査器が実際に名前を付けて捕まえる項目だ。ルール名があるという点が肝心である。名前があれば、レビューで「なんか変です」ではなく「これはカードの入れ子です」と言えるし、直す方向も一緒に決まる。

表の右列が代替案だ。多くは足すのではなく引くほうである。色帯を消し、グラデーションを単色に戻し、カードの殻を剥いで余白で分ける。画面が寂しくなるのではと心配になるが、実際にはその場で情報のほうが先に見えはじめる。

書体の項目は誤解されやすい。Inter が悪い書体だという意味ではなく、あまりに多くの場所で使われていて、もはやその画面を区別してくれないという意味だ。検査器が併せて名指しする一覧には Roboto、Geist、Plus Jakarta Sans、Space Grotesk、Fraunces が入っている。ブランドが決めた書体なら、例外として記録しておけばよい。

目ではなくコマンドで確かめる

検査は npx impeccable detect の一行だ。ファイルかフォルダ、あるいは URL を渡すと、引っかかった項目をルール名とともに知らせてくれる。LLM を呼ばないので API キーは要らず、同じ入力には同じ結果が出る。

確かめるために、上の表の癖をわざと詰め込んだ HTML を一枚作って走らせた。17 件が出た。次に指摘された箇所だけを直した。色帯を消し、見出しのグラデーションを単色に戻し、背景を単色にし、本文の文字色をコントラストが出るまで上げ、入れ子のカードを細い区切り線にほどき、書体を変えた。レイアウト構造と情報の順序には触れていない。

再度走らせると 0 件だった。下の画像がその前後である。右のほうが良く見えるなら、変わったのは感覚ではなくルール違反十一種だ。

もう一つ付け加えると、検査のしかたは対象によって分かれる。HTML はリンクされた CSS まで含めて静的解析し、JSX のようなファイルはパターンマッチ、URL を渡すと実際のブラウザでレンダリングされた画面を見る。だからソースの走査が綺麗でも、公開中の URL で引っかかる項目が別にありうる。

規則をすべて守る必要はない

リストは判決文ではなく点検表だ。ブランドが既に Inter を使うと決めているなら、それは違反ではなく決定である。その場合はファイルの中に impeccable-disable コメントを書いてその場だけ免除するか、リポジトリの設定に例外を記録しておく。どちらも理由を併せて書くことになるので、次の人が「なぜここだけ違うのか」と尋ねずに済む。

一部の項目はそもそも失敗として数えない。参考として分類された指摘は一覧には出るが終了コードを変えないので、自動化を止めない。パイプラインに組み込むときは、この区別を先に確認しておくとよい。

結局このリストの効用は、好みを統一することにはない。毎回違う言い回しで伝えられていた指摘を、同じ名前で呼べるようにすることにある。名前が揃うとレビューは短くなり、同じ指摘が二度繰り返されなくなる。