なぜダミーで字面を見るのか
Webデザインや印刷物のカンプで「テキストが入る場所だけ確保すればよい」と思われがちですが、日本語は文字の幅と高さが英文と大きく違います。漢字・かな・カタカナ・約物(句読点や括弧)が混在し、さらに英数字が紛れ込む「和欧混植」が普通に発生します。本番フォントで実際に流し込まないと、行頭・行末のはみ出し、行間の詰まり、約物のアキが想定どおりかが判断できません。
JIS X 4051 と W3C の日本語組版要件
日本語組版の正しい組み方は、日本工業規格 JIS X 4051「日本語文書の組版方法」に体系化されています。これは元々印刷業界の組版ルールをまとめたもので、行頭禁則(句読点や閉じ括弧を行頭に置かない)、行末禁則(開き括弧を行末に置かない)、追い込み・追い出しの優先順位、ルビの配置などが詳述されています。
W3Cはこれを国際標準のWeb組版に持ち込むため、Working Group Note として「Requirements for Japanese Text Layout(日本語組版処理の要件)」を整備しました。最新のブラウザのCSSはこの要件を踏まえて約物の半角化や行送りを処理していますが、フォントや CSS の設定によって挙動が変わります。
ダミー流し込みで見るべき6つのポイント
- 行頭禁則:「、」「。」「)」が行頭に来ていないか。来ていたらCSSの
line-break: strictまたはword-break系の設定を見直し。 - 行末禁則:「(」「「」が行末で孤立していないか。
- 行間:本文サイズの 1.6〜1.8 倍が日本語の標準。漢字が多い段落と、かなが多い段落で違和感がないか。
- 約物のアキ:「。 」のあとに余分なスペースが入っていないか。詰めすぎていないか。
- 和欧混植:本文に英単語やURLが混ざったとき、英字のサイズ・ベースラインが浮いて見えないか。
- 長音とハイフン:「サーバー」「データー」のような長音と、英文中のハイフン(-)の見分けがついているか。
本番フォントを使う重要性
「とりあえずシステムフォント」でカンプを作ると、納品時に Noto Sans JP や ヒラギノ角ゴ、游ゴシックなどに差し替えた瞬間、行数も改行位置も変わります。ダミーは必ず本番フォントで流し込むのが鉄則です。
無償で配布されている日本語フォントとしては、独立行政法人 情報処理推進機構(IPA)が開発し、現在は一般社団法人 文字情報技術促進協議会が管理する IPAex フォントが、JIS第一・第二水準を網羅し、商用利用も認められた標準的な選択肢として知られています。Webフォントで Google Fonts の Noto Sans JP / Noto Serif JP を使うのも、字種カバレッジの点で安全です。
CSSで日本語組版を整える
| 目的 | CSS |
|---|---|
| 行間を日本語向けに広げる | line-height: 1.7; |
| 禁則処理を厳格にする | line-break: strict; |
| 和欧混植のベースライン調整 | font-feature-settings: "palt"; |
| 単語の途中改行を防ぐ | overflow-wrap: anywhere; |
| 行頭・行末の禁則をブラウザに任せる | word-break: normal; |
よくある質問
Q. なぜLorem ipsumでは日本語の確認ができないのですか?
A. Lorem ipsumは英字のみで、漢字・かなのウェイトや約物のアキを再現しません。日本語の組みを確認するには日本語のダミーテキストが必要です。
Q. 「明朝とゴシックでどちらでダミーを見るべき?」
A. 本番で使う側で確認します。本文ゴシック・見出し明朝のように混在するなら、両方のブロックを用意して見比べると安全です。
Q. ルビや縦書きはこのツールで確認できますか?
A. 本ツールは本文の文字数感を確認する用途のため、ルビ・縦書きは対応していません。専用のエディタでご確認ください。