japanese-typography-qa

name	japanese-typography-qa
description	日本語の見出し・本文の折り返し / タイポグラフィ品質ゲート。日本語 UI・LP・ドキュメントのコピーやフォントサイズ、改行、行間に触れる前に必ず読む。英語の折り返しルールをそのまま日本語に当てると崩れる(禁則・文節・字面密度が違う)ため、JP 専用の規則・モダン CSS・モジュラースケール・実機検証手順を正典化する。design-taste-frontend を補完する JP 特化スキル。

Japanese Typography QA

日本語の見出し/本文を作る・変えるときの折り返し・サイズ・行間の品質ゲート。 「英語で良いものは日本語でも良い」は誤り。日本語はブラウザが文字単位で折り返し、字面が密で、禁則処理がある。雰囲気で決めず、本書の規則と実機検証で確定する。 関連: design-taste-frontend(L226 CTA折り返し禁止 / L236-237 ヒーロー見出しは desktop 2行・font-scale 規律)。

このスキルは CSW LP の日本語ヒーロー崩れ(3行+孤立文字、フォント過大、画像とのキツキツ、セクション見出しがヒーローより大きい逆転)を、Apple JP / SmartHR / Notion JP の実例サーベイ + 1.2 モジュラースケール設計で解決した知見を正典化したもの。

---

0. 着手ゲート(毎回・例外なし)

日本語の見出し/本文/コピー/フォントサイズ/改行/行間に触れる前に:

1. 本 SKILL.md を Read し、その編集に効く具体節を列挙して当てる(§5 だけ唱えて満足しない。§1 孤立・§3 サイズ・§4 スケール・§7 も該当すれば全部挙げる)。「一度読んだ」は次の編集の免罪符にならない。各編集ごとに引き直す。
2. 変更後、ヘッドレスで desktop と真のモバイル幅を実レンダ(セクション 5)。
3. 「直した/完了」と言う前に §7 出荷前チェックリストを1項目ずつ、実測の根拠つきで通す。目視で眺めただけは通過にしない(虚偽報告と同じ)。テキストは各行の文字数(最終行が2-3字の孤立でないか)を測る。§1 の孤立規則は見出しだけでなくカード説明など本文の折り返しにも適用する。仕組みの根拠: [[run-skill-checklist-before-ship-not-just-read]]。

---

1. 改行の規則(英語と違う)

• ブラウザは日本語を文字単位で折り返す。 だから英語の text-wrap: balance / pretty を日本語見出しに使うと文節の途中で割れて素人っぽくなる。JP 見出しに balance/pretty は使わない。
• 見出しは文節(bunsetsu)境界で改行する。 「Claudeデスクトップアプリを|用途ごとに分ける。」のように、意味のまとまりで折る。助詞「を/は/が/に」の直後、読点位置などが境界。
• 禁則処理(kinsoku): 行頭に「、。」閉じ括弧・小書きかな等が来ない / 行末に開き括弧が来ない。line-break: strict でブラウザの禁則を強制する。
• 孤立(orphan)を出さない。 最終行に 1〜2 文字だけ落とさない。短いコピー + 文節改行 + 適正サイズで回避する。
• 行数の目安: ヒーロー見出しは desktop で 2 行が目標、3 行が上限。プレミアム JP サイト(Apple JP / SmartHR / Notion JP)は短文を 2 文節 2 行に収める。「3 行以上に折り返す」=「コピーが長すぎる」か「フォントが大きすぎる」のサイン。コピーは削らずまずフォントを下げる(design-taste-frontend L237)。
• 改行点で読点が不要になることがある。 文節の切れ目で改行するなら、その読点「、」は改行自体が間を作るので削ってよい(より端正に読める)。

2. モダン CSS(2026 / フォールバック付き)

JP 見出しの折り返しは次の重ね掛けが堅牢(Chrome/Safari/Firefox)。

.headline {                      /* lang=ja 配下 */
  word-break: auto-phrase;       /* Chromium 119+ が文節(BudouX 相当)で改行。Safari は TP のみ・Firefox 未対応 */
  line-break: strict;            /* 禁則を強制(。が行頭に来ない) */
  overflow-wrap: anywhere;       /* 極端に狭い幅でも溢れさせない最終保険 */
  font-feature-settings: "palt" 1; /* プロポーショナルメトリクスで仮名の字間を詰める */
  /* text-wrap: balance は使わない(JP は文節途中で割れる) */
}

• 確定的な改行は静的 <wbr> をマークアップの文節境界に入れる: Claudeデスクトップアプリを<wbr>用途ごとに分ける。。<wbr> は全ブラウザで JS ゼロ・CLS ゼロで効くので、これが「全ユーザーが実際に見る改行」。word-break: auto-phrase は Chromium だけの上乗せ。
• フォールバック連鎖: <wbr>(常時) → word-break:auto-phrase(Chromium) → overflow-wrap:anywhere(溢れ保険)。
• inline-block で文節を囲む旧ハックは使わない(境界で禁則/折り返しが切れ、狭いモバイルで見切れる)。
• 多くの文節がある長文には <wbr> を増やすか BudouX(<budoux-ja> または ZWSP/<wbr> 事前挿入)を検討。短い見出しは手置き <wbr> で十分。コピーを変えたら <wbr> 位置を再確認する(手置きのため)。

3. サイズ(英語より小さく、行間は広く)

• 日本語は英語より字面が密。同じ視覚的重さでも JP 見出しは英語より小さくする。CSW ヒーローは EN 72px に対し JP は desktop 38px(clamp(1.625rem, 1.1rem + 2vw, 2.375rem))。最終値はコラム幅で 2 行に収まる上限で決まる(英語と同 px にすると 1 文節が半幅コラムを溢れる)。
• 行間(line-height)は英語より広く: 大見出し 1.3〜1.4 / カード見出し 1.5 / 本文 1.7〜1.9(漢字・仮名の呼吸)。EN の詰まった行間を流用しない。
• 字間(letter-spacing): JP 大見出しは 0.02〜0.04em 程度。
• 「折り返しすぎ=フォントが大きすぎ」。狙った行数にならないときは、まずフォントを下げる(コラム幅 ÷ 最長行の文字数で上限が決まる)。

4. ページ全体の JP モジュラースケール

見出しを 1 段だけ直すと、他セクションがヒーローより大きい逆転が起きる(CSW で実際に発生: 52px のセクション h2 が 38px のヒーロー h1 より大)。ヒーローを頂点に全段を 1 つのモジュラースケール(1.2 minor third 目安)で降順に組む。

CSW で確定した JP スケール(参考):

段(token)	px	rem	用途
hero	38	2.375	ヒーロー h1(アンカー・最大)
statement	32	2	セクション主張見出し(feature-intro h2)
section	26	1.625	各セクション見出し h2
card	22	1.375	カード/ステップ見出し h2/h3
lead	18	1.125	リード文(各セクション p)
body-lg	17	1.0625	密な本文(カード/ステップ本文)
body	16	1	基本本文
caption	15	0.9375	補足
eyebrow	13	0.8125	小ラベル(Latin のみ uppercase、JP は不可)

規律:

• ヒーローがページ最大。 どのセクション見出しもヒーローを超えない(超えたら逆転=バグ)。
• モバイルでもヒーローを最大に保つ: 各 breakpoint でヒーロー > セクション見出しを維持(例 <=768 でヒーロー32px > セクション 24px、<=480 でヒーロー28px > セクション 22px)。
• 同じ役割は同じ段(全セクション h2 は同サイズ)。1.2 比は隣段が近い(32/26/22)ので、差別化はサイズでなく太さ・色・余白・eyebrowで付ける。サイズで目立たせて逆転を再発させない。
• 新規セクションを足したら必ずその段に JA 上書きを書く。EN base に落ちると逆転が再発する。
• EN は EN で階層が成立しているなら触らない。JP は html[lang="ja"] 上書きで JP スケールに揃える(EN/JP は同 px でなく、各言語で適正な絶対値 + 階層一致が「統一感」)。

5. CTA・記号・コピーの規則

• CTA ラベルは絶対に折り返さない: white-space: nowrap + flex-shrink: 0 + 親に flex-wrap: wrap(2 つ入らなければボタン単位で次行へ。語中改行はしない)。design-taste-frontend L226。
• nowrap は短いボタンラベル限定。本文・流し込みテキストには使わない(横溢れの原因)。
• 中黒「・」の連打を区切りに濫用しない。日本語の名詞列挙の「・」は正当だが、装飾的な区切りとしての多用は避ける(design-taste-frontend 9.F)。
• ※(米印)・*(アスタリスク)を注記に使わない(CLAUDE.md §5 Anti-Slop Typography / グローバル規約)。視覚階層(サイズ・色・不透明度)で従属情報を表す。
• 絵文字・em-dash(—)をユーザー可視テキストに使わない。
• 長い説明・文章は丁寧語(です・ます)の完全文で書く。カジュアル・体言止め・「〜のときに。」のような断片を使わない。例外は短いラベル/バッジ/ボタン/プレビュー値(共有・分離・コピー、推奨、〜を作る 等)で、これらは体言止め(名詞)でよい。1文以上の説明になったら必ず丁寧語の完全文にする。
• 並列に並ぶ要素(モードカード・選択肢カード・bento セル等)は、説明の分量・文数・文体を揃える。1つだけ説明が長くてカードが大きい/1つだけカジュアル、は雑な見た目。同じ構文テンプレに流し込み、揃わなければ CSS で min-height を当てて高さを均す。出荷前に横並びで読み比べる。
• 前から読んで疑問が起きない語順を徹底する(用語の説明にカッコを使わない)。jargon や非自明な語を説明するときは、説明を先に述べてから用語を出す地の文にする(○「書き方を指摘する clippy」「Apple にアプリの身元を確認してもらう手続きである署名と公証」 ×「clippy(書き方を指摘するツール)」「署名と公証(Apple にアプリの…手続き)」)。後から括弧で説明する書き方は使わない(論文でも書かない)。同じ理由で断定を先・理由を後にしない(理由や定義を先に置いてから結論・用語を出す)。自明な内容はそのまま使ってよい。読み手が前から一度読むだけで疑問なく理解できる順序にする。EN/JP 共通。
• 和文の丸括弧は、次の 3 つ以外に使わない (2026-07-03 matsumotory 指摘。LP とアプリ UI でカッコ乱用が再発したため明文化)。
  1. 短いコード名・ファイル名・形式の参照 (crates/core / .dmg / CLAUDE.md 等。説明ではなく識別子)
  2. 初出の略語導入 (「Claude Desktop Switcher（以下 CSW）」の型)
  3. フォーム入力ラベルの必須・任意マーク (「アイコン（任意）」の型) これ以外——補足・言い換え・対象読者・推奨・既定・例示・分類・条件・1 文相当の注記——を丸括弧に入れているのは、文章を書くのを放棄しているサイン。地の文に開く: 例示は「〜や〜など」「iTerm2 のような〜」、推奨・既定は「既定は〜で、迷ったらこれをおすすめします」、注記は独立した文にする。見出し・ボタン・折りたたみ等の UI ラベルを「名詞（補足）」の形にしない (×「場所（この環境のデータ）」→ ○「この環境のデータの場所」。補足が要るラベルは名詞句を組み直すか、説明行を別に置く)。括弧の入れ子 (丸括弧の中に鉤括弧) は絶対に作らない (×「設定を共有する環境（「会話とメモリも分ける」「アカウントだけ分ける」）」→ ○「「会話とメモリも分ける」や「アカウントだけ分ける」で作った、設定を共有する環境」)。
• 対象や所有者が自明でない名詞に「何の」を必ず添える。利用量・使用率・容量・設定・履歴のような名詞を裸で置くと、読み手は「何の?」と保留を強いられる (×「各環境の利用量」→ ○「各環境での Claude の利用量」)。文中の初出で対象を明示し、以後も文脈が切れたら添え直す。

6. 検証(実機目視・必須)

• ヘッドレスで desktop と真のモバイル幅を実レンダ目視。light/dark はページのテーマ数に従う(単一テーマなら 1 つでよい)。
• Chrome の罠: --headless --window-size=390 でも CSS viewport が 500px 床に張り付き、390 指定が効かない(スクショ画布だけ 390 で右が見切れ、CSS 溢れと誤認する)。真のモバイル幅は DevTools Protocol の Emulation.setDeviceMetricsOverride で作る(--remote-debugging-port + --remote-allow-origins=*、width:390, mobile:true)。--window-size を信じない。
• 溢れ判定は数値で: ページの document.documentElement.scrollWidth == innerWidth(横スクロール無し)、見出し要素の scrollWidth <= clientWidth(語が箱を溢れていない)を確認。overflow-x: hidden が溢れを隠すので、見た目だけで判断しない。
• fade-in 等のアニメは --virtual-time-budget で送ってから撮る(途中の薄い状態で誤判定しない)。
• desktop は 1024 / 1200 / 1440、モバイルは 360 / 390 で見出しが狙った行数に収まり溢れないことを確認。コピーや <wbr> を変えたら再検証。

7. チェックリスト(出荷前)

• ヒーロー見出しは desktop 2 行(最大 3)、孤立文字なし、<wbr> で文節改行。
• JP 見出しに text-wrap: balance/pretty を使っていない。word-break:auto-phrase + line-break:strict + overflow-wrap:anywhere + <wbr>。
• JP 見出しは EN より小さめ、行間は広め(1.3〜1.4)。
• ページ全体が 1 つの JP モジュラースケールで降順。ヒーローが最大、どのセクション見出しもヒーローを超えない(逆転なし)。新規セクションに JA 上書きあり。
• CTA ラベルが折り返していない(nowrap + flex-wrap:wrap)。
• ※・*・絵文字・em-dash をユーザー可視テキストに使っていない。
• 成果物を「（」で grep し、全カッコが許可 3 種 (識別子 / 略語導入 / フォームの必須任意マーク) のどれかに該当することを 1 件ずつ判定した。UI ラベルに「名詞（補足）」形が無い。括弧の入れ子が無い。「何の」が曖昧な名詞 (利用量・容量等) が無い。
• DevTools Protocol の実寸エミュで 360/390/1024/1200/1440 を目視、scrollWidth==innerWidth で横溢れゼロ。

---

8. 日本語コピーの平易化とローカライズ検証

タイポグラフィ(サイズ・折り返し・行間)を通しても、コピーの言葉選びと論理の運びが荒いと素人っぽさが残る。文章の平易さと、多言語化したときのレイアウト整合まで含めて品質ゲートに入れる。

8.1 日本語の正しさ・自然さだけを見る校正パス

• トーン/事実の敵対レビューとは別に、日本語の正しさだけを見る校正パスを 1 回通す。誇張形容詞や事実誤りを叩くレビューと、日本語として自然かを見るレビューは目的が違うので、後者を独立した 1 パスとして必ず実施する。
• ユーザーが実際に口にするカタカナ語を選ぶ。硬い漢語訳より、対象読者が日常で使う語を採る(例: 「端末」でなく「ターミナル」)。翻訳調・お堅い漢語・助詞の乱れ・二重敬語を潰す。
• 判定基準は「ネイティブが声に出して読んで自然か」。黙読で見逃す不自然さ(助詞の重複、体言止めの連続、翻訳直訳の語順)は音読で表面化する。

8.2 前から読める論理の運び(名詞句を動詞文に分解)

• 難解な名詞句・体言止めを動詞文に分解する。名詞を重ねた圧縮表現は読み手に行間補完を強いる。主語と述語のある文にほどく。
• 断定するなら理由を先に書く(理由 → 結論)。結論を先に置いて後から根拠を足す順序は、読み手にいったん保留と再解釈を強いる。定義・理由を先に置いてから主張・用語を出す。§5 の「用語の説明にカッコを使わない/後付けのカッコ説明も断定先行も同じ違反」と同一原則で、コピー全体の論理順序に広げたもの。
• 主張の強度を根拠の質で変える。実測値・公開された事実は断定してよい。一般化・見通し・展望は留保表現(〜と考えられます、〜する場合があります)にする。根拠の弱い主張を断定口調で書かない。
• 読み手に推論を強制しない。行間を読ませて意図を汲ませる書き方をやめ、一度読むだけで疑問が起きない順序と粒度で書く。

8.3 メタ言及で止めない(固有名と具体便益まで書く)

• 「スキルを使う」「仕組みで律する」のようなメタ言及で止めない。どの手段を使い、結果として具体的に何が良くなるか・何を防げるかを、固有名と具体便益まで書く。手段の抽象名だけを書いて読み手に効果の推測を委ねない。

8.4 規約・免責・法律系コピーも平易にする

• 規約・免責・ライセンス系のコピーも本文と同じ平易さで書く。法律・専門ジャーゴンを地の文にそのまま置かない(例: 「現状有姿」でなく「そのままの状態で」)。従属情報だからと難解さを許容しない。§5 の記号規律(※・* を注記に使わない)と併せ、規約セクションも視覚階層と平易な語で表す。

8.5 多言語化(i18n)後は相手言語でもレイアウトを実測する

• UI を多言語化したら、追加した言語でもレイアウトをヘッドレスで実測する。英語は文量・語幅が日本語と違うため、日本語向けに詰めた固定幅レイアウト(フッターのボタン列・バッジ・カード・グリッドセル)を英語テキストが溢れさせることがある。
• ja/en 両方で数値判定する。§6 の実寸エミュ手順で各言語をレンダし、見出し・ボタン等の要素で scrollWidth <= clientWidth、ページで document.documentElement.scrollWidth == innerWidth を両言語とも満たしてから「崩れない」と言う。片方の言語だけ確認して完了にしない。
• ユーザー由来のデータは翻訳対象から除外する。環境名・パス・コマンド・入力値など、ユーザーが作った文字列は i18n の翻訳対象に含めない(UI の固定ラベルだけを訳す)。翻訳ロジックがユーザーデータを書き換えないことを確認する。

8.6 出荷前チェックリスト追補

• 日本語の正しさだけを見る校正パスを 1 回通した(カタカナ語の選択・助詞・二重敬語・翻訳調、音読で確認)。
• 名詞句・体言止めを動詞文に分解し、理由 → 結論の順で書いた。断定は実測・公開事実のみ、一般化は留保表現。
• 手段のメタ言及で止めず、固有名と具体便益まで書いた。
• 規約・免責・法律系コピーに専門ジャーゴンを地の文で置いていない。
• 多言語化した場合、ja/en 両方で実寸エミュ(§6)を通し、scrollWidth <= clientWidth と scrollWidth == innerWidth を両言語で確認した。ユーザーデータは翻訳対象から除外されている。

参考(2026 サーベイ)

• caniuse: word-break: auto-phrase / text-wrap: balance(対応状況)
• MDN: line-break、Safari Technology Preview リリースノート(auto-phrase は Safari 安定版未対応の時期あり)
• BudouX(Google) — 文節改行ライブラリ
• yuheiy「日本語の text-wrap」、modularscale.com / type-scale.com(1.2 モジュラースケール)
• 実例: Apple JP / SmartHR / Notion JP(JP 本文 line-height 1.7〜1.8、ディスプレイ 1.3〜1.4、見出しジャンプは抑制、短文 2 行)