MOJI DIRECTORY 文字選びの標本室

SKILL FOR AI

MIT License Open Source

ja-webtypo-skill

日本語Webタイポグラフィを整える、AI向けスキル

LP・コーポレート・SaaS・ECなど、日本語が使われるあらゆる制作で、見出し・本文・ボタン・カード・フォーム・表の改行と可読性を改善するための Claude Code 用スキルです。

GitHubで見る → ダウンロード方法へ

① こんな課題を解決します

  • ヒーローコピーが「新しい体験を、/ お届けします」のように変な位置で折り返される
  • ボタンの日本語が2行に割れる
  • カードタイトルが半端な場所で改行される
  • 「、」や「。」が行頭に来てしまう
  • スマホで価格表やフォームがはみ出す
  • 字間・行間が日本語に最適化されていない
  • 日本語フォントの bold 合成で文字が潰れる
  • 表のセルで1文字だけ次行に残る（「コー / ド」のような孤立）
  • ブラウザ互換を無視した最新CSSで一部環境が崩れる

② このスキルの特徴

日本語タイポの基本を網羅

フォントスタック、字間（letter-spacing）、行間（line-height）、約物詰め（palt）など、production-grade な日本語デフォルトを一括で適用できます。

CJK改行制御の判断ルール

line-break: strict / word-break: auto-phrase / text-wrap: balance / pretty をどこに使うか、エンジン差も含めた判断ルールで体系化。

BudouXで全ブラウザ対応（Tier 2）

CSSの word-break: auto-phrase はBlinkエンジン専用。ビルド時にBudouXで文節の切れ目に改行可能点を焼き込むTier 2を選べば、iPhone（WebKit）やFirefox（Gecko）でも文節単位で折り返せます。実行時JavaScriptはゼロ。

テーブルセルの4点契約

overflow-wrap: anywhere が継承されて孤立文字が出る問題を防ぐ、table-layout: fixed と colgroup、セル別オーバーライドの4点契約を実装例つきで解説。

ブラウザ互換性をエンジンで判断

auto-phrase は Blinkエンジン専用（iOSの全ブラウザはWebKit、FirefoxはGeckoで非対応）。ブラウザ名でなくエンジンで互換性を判断し、フォールバックの書き方も明示します。

レスポンシブ検証セット

360 / 390 / 768 / 1280px の最小確認セットと、中間幅（540 / 640 / 834 / 1100px）のドラッグ検証ポイントを提示。

Tailwind ユーティリティパターン

text-ja-heading / text-ja-button / text-ja-card-title / text-ja-table-cell など、役割で使い分けるユーティリティを @layer utilities 形式で提供。

③ このスキルを起動すると

いきなり全部を書き換えるのではなく、着手前に「どこまで適用するか」をあなたに確認します。

1. 範囲を質問（Step 0）

コードを触る前に、対応レベル（CSSのみ／＋BudouX）と、どの構造に適用するか（見出し・リード文・カード説明文・FAQ・本文・テーブルセル）をチェックリストで確認します。

2. 選んだ範囲だけ適用

合意した構造にだけ改行制御を適用。ナビやフッターのリンク折り返しなど、構造を変える修正は別途「変える／変えない」を確認します。

3. 適用結果を報告

どの構造に適用し、どれを意図的に外したかを構造別に報告。WebKit／Geckoで残る課題があれば、それも明示します。

④ BudouX を入れる / 入れない

このスキルは2段階で適用できます。CSSだけの「Tier 1」と、ビルド時に BudouX（Google製の文節分割エンジン）で改行候補 <wbr> を焼き込む「Tier 2」です。どちらまで入れるかは Step 0 で選びます。

Tier 1：CSSのみ（BudouXなし）

フォント・字間・行間・CSSの改行制御まで。メリットは依存ゼロ・導入が速い・ビルド変更なし。デメリットは、CSSの word-break: auto-phrase が Blinkエンジン専用で、iPhone（全ブラウザがWebKit）と Firefox では効かず、本文が「マインドフル／ネス」のように語の途中で折れること。

Tier 1 ＋ 2：BudouX 込み

上記に加え、ビルド時に文節境界へ <wbr> を挿入。メリットは iPhone・Firefox を含む全エンジンで文節単位の改行になること（実行時の JavaScript はゼロ）。デメリットはビルド時の依存が1つ増えること、HTMLに <wbr> が入ること、固有名詞はまれに誤区切りするので手動保護が要ること。

※ 下の Before / After デモと、この「文字選びの標本室」サイト自体が Tier 2（BudouX込み）で組まれています。

⑤ 想定ユースケース

シーン 具体例
LP / セールスページ ヒーローコピー、CTA、価格表
コーポレートサイト ナビ、部署名、ニュース一覧
メディア / ブログ 本文、引用、目次、リード文
SaaS / 管理画面 サイドバー、データテーブル、フォーム
ECサイト 商品カード、レビュー、絞り込みフィルタ
会員サイト マイページメニュー、お知らせ、申込フォーム
イベント / セミナーLP 概要、登壇者、申込ボタン
採用サイト 職種カード、社員インタビュー、選考フロー
ドキュメントサイト サイドバー、APIリファレンス

⑥ ダウンロード / インストール

SKILL.md を Claude Code のスキルとして読み込ませてください。配置場所は下の「対応ツール」を参照してください。

SKILL.md

SKILL.md（Claude Code 用）

frontmatter付きのスキル本体。Claude Code の skills ディレクトリにそのまま配置。

GitHubで開く

対応ツール

Claude Code

SKILL.md

frontmatter付きでそのまま使えます。~/.claude/skills/（全プロジェクト共通）または .claude/skills/（プロジェクト内）に配置すると呼び出せます。

⑦ こんな困りごとに対応します

日本語の改行や字組みを要素ごとに直していくのは手間がかかります。このスキルを入れておけば、一度頼むだけで、ページ全体の見出し・本文・ボタン・カードなどをまとめて整えてくれます。個別に細かく指定しなくても大丈夫です。下は対応できる困りごとの例です。

  • スマホで見出しが変なところで折り返してしまう
  • ボタンの日本語が2行になってしまう
  • 「、」や「。」が行のあたまに来て読みにくい
  • ページ全体の日本語が詰まって読みにくい
  • Tailwindで作ったページの日本語を、いい感じに整えたい
  • 表の中で文字が変な位置で切れてしまう
  • MacとWindowsで見た目が違うのを揃えたい
  • 新しいプロジェクトに、日本語向けの基本を仕込んでおきたい

※ ふだんの会話の中でこうした困りごとに気づくと自動で動きますが、曖昧な言い方だと反応しないこともあります。確実に使いたいときは「ja-webtypo-skill を使って」と名前を指定して呼び出してください。

⑧ 対象外の用途

このスキルは「日常的なWeb制作の日本語タイポ」に集中しています。次の用途には対応していません。

  • 「あ・A・1」のような文字だけを大きく並べるフォント見本ページの組版
  • 縦書きの本文レイアウト（小説サイトや書道作品など、右から左へ読むタイプ）
  • 紙に印刷するためのCSS（画面で見せるWebサイトには影響しません）
  • 漢字の上にふりがな（ルビ）を振るときの細かい挙動
  • 業種ごとに特化したレイアウト指針（医療表記の特殊ルール、ECの商品コードなど）

⑨ Before / After を並べて見る

架空のアプリ「Zenith」のランディングページに、このスキルを適用した前と後を並べました。中身のコピーは同じで、変えたのは「日本語の改行と字組み」だけです。PC幅では両方の iframe を同時スクロールします。

※ このサンプル LP は Google の Antigravity におまかせで生成した架空サイトです。実在のサービスではありません。

BEFORE

スキル適用前

AFTER

スキル適用後

Before を新しいタブで開く ↗ After を新しいタブで開く ↗

スキルで当てた7つの変更

01

ヒーローの <br> を撤去

ヒーロー見出し・説明文に手動の改行タグを多用していたのを撤去。span に分けて display: block の line-break 制御に置き換え。

02

本文の英単語を lang="en" で囲む

「ToDo」「App Store」「Google Play」「Zenith」など本文中の英単語に lang="en" を指定。hyphens: auto が効くようになる。

03

body baseline を日本語向けに

font-feature-settings: palt（約物詰め）、letter-spacing: 0.02em、line-height: 1.75、line-break: strict、word-break: auto-phrase、overflow-wrap: anywhere を追加。

04

フォントスタックの fallback 拡張

Noto Sans JP のみだった指定に、Hiragino Sans / Yu Gothic / Meiryo / system-ui を追加。Webフォント読み込み前も日本語が崩れにくく。

05

見出し・本文・カードに wrap 制御

h1-h3 に text-wrap: balance、本文・カード本文に text-wrap: pretty、ボタンに white-space: nowrap など、要素ごとに役割を分けた wrap 設定。

06

比較テーブルの 4点契約

table-layout: fixed + <colgroup> 列幅指定 + cell の overflow-wrap: normal。長いヘッダは nowrap ではなく auto-phrase で wrap させる方針に。

07

BudouX で文節改行を焼き込み

ビルド時に BudouX で文節境界へ <wbr> を挿入。CSSの word-break: auto-phrase は Blink エンジン専用なので、これで iPhone（WebKit）や Firefox（Gecko）でも語の途中で折れなくなる。