ja-webtypo-skill | スキル | 文字選びの標本室

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

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

② このスキルの特徴

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

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

CJK改行制御の判断ルール

line-break: strict / word-break: auto-phrase / text-wrap: balance / text-wrap: pretty をどこに使うか、判断ルールを11項目で整理。

テーブルセルの4点契約

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

ブラウザ互換性表つき

auto-phrase は Chrome 119+ / Edge 119+ など、フォールバック必須の項目を明示。古い環境でも崩れない書き方を提示します。

レスポンシブ検証セット

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 形式で提供。

③ 想定ユースケース

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

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

利用しているAIアシスタントに合わせて、次のファイルを読み込ませてください。設定方法の詳細は各ツールの公式ドキュメントを参照してください。

SKILL.md

SKILL.md（Claude Code 用）

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

ダウンロード ↓ GitHubで開く

prompt.md

prompt.md（他ツール用プロンプト）

Cursor / ChatGPT / Codex CLI / Gemini など、他のAIツール向けに整形したプロンプト版。

ダウンロード ↓ GitHubで開く

対応ツール

Claude Code

SKILL.md

frontmatter付きでそのまま使えます。~/.claude/skills/ や .claude/skills/ 配下に配置するとプロジェクト全体で呼び出せます。

Cursor / Codex CLI

prompt.md

プロジェクトルールやカスタム指示として、ファイル内容を貼り付け。Cursor は .cursor/rules/ 配下に置く方法も使えます。

GitHub Copilot / Claude.ai / ChatGPT / Gemini

prompt.md

カスタム指示・システムプロンプト・Project Instructionsなどに、ファイル内容をそのまま貼り付けて利用します。

⑤ 使い方の例

スキルを設定したあと、AIに次のような言葉で依頼すると、上記ルールに沿った提案や実装が返ってきます。

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

⑥ 対象外の用途

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

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

⑦ Before / After を並べて見る

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

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

BEFORE

スキル適用前

AFTER

スキル適用後

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

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

ヒーローの <br> を撤去

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

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

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

body baseline を日本語向けに

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

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

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

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

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

比較テーブルの 4点契約

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