手軽屋
ツール一覧

日本語組版で見るダミーの「字面」

フォント、行間、約物、和欧混植:本番で破綻しないための確認術。

なぜダミーで字面を見るのか

Webデザインや印刷物のカンプで「テキストが入る場所だけ確保すればよい」と思われがちですが、日本語は文字の幅と高さが英文と大きく違います。漢字・かな・カタカナ・約物(句読点や括弧)が混在し、さらに英数字が紛れ込む「和欧混植」が普通に発生します。本番フォントで実際に流し込まないと、行頭・行末のはみ出し、行間の詰まり、約物のアキが想定どおりかが判断できません。

JIS X 4051 と W3C の日本語組版要件

日本語組版の正しい組み方は、日本工業規格 JIS X 4051「日本語文書の組版方法」に体系化されています。これは元々印刷業界の組版ルールをまとめたもので、行頭禁則(句読点や閉じ括弧を行頭に置かない)、行末禁則(開き括弧を行末に置かない)、追い込み・追い出しの優先順位、ルビの配置などが詳述されています。

W3Cはこれを国際標準のWeb組版に持ち込むため、Working Group Note として「Requirements for Japanese Text Layout(日本語組版処理の要件)」を整備しました。最新のブラウザのCSSはこの要件を踏まえて約物の半角化や行送りを処理していますが、フォントや CSS の設定によって挙動が変わります。

ダミー流し込みで見るべき6つのポイント

  1. 行頭禁則:「、」「。」「)」が行頭に来ていないか。来ていたらCSSの line-break: strict または word-break 系の設定を見直し。
  2. 行末禁則:「(」「「」が行末で孤立していないか。
  3. 行間:本文サイズの 1.6〜1.8 倍が日本語の標準。漢字が多い段落と、かなが多い段落で違和感がないか。
  4. 約物のアキ:「。 」のあとに余分なスペースが入っていないか。詰めすぎていないか。
  5. 和欧混植:本文に英単語やURLが混ざったとき、英字のサイズ・ベースラインが浮いて見えないか。
  6. 長音とハイフン:「サーバー」「データー」のような長音と、英文中のハイフン(-)の見分けがついているか。

本番フォントを使う重要性

「とりあえずシステムフォント」でカンプを作ると、納品時に 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. 本ツールは本文の文字数感を確認する用途のため、ルビ・縦書きは対応していません。専用のエディタでご確認ください。

続けて読む