| 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. 着手ゲート(毎回・例外なし)
日本語の見出し/本文/コピー/フォントサイズ/改行/行間に触れる前に:
- 本 SKILL.md を Read し、その編集に効く具体節を列挙して当てる(§5 だけ唱えて満足しない。§1 孤立・§3 サイズ・§4 スケール・§7 も該当すれば全部挙げる)。「一度読んだ」は次の編集の免罪符にならない。各編集ごとに引き直す。
- 変更後、ヘッドレスで desktop と真のモバイル幅を実レンダ(セクション 5)。
- 「直した/完了」と言う前に §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 {
word-break: auto-phrase;
line-break: strict;
overflow-wrap: anywhere;
font-feature-settings: "palt" 1;
}
- 確定的な改行は静的
<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 でカッコ乱用が再発したため明文化)。
- 短いコード名・ファイル名・形式の参照 (
crates/core / .dmg / CLAUDE.md 等。説明ではなく識別子)
- 初出の略語導入 (「Claude Desktop Switcher（以下 CSW）」の型)
- フォーム入力ラベルの必須・任意マーク (「アイコン（任意）」の型)
これ以外——補足・言い換え・対象読者・推奨・既定・例示・分類・条件・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. チェックリスト(出荷前)
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 出荷前チェックリスト追補
参考(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 行)
