---
name: lp-line
description: >-
  日本語のLP（ランディングページ）やHTMLスライドの見出し・段落を、BudouXで文節（ぶんせつ）単位に
  折り返して「見やすい改行」に仕上げるスキル。CJKが単語の途中で割れる・閉じ括弧「」」や句点「。」が
  行頭に落ちる・大事なフレーズが行をまたぐ、といった日本語特有の改行崩れを直す。
  「LPを作って／仕上げて」「HTMLでスライドを作って」「見出しの改行を整えて／きれいにして」
  「文節で改行したい」「ここは句読点で改行して」「この言葉は割らないで」「BudouXで」などの
  依頼や、日本語のHTML/LP/スライドを作成・仕上げる場面では、明示的に頼まれなくても必ずこのスキルを使う。
  通常HTMLと、バンドラー書き出し形式（__bundler/template を内包するHTML）の両方に対応。
---

# lp-line

日本語のHTML（LP・スライド）は、ブラウザ標準だと文の途中の好きな位置で改行され、
読みにくく・ダサくなりがち。「でも」が「で／も」に割れたり、「。」だけが次の行に落ちたり、
ブランドの核フレーズが分断されたりする。

このスキルは **BudouX**（Googleの日本語分かち書きエンジン）で文章を文節に分け、
文節の境界にだけゼロ幅スペース（ZWSP / U+200B）を入れて、
**文節単位でだけ改行され、語の途中では絶対に割れない**状態に仕上げる。

## 設計思想（なぜこうするか）

この4つは崩さないこと。理由まで理解しておくと応用が効く。

1. **原稿（ソース）にはZWSPを書かない。成果物にだけ入れる。**
   ZWSPは目に見えない制御文字。原稿に混ぜると後の編集・grep・コピペで事故る。
   だから「原稿はクリーンなまま、ビルド時に成果物へ注入」する。元ファイルは上書きしない。

2. **CSSは `word-break: keep-all` + `line-break: strict`。`overflow-wrap: anywhere` は使わない。**
   keep-all で「ZWSP以外では折り返さない」、strict で禁則（行頭に 」。、 を置かない等）を守る。
   `overflow-wrap: anywhere` を足すと、領域が狭いとき禁則を無視して「」や。を行頭に落とす
   ―― これが「変な改行」の主犯。文節は短いので溢れはほぼ起きず、anywhere は不要。

3. **クライアントJSは足さない。** BudouXはビルド時にだけ走らせ、成果物は素のHTML+CSS。
   表示時に追加スクリプトを読ませない（速度・堅牢性・iOS Safari互換のため）。

4. **タグは温存し、テキストノードだけ加工する。** `<span>` `<br>` などの構造は壊さない。

## ワークフロー

### 1. 準備（初回のみ）

スクリプトは `scripts/linebreak.mjs`、依存は budoux だけ。スキルの scripts ディレクトリで：

```bash
cd <このスキル>/scripts
npm install        # budoux を入れる（初回のみ）
```

Node 18+ が必要。

### 2. 実行

```bash
node <このスキル>/scripts/linebreak.mjs <input.html> [output.html] [--config config.json]
```

- `output` 省略時は `<input>.linebreak.html` を生成（**原稿は上書きしない**）。
- 通常HTMLか、バンドラー形式（`<script type="__bundler/template">`）かは**自動判定**。
- 既定で `h1〜h6, p, li, blockquote, figcaption` のテキストを文節改行し、
  keep-all + line-break:strict のCSSを `<head>` に注入する。

### 3. 確認（必ず複数幅で見る）

成果物をブラウザで開き、**iPhone幅（375px前後）とPC幅（1280px前後）の両方**を確認する。
プレビューが使えるなら mobile / desktop を切り替えて見出し・段落の折り返しをチェック。
チェック観点：
- 単語の途中で割れていないか（例：「でも」「ワークショップ」「問いかけ」）
- 「」や。が行頭に孤立していないか
- 大事なフレーズが行をまたいでいないか

### 4. 微調整（config.json）

気になる箇所は **辞書を触らず** `config.json` の語リストだけで直す。
`references/config.example.json` を雛形にコピーして使う。主な項目：

| 項目 | 用途 |
|------|------|
| `keepTogether` | その語の内部で改行させない（核フレーズ保護・誤分割修正・句読点改行） |
| `forceBreakAfter` | その語の直後で必ず改行させる |
| `newlineToBrClasses` | 指定クラスの生改行(`\n`)を`<br>`化（デザイナーの改行を活かす） |
| `pcMaxWidth` | PC幅でだけ見出しの行長を抑える（例 `{"h2":"15em"}`） |
| `fontFit` | 特定見出しのフォントを下げて核フレーズを1行に収める |

調整したら `--config` を付けて再実行 → 再確認。納得するまで繰り返す。

## よくある調整パターン

**核フレーズを絶対に割らない**（ブランドの決め言葉など）
```json
{ "keepTogether": ["自分には無理だ"] }
```
それでも列幅に入らず折れる/括弧が孤立する見出しは、`fontFit` でフォント上限を下げて収める：
```json
{ "fontFit": { "selector": ".hero h1", "fontSize": "clamp(30px, 4.0vw, 48px)" } }
```

**句読点でだけ改行したい**（例：「思い込みが外れたとき、人は動き出す。」を `、` で改行）
→ 前後の節をそれぞれ `keepTogether` に入れて塊にする。唯一の改行候補が `、` の後ろだけになる。
```json
{ "keepTogether": ["思い込みが外れたとき", "人は動き出す"] }
```

**BudouXの誤分割を直す**（例：「という」が「と／いう」、「問いかけ」が「問い／かけ」）
```json
{ "keepTogether": ["という", "問いかけ"] }
```

## バンドラー形式について

一部のデザインツール書き出しHTMLは、本文を `<script type="__bundler/template">` 内に
**JSON文字列**として格納し、JSで描画する。スクリプトはこれを decode→加工→再エンコードする。
このとき本文中の `</script>` が外側の script タグを閉じないよう、`</` を `</` に
エスケープして差し戻す（元ツールと同じ方式）。ここは自動で処理されるので意識不要。

## 検証のヒント

- 原稿に ZWSP が無いこと：`grep -c $'​' input.html` が 0。
- 成果物に ZWSP が入っていること：同コマンドが正の数。
- クライアントJSを増やしていないこと：`<script` の数が原稿と成果物で同じ。
- バンドラー形式は、成果物のテンプレJSONが壊れず再パースできること（`</script>` の数が増えない）。
