「ごちゃごちゃして見える」を数にする——強調の要素を 240px の窓で数えたら、直した後も 2 か所残った

Posted at 2026-09-29

自分のサイトを見直していて、「全体的にごちゃごちゃしている」と感じました。当方の見立ては「文字の大きさや太さで強調するところが密集する箇所があるから」。感想のままだと、直したあとに良くなったかを比べられません。そこで、強調されている文字を DOM から拾い、画面を高さ 240px の窓に区切って数えることにしました。

トップの「まず、必要なら診断から。」の 240px には、見出し 26px・金額 34px・小見出し 17px と、4 つの語（22px）が全部太字で、強調が 7 個・4 種集まっていました。見立ては当たっていました。

数え方（先に文だけで決めた）

09-25 に一度数えたときの器は残っていませんでした。作り直す前に、数え方を文章で決めてから書きました。数に合わせて器を曲げないためです。

強調の要素: 文字を直接持つ要素のうち、計算後のスタイルが「太さ 600 以上」「大きさ 20.4px 以上（本文 17px の 1.2 倍）」「数字の書体（IBM Plex）で 20px 以上」のどれか
数えないもの: display:none・閉じた <details> の中・色が透明・大きさ 0
個: 要素の数（語の数ではない。「4 つの語」は 4 個）
種: 窓の中の「大きさ（px に丸める）× 太いか」の組の数
窓: 高さ 240px を 80px ずつずらす。要素は箱の縦の中心で窓に入れる
密集: 6 個以上か 4 種以上。この線は 09-25 に数を見た後で置いた線です（一般の基準ではありません）
残す数: 密集の窓の数・全部の窓の数（分母）・続いた密集をまとめた区間の数

// 文字を直接持つ要素だけを拾う（抜粋）
for (let el = walker.currentNode; el; el = walker.nextNode()) {
  const hasText = [...el.childNodes].some(n => n.nodeType === 3 && n.textContent.trim());
  if (!hasText) continue;
  const cs = getComputedStyle(el), r = el.getBoundingClientRect();
  if (!el.getClientRects().length || r.width === 0) continue;          // 見えない
  if (el.closest('details:not([open])') && !el.closest('summary')) continue;
  const size = parseFloat(cs.fontSize), weight = parseInt(cs.fontWeight, 10);
  const emph = weight >= 600 || size >= 20.4 || (/IBM Plex/.test(cs.fontFamily) && size >= 20);
  if (emph) items.push({ y: r.top + scrollY + r.height / 2, size: Math.round(size), bold: weight >= 600 });
}

09-25 の器を作ったときは、2 回数えすぎていました。1 つは閉じた <details> の中身です。Chrome は位置を返しますが、描画はしません。もう 1 つは色が透明な罫線でした。上の仕様の「数えないもの」は、この 2 回から来ています。

測った

直した前後のコミットを手元でビルドし、11 頁 × 幅 1,280／375 を 2 回ずつ数えました。2 回とも全部の頁で同じ数でした。本番は測っていません（その後の変更が入っているため）。

器が反応するかも確かめています。トップの先頭に太字の塊を 7 個足すと、密集の窓は 2 枚増えました。

頁・幅	直す前	直した後
トップ 1,280	9/49 枚（18%）・4 区間	5/49 枚（10%）・2 区間
トップ 375	2/71 枚・1 区間	2/67 枚・1 区間
Lab の索引 1,280	8/80 枚・3 区間	1/79 枚・1 区間
Works 1,280	3/59 枚・1 区間	0
料金 375	2/120 枚・1 区間	0
ほかの 17 の組	0	0

「まず、必要なら診断から。」の窓は、4 つの語を太字でない 1 行にまとめ、7 個 → 3 個になりました。

残った 2 か所

トップには、直した後も密集が 2 区間残りました。

看板の数字（上から 560〜880px）: 88px の「14/14」、20px の「通過」、22px の「10 / 10」、15px の「PASS」、17px の「相談する」。6 個・6 種で、直す前と同じです。看板は「1 件を象徴する数字」を置くと決めた場所なので、今回は触っていません
実例のカード 2 枚（2,160〜2,400px）: 札・題・数字が 2 枚分で 6 個・3 種。題の太字を外し、数字を 44px から 34px にしましたが、要素の数は 6 のままなので、個数の線（6 個）に残りました

「14/14」は、斜線だけが別の要素（88px・太字でない）なので 2 個と数えています。要素で数えるとこうなります。語や塊で数えるなら 1 個です。

09-25 の数と合わない

09-25 の器では、トップは 14% → 2% でした。今回は 18% → 10% です。ほかの 3 頁はほぼ合いました（09-25 → 今回の順に、Lab の索引 10%→0% と 10%→1%、Works 6%→0% と 5%→0%、料金 2%→0% と 2%→0%）。

09-25 の器は「強調の塊」を数え、今回は仕様どおり「要素」を数えています。そのため、看板の数字の 6 種が今回は密集に入った、という違いは考えられます。ただ、09-25 の器が残っていないので、これが原因とは確かめられていません。記事では 2 つの値を分けて書きます。

線を動かしても向きは同じか

線を 5 個／7 個、3 種／5 種に動かして、直す前と直した後を数え直しました。密集があった 5 つの頁・幅 × 動かした 4 通りの線＝20 組のうち、19 組で「減ったか同じ」でした。

例外は 1 組で、スマホのトップを「3 種以上」の線で数えると 6 枚 → 7 枚に増えます。線を下げると向きが変わる所があります。

言わないこと

1 つのサイトの、1 回の直しの前後の記録です（同じビルドを 2 回数えて一致させただけで、別のサイトや別の直しでは試していない＝探索的な結果）
6 個・4 種を一般の基準としては書きません。当方が数を見た後に置いた線です
「すっきりした」「問い合わせが増えた」とは書きません。測っていません（最後の判定は人の目）
「強調を 1 つにしたから減った」と、1 つの原因にはしません。同じ直しで、行をまとめる・数字の大きさを 2 種に絞る、なども同時に入れています

この記事の本家（器・11 頁×2 幅×2 回の数・窓ごとの CSV 5,117 行・線の感度）は Sumitsuke Lab → 強調の密集を 240px の窓で数える（検証の記録つき）。

AI の利用について

器を書いて数えたのは AI（Claude Code）です。「ごちゃごちゃ」の見立て、直すかどうか、見た目の良し悪しの判定は人が行いました。