# 日本語Webタイポグラフィ実験の素材

記事「AIが作る日本語サイトの『読みにくさ』を直す」で使った、測定コードと生データです。実行日は2026年10月17〜18日。ブラウザはPlaywright 1.64.1（Chromium 156.0.8078.4、WebKit 27.2）。Firefoxはこの環境で起動できず、測っていません。

[実験素材一式のZIP](/blog/japanese-web-typography-ai/experiment.zip)をダウンロードして展開し、展開先で以下の手順を実行してください。

## 中身

| 場所 | 内容 |
|---|---|
| `pages/<model>/<条件>-<回>/index.html` | 測定した36本のLP。Claude Code（Opus 5.5、Sonnet 5.5）が、架空の焙煎所「ふくろう坂焙煎所」で作ったもの。条件の意味は記事を参照 |
| `code/measure36.js` | 36本の文字サイズ・行高・1行の字数・見出しの折り返しを測る。`FIX_CSS` 環境変数にCSSを渡すと、読み込み後に足して測り直す |
| `code/heading-lab.js` | 240本の見出し×41の幅×8つの書き方×エンジンで、最後の行の文字数を数える |
| `code/vertical-lab.js` | 縦書きの店名が1文字落ちる現象を、24の画面サイズと6つの直し方で再現する |
| `code/text-spacing.js` | WCAG 1.4.12のテスト値に上書きして、文字が切れないか見る |
| `code/targets.js` | スマホ幅でタップ対象の大きさを測る |
| `code/vertical-scan.js` | 縦書きの要素と、縦中横の有無を調べる |
| `code/find-orphan-headings.js` | ブラウザのコンソールに貼って、最後の行が2文字以下の見出しを探す |
| `code/quiz/run.sh` | AIへの数字クイズを1回分実行する（`claude -p`、道具なし） |
| `code/agg36.py`、`code/agglab.py` | 結果を集計する |
| `data/` | 実測の生データ。クイズの質問と120回答の全文、240本の見出し、折り返し実験の生データ（gzip） |

## 実行のしかた

```bash
mkdir work && cd work
npm init -y && npm i playwright budoux
npx playwright install chromium webkit

# 36本の測定（PC 1440px と スマホ 390px）
node ../code/measure36.js out.json ../pages

# 直し方を当てて測り直す
FIX_CSS='h1,h2,h3{text-wrap:balance}@supports (word-break:auto-phrase){h1,h2,h3{word-break:auto-phrase}}' \
  node ../code/measure36.js out-fix.json ../pages

# 240本の見出しの折り返し実験（Noto Sans JPをGoogle Fontsから読むのでネットが要る）
node ../code/heading-lab.js ../data/headings240.json lab.json

# 縦書きの再現
node ../code/vertical-lab.js ../pages/sonnet/C-1/index.html vlab.json
```

集計は `code/` で `python3 agg36.py` と `python3 agglab.py` を実行します。

## 読むときの注意

- 「取り残し」は、見出しの最後の行が2文字以下のもの。句読点だけの行も含みます。
- 「語の途中で切れた改行」は、BudouXの区切りを物差しにしています。Chromeのauto-phraseと同系統の技術なので、auto-phrase側に有利です。
- 36本のLPは、測定のために保存したものです。生成時の外部フォントの読み込みには、Google Fontsを使っています。
- クイズは、2026年10月18日に `claude -p --tools ""` で実行しました。モデルはclaude-haiku-4-5-20251001、claude-sonnet-5-5、claude-opus-5-5です。採点は人が原典と照らして行いました。