AI Slop Check — Free
紫のグラデーション、絵文字の見出し、膨らむカード。 AIが作ったサイトに共通する「指紋」を機械検査して採点し、直し方まで提示します。 登録不要・無料・10秒。
公開ページのURLを入力。Bot保護の強いサイトは取得できないことがあります。
0 /100
?
100点満点・減点方式(高いほどAIっぽくない)
5分野の健全度(100 = その分野の減点なし)
この診断は、AIに「ダサくないサイト」を作らせる指示書テンプレート集 『DESIGN.md パック』の検査基準のダイジェスト版です。 テンプレート19種(業種別10・様式別9)と納品前チェックリスト30項目の完全版は、noteで販売予定です。
「なんとなく安っぽい」は感覚ではなく、コードの上に具体的な形で現れます。 この診断は、AI生成サイトに頻出する型を 5カテゴリ・10項目の減点ルールとして定義しています。 どれも「使ったら必ずダサい」ものではありません。重なるほど「どこかで見た画面」に近づく、という型です。
linear-gradient / radial-gradient / conic-gradient が
背景・ボタン・見出しに散っている状態。密度で減点幅が変わります。
→ ベタ塗り+罫線に置き換え、色は「地・墨・アクセント1色」に絞る。#8b5cf6 系の紫〜青紫や、Tailwind の indigo / violet /
purple / fuchsia。生成AIが既定で選びやすい色域のため、それだけで既視感が出ます。
→ 業種・商材から色を決める。迷ったら彩度を落とした1色+無彩色。backdrop-filter: または backdrop-blur によるすりガラス風の面。
→ 不透明な背景色と1pxの境界線で足ります。h1〜h3)の中の絵文字。
→ 外して、必要ならSVGアイコンや連番に置き換える。box-shadow: や shadow-md/lg/xl/2xl が多数の要素に付いている状態
(見ているのは出現数と密度で、影の濃さ・大きさではありません)。全部が浮くと、何も浮いて見えません。
→ 影は本当に浮かせたい要素だけに。境界は罫線で取る。:hover で transform: scale()、または hover:scale-。
→ 動かすなら色・下線・矢印など小さな手掛かりに。動かさない選択も普通にあります。font-style: italic の見出し(class="italic" や、見出し内の
<i> / <em> も同じ扱い)。日本語書体は斜体を前提に設計されていないものが多く、
機械的に傾けた字形は崩れて見えます。→ 強調は太さ・サイズ・余白で付ける。grid-template-columns: repeat(3, …) や grid-cols-3 の
「特徴3つ・アイコン付きカード」の反復。→ 重要度に差を付け、1カラムの読み物や非対称な組みを混ぜる。同じ事業者の1ページを、2通りで作りました。この診断で実際に採点した結果を並べます (架空の事業者です)。伝えている事業内容は同じで、変えたのは色・装飾・組み方と、 空文句を具体的な数字に書き換えた言葉です。 ——「次世代の」「革新的な」を、「創業32年」「平均18日」「新築は扱っていません」に。
スロップ警報。構造から見直しましょう
スロップの気配なし。人の手の跡があります
10項目のうち7項目が Before で検出されました。残り3つ(見出しの斜体・3列カードの多用・ ダミーテキスト)は、このページの作りでは条件に当たらなかったものです (斜体はCSSではなく見出しタグ側を見る/3列は3箇所以上で「多用」と数える、など)。
機械検査に通ることと、AIっぽくないことは別です。 上の Before は、横スクロールも画像の欠落もダミー文言も無く、 一般的な表示チェックには全部通ります。それでもこの診断では18点でした。 検査は「壊れていないか」を見ますが、「どこかで見た画面になっていないか」は別の物差しで測る必要があります。
DESIGN.md パックのテンプレートから、AIが生成した完成見本です。 ログイン不要で開けます(企業・店舗・人物は架空、写真はAI生成)。
ここで公開しているのは19種のうち4種です。残りは会員ページのギャラリーでご覧いただけます。