本文

AIに作らせた自分のサービスのLPを、見た目のばらつきを測る道具にかけました。

散らかり度 26。

同じものさしで、デジタル庁は 2 でした。NHKが 3、Mozillaの日本語サイトが 5、トヨタの公式が 7。

私のLPだけ、桁が違いました。

見たときの感想は「なんか安っぽい」でした。でも、どこをどう直せばいいのかは分かりませんでした。

「なんかダサい」の正体は、値の種類の多さです

整ったページは、少ない値を繰り返し使っています。

文字サイズは4段階か5段階。余白は4の倍数。色は基本色と強調色。角丸は1種類。影も1種類。

AIに何度も直させたページは、これが増えます。1回目に 16px を使い、2回目に 16.5px を足し、3回目に 17px を足す。1つずつは正しく見えるので、誰も止めません。

気づいたときには、文字サイズが16種類あります。

この道具が測るのは、そこです。「よく使う少数の値で、ページのどれだけを説明できるか」を9つの項目で数え、0〜100の点にします。低いほど整っています。

ページの大きさは点に影響しません。大きいサイトほど不利、にならないように作ってあります。

自己紹介

ミトです。AI活用の講師や個人で小さなサービスを20以上動かしています。

サイトも、レポートも、提案資料も、ほとんどAIに作らせています。速いので数が増えます。増えると、どれが整っていてどれが崩れているか、自分の感覚では分からなくなります。

「なんとなくダサい」と思っても、AIに「もっといい感じにして」としか言えません。そう頼むと、また新しい値が増えます。

だから、感想ではなく数字で言えるようにしました。その仕組みを、そのまま渡せる形にしたのがこのツールです。

コードは、1行も書きません

このBrainに入っているのは、すでに動く状態の一式です。

あなたがやるのは、Claude Code か Codex に渡して、日本語で「これを測って」と頼むことだけです。設定も、指摘の直し方も、動かないときの原因調べも、AI(Claude Code / Codex)の仕事です。頼み方の文章も、そのまま貼れる形で有料エリアに置いてあります。

条件はひとつだけ。Claude Code か Codex を、最低限使えること。 チャットで頼んだことがある、くらいで十分です。

逆に言うと、このAIがいない場合は、このBrainは向きません。正直にそう書いておきます。

測る

散らかり度は、9つの項目を別々に点にして、重みをつけて合わせたものです。

文字色 / 背景色
文字サイズ / フォント / 文字の太さ
余白 / 角丸 / 影
主要な要素の左端がそろっているか

出るのは点数だけではありません。「どの値が何回使われているか」の内訳と、外れ値になっている実際の要素が出ます。セレクタと、その場所の本文の抜粋つきです。

「なんとなく散らかっている」ではなく、「この行が原因」まで出ます。

ものさしは、こちらで実際に測った値です(2026年9月6日実測、測定日つきで同梱)。

デジタル庁 → 2
NHK → 3
Mozilla 日本語サイト → 5
トヨタ自動車公式 → 7
私がAIに作らせた自分のサービスのLP → 26
同梱の「わざと壊した練習ページ」 → 55

自分のページがどのあたりにいるか、同じものさしの上で分かります。

AIっぽさも別に照合します。紫のグラデーション、同じ形のカードの3列並び、絵文字だけの見出し、日本語に合わないフォント、消し忘れのダミーテキストなど、AIが作った画面に出やすい型を20種以上。

直す

指摘するだけでは終わりません。

あなたのページの写しに対して、直せるものを一度に3件まで直します。1件直すたびに測り直し、数字が悪化したらその1件は取り消します。 気づかないうちに別の場所が崩れる、が起きない進め方です。

本番のファイルには一切触れません。出てくるのは上書き用のCSSが1枚だけで、それを本番へ入れるかどうかは、前後を見比べたあなたが決めます。

検品票には、修理前と修理後を同じ場所で重ねて見比べるスライダーが付きます。横に動かすと入れ替わります。散らかり度と指摘件数の、前後の数字も並びます。

残す

直したあとの色・文字サイズ・余白・角丸・影の値を、あなたのページ専用の設計値として2枚に書き出します。

CSSの変数が1枚と、「このサイトはこの値だけを使う」という短い日本語のルールが1枚。

次に画面を作らせるとき、AIにこの2枚を読ませれば、同じ散らかり方を繰り返しません。測って、直して、残す。ここまでが1つの流れです。

そのうえで、壊れも見つけます

ここからが、見た目を整えるだけの道具との違いです。

きれいなページでも、リンクが死んでいれば売上になりません。整ったページでも、スマホでボタンが押せなければ問い合わせは来ません。

同じ1回で、次も見ます。

リンク: 押したらどこにも行かないリンク。「HTTP 200 を返しているのに、中身は『ページが見つかりません』」という、いちばん見つけにくい死に方を含めて実際に取得して確かめます
画像: 表示されていない画像、粗すぎる画像、そして「差し替えたはずなのに前の画像のまま」(中身を照合します)
スマホ: 横スクロールの発生、画面外へのはみ出し、ボタンが他の要素に覆われて押せない状態
ダークモード: 背景と同じ色になって消えている文字
文字: 文字化け、極小文字
共有: SNSに貼ったときに絵もタイトルも出ない状態(og:imageが無い、届かない)
数字: 本文に書いた数字と、同じページの表や一覧の数字が食い違っていないか

最後の1つは、AIに文章を書かせている人ほど効きます。表を直したのに本文の数字が古いまま、という食い違いは、読む人には一発で分かります。

そして、決めた線を超えていたら公開を止められます。公開の手前に1行置くだけです。人が覚えている必要がありません。

出てくるのは「検品票」1枚です

指摘の一覧ではありません。人に見せられる1枚のHTMLが出ます。

判定(出せる / 出せない)と、重さごとの件数
公開を止めているものが先頭に出ます。軽い指摘の下に埋もれません
指摘ごとに、どこが・なぜ出せないか・AIにそのまま貼れる修正依頼文
パソコン・タブレット・スマホ × 明るい画面・暗い画面、6枚の実際の画面
散らかり度の内訳と、外れ値になっている実要素の一覧
修理前後のスライダーと、数値の前後比較
総評と、「売れる形か」の診断10問。見た目が整っても売れないページはあるので、そこもAIに見させます
「測れなかったもの」を別枠で正直に出します(写真の上に乗った文字、ボットを拒否するサイトへのリンクなど)。ここはあなたが目で見る宿題として残ります

推測で「壊れている」とは言いません。測れないものは、測れないと書きます。

買う前に、実物を見られます。わざと壊した練習ページを測った検品票を、そのまま公開しています。加工していません。

数字が信用できないと、意味がありません

この商品でいちばん時間をかけたのは、検査を増やすことではありません。間違った指摘を消すことです。

公開中の自社サイト4本に向けた最初の測定では、「公開を止める」判定が合計 105件 出ました。1本ずつ手で確かめました。そのうち104件が、道具側の誤りでした。

誤りは4つの型に分かれていました。画面の外にある画像を読み込む前に測っていたこと。流れる帯の中の文字を「画面からはみ出している」と数えていたこと。年齢確認の覆いを「ボタンが押せない」と数えていたこと。本文の「7件の保存後は」という条件の数を、近くのリストの件数と突き合わせていたこと。

4つとも直しました。同じ4本で、105件が1件になりました。

残った1件は本物です。あるサイトの「Google Play」のボタンが、存在しないページへ向いていました。押した人は全員、Googleの404に着いていました。

「たくさん指摘が出る道具」は作れます。難しいのは、出た指摘が本物であることです。 この104件を消す作業が、この商品の中身です。

中身のカタログ

届くのはzip1つです。Node.jsで動く本体、9つの検査、写しに対して直す部分、設計値を書き出す部分、検品票を作る部分、公開を止める仕組み、練習用の壊れたページ一式、自動テスト、罠の記録(docs/traps.md)、AIへの頼み方が入っています。

渡す前に、テストが全部通ることを確認しています。あなたの手元でも同じ1行で確かめられます。

必要なもの

Claude Code か Codex(これが必須です。どちらかを使えること)
Node.js(パソコンに入れるものです。入れ方もAIに頼めます)
測りたいページ(公開中のURLでも、AIが作ったHTMLファイルでも構いません)

追加の契約や、外部サービスの費用はありません。測定はあなたのパソコンの中だけで動きます。

見た目を整えるスキルとの違い

AIに渡すデザイン系のスキルは、無料のものも有料のものもあります。多くは「これから作る画面」を良くするための言葉のガイドです。

このキットが違うのは3つです。

1つめ。数字で出ます。 「もっと洗練させて」ではなく「散らかり度26、原因は文字サイズが16種類、外れ値はこの行」まで出ます。直したあと、下がったかどうかも同じ数字で分かります。

2つめ。壊れも同じ1回で見ます。 見た目と、壊れと、嘘。3つとも1回の実行で出ます。

3つめ。止まります。 整えるスキルは、あなたが思い出したときに動かすものです。このキットは公開の手前に置いて毎回自動で動き、決めた線を超えていれば公開が止まります。

向かない人

Claude Code も Codex も使っていない人(このAIが前提です)
指摘をゼロにしないと気が済まない人(測れないものは「測れない」と出ます。そこは人が見ます)
日本語以外が主体のページの人(文字の検査が日本語向けです)
動画やアプリの画面が主役の人(ブラウザで開けるページが対象です)
意図的に多色を使うブランドサイトの人(散らかり度は高く出ます。数字だけで良し悪しは決まりません)

動かなくなるのは、だいたい同じ14か所

測る仕組み自体も、静かに壊れます。しかも「指摘ゼロ」という、いちばん安心する形で壊れます。

私が実際に踏んだものを挙げます。

画面の大きさが0のまま測って、全部「見えている」と判定した
半透明の背景を不透明として計算し、ダークモードで大量の誤検出を出した
背景がグラデーションの場所を「背景なし」と誤判定した
ボットを拒否するサイト(Xなど)へのリンクを「リンク切れ」と誤判定した
表示が遅れて出る要素を、待たずに測って見落とした
HTTP 200 とファイルサイズだけを見て「差し替え済み」と判断した(2回)
日本語がすべて ? になったのに、寸法の検査は通ってしまった
画像の置き場所の設定漏れで、公開の直前に2ページがサーバーエラーになった
文字数を切り詰めたのに、保存側で再計算されて上限を超え続けた
同じページを何度も測って、同じ指摘を毎回新規として数えた
画面の外にある画像を、読み込む前に測って「壊れている」と断定した
流れる帯の中の文字を、「画面からはみ出している」と数えた
年齢確認の覆いを、「ボタンが押せない」として1つずつ数えた
本文の「7件の保存後は」という条件の数を、近くのリストの件数と突き合わせた

散らかり度そのものも、一度作り直しています。 最初は「値の種類がいくつあるか」で採点していました。これはページが大きいほど点が上がるため、デジタル庁が52、Mozillaが80、わざと壊した練習ページが29という逆転が起きました。集中度で測る方式に入れ替えて、いまの表の値になっています。

11〜14は、この商品を売る直前に、自分のサイトで見つけて直したものです。この4つを直す前と後で、公開を止める判定は105件から1件になりました。

有料エリアには、この14か所それぞれについて「どんな症状か」「どう見分けるか」「AIに何と頼めば直るか」を書いています。誤検出を出さないための実装は、そのままコードで入っています。

よくある質問

Q. プログラミングは本当に不要ですか。

A. あなたがコードを書くことはありません。設定を埋める、指摘を直す、動かないときに原因を探す、といった作業はAI(Claude Code / Codex)に頼みます。頼む文章も用意してあります。

Q. 公開中のサイトに影響はありませんか。

A. ありません。測定は読むだけです。修理も、あなたのページの写しに対して行います。本番のファイルは書き換えませんし、どこかへ送信することもしません。

Q. 直したものは、どうやって本番に入れるのですか。

A. 上書き用のCSSが1枚出るので、それを入れるかどうかをあなたが決めます。前後を並べて見比べたうえで判断できます。押し付けで本番を書き換えることはしません。

Q. 散らかり度がいくつなら合格ですか。

A. 目安として10以下は整っている、25以上は手を入れる、と書いています。ただしこれは上の実測に基づく暫定値です。数字だけで良し悪しは決まりません。 意図して多色を使うページは高く出ますし、単色で退屈なページは低く出ます。数字は「どこを見るか」を絞るためのものです。

Q. 直せないものはどうなりますか。

A. 指摘ごとに「AIにそのまま貼れる修正依頼文」が出ます。機械で直せないもの(文章・構成・画像の中身)は、その文をあなたのAIに渡して直してもらいます。

Q. すでに公開しているサイトに入れると、指摘だらけになりませんか。

A. 最初の1回を「既知」として記録できます。以後は、新しく増えた指摘だけで止まります。今あるものを全部直してからでないと使えない、ということはありません。

Q. デザインを整えるスキルを持っています。要りますか。

A. 工程が違うので、そのまま併用できます。整えるスキルは作るときの指針、こちらは作ったあとの計測と判定です。詳しくは上の節に書きました。

Q. HTMLファイルにも使えますか。

A. 使えます。AIに作らせたレポートや資料のHTMLも、URLと同じ手順で測れます。

Q. 返金はできますか。

A. 商品の性質上できません。「向かない人」の節を読んでから購入してください。

価格は500円です

ワンコインにしました。

安く置いている理由は2つあります。ひとつは、この道具が「毎回動かすもの」だからです。高い道具は、身構えて年に数回しか使いません。測定は画面を作るたびに通すものなので、迷わず入れられる値段にしました。

もうひとつは、これが入口だからです。整えた先には、作る工程そのものと、そもそも崩さない仕組みがあります。そちらは別のBrainに置いてあります。ここで無理に回収するつもりはありません。

測る一式と、誤検出を出さないための実装と、詰まる14か所の直し方。この3つを500円でまとめて渡します。

発売後アップデート

2026年9月◯日公開。

更新はこの節に日付で残します。購入後に内容が増えても、追加の支払いはありません。

レビュー特典

購入後にレビューを書いていただくと、MI Studioのキット共通の「Claude Code / Codexへの頼み方テンプレ集(PDF)」をお渡しします。動かないときの切り分け、認証情報を出させない頼み方、画面が変わったときの直し方を、貼るだけの文章にしたものです。受け取り方は、レビューを書いた後に表示されます。

購入後は、紹介する側にもなれます

このBrainは、紹介料50%を全員に開放しています。記事ページの「紹介する」ボタンから、あなた専用の紹介リンクを作れます。紹介に使えるヘッダー画像・実物の画面・紹介文の例は、まとめて置いてあります。

免責

本記事の内容は2026年9月◯日時点のものです。ブラウザや外部サービスの仕様変更で、手順が変わったり動かなくなったりすることがあります
散らかり度は見た目の一貫性の目安であり、デザインの良し悪しや売上を判定するものではありません
検品は機械による検査で、すべての不具合を見つけるものではありません。特に「測れない」と出た箇所は人の確認が必要です。本記事は特定の成果を保証するものではありません
アクセシビリティ(WCAG等)の適合判定には使えません
Claude Code / Codex の利用料は別途かかります