特定の枠幅でテキストがどのように改行されるか、禁則処理が正しく行われるかをプレビューします。 DTPの流し込み確認や、スマートフォンのWebデザインにおける文字の挙動チェックに最適です。
禁則処理・流し込みチェッカーとは？
本ツールは、日本語デザインにおいて避けては通れない「禁則処理」を、ブラウザ上で直感的にシミュレートするためのツールです。 JIS X 4051で定められた行頭・行末禁則ルールに基づき、任意のコンテナ幅やフォントサイズで「どこで改行が発生するか」を可視化します。 また、現代のWebデザインで必須となる縦書き（縦組み）のシミュレーションにも対応しています。
こんなシーンで便利です
Webデザイン・実装の検証
スマホ表示のような狭い幅で、句読点が行頭に来てしまわないかを確認。CSSの「word-break」や「overflow-wrap」の挙動を予測し、最適なデザインを検討できます。
DTP・印刷物のラフ制作
IllustratorやInDesignにテキストを流し込む前に、指定のフォントサイズと幅で何行程度に収まるかの目安（ボリューム感）を把握するのに役立ちます。
キャッチコピーの推敲
バナーやメインビジュアルなど、特定の矩形内に文字を配置する際、最も美しく読みやすい改行位置を探ることができます。
縦書きコンテンツの調整
日本語特有の縦書きレイアウトにおいて、括弧の向きや改行位置が視認性に与える影響をリアルタイムでプレビューできます。
使い方は簡単 4ステップ
- 「テキストデータ」エリアにシミュレーションしたい文章を入力します。
- 「コンテナ幅」スライダーを調整し、表示領域のサイズを指定します。
- フォントサイズや字間、行間を設定してデザインの条件を合わせます。
- 「禁則処理」のスイッチを切り替え、ルールの有無による改行の違いを比較します。
※プレビュー画面中央の点線は「テキストフレーム」を模しており、DTPソフトに近い感覚で確認が可能です。
ご利用時の注意点
- フォントの再現性：お使いのブラウザにインストールされている標準フォントを使用して計算します。OSや環境により微細なズレが生じる場合があります。
- 禁則文字の範囲：本ツールでは一般的とされるJIS X 4051準拠の文字リストを使用していますが、媒体独自のルールには対応していない場合があります。
- ブラウザの挙動：実際のWebサイトでの表示は、ブラウザのレンダリングエンジン（Blink, WebKit等）の仕様に依存します。
日本語の禁則処理ルール一覧（JIS X 4051準拠）
一般的な日本語組版において、行頭・行末に配置してはいけないとされる「禁則文字」の定義です。
| 禁則の種類 | 対象となる主な文字 | 流し込み時の挙動 |
|---|---|---|
| 行頭禁則 | ）、〕、］、｝、〉、》、」、』、】、々、ゝ、ヽ、。、、 | これらの文字が行頭（行の左端）に来る場合、前の行に「追い込み」ます。 |
| 行末禁則 | （、〔、［、｛、〈、《、「、『、【 | これらの文字が行末（行の右端）に来る場合、次の行へ「追い出し」ます。 |
| 分離禁止 | ―（ダッシュ）、…（リーダー）、数字 | 2つ以上連続する文字や数字を分割せず、ひと塊として扱います。 |
| 拗音・促音 | ぁ、ぃ、ぅ、ぇ、ぉ、っ、ゃ、ゅ、ょ | 基本は行頭禁則ではありませんが、読みやすさのために行頭を避ける「緩い禁則」として扱われることがあります。 |
| 自立語・改行 | 任意のテキスト | 文脈を維持するため、単語の途中で改行させない処理（CSSのword-break: keep-all等）を検討する目安になります。 |
【禁則処理の目的と重要性】
禁則処理は、日本語の文章を美しく、そして読みやすくするための組版ルールです。特にWebデザインやDTPにおいては、「句読点が行頭に来る（行頭禁則）」や「開き括弧が行末に残る（行末禁則）」を防ぐことで、読者の視線移動をスムーズにし、情報の信頼性を高める効果があります。
【CSSでの実装ヒント】
Webサイト制作では、CSSの line-break: strict; や overflow-wrap: anywhere; を使い分けることで、ブラウザ上の流し込み制御が可能です。本ツールでのシミュレーション結果を元に、最適なCSSプロパティを選択してください。
よくある失敗と対策
CSSのline-breakやword-breakの設定漏れで、スマートフォン表示時に句読点が行頭に並ぶ
レスポンシブWebデザインのコーディング時に、日本語特有の禁則処理（line-break: strict;など）の指定を失念し、画面幅の狭いスマホ表示において「、」や「。」が行頭（行の左端）に配置され、サイトの視認性と美観が著しく損なわれる失敗です。
💡 対策・解決策を見る▼
DTPソフトへの流し込みで「追い込み・追い出し」の計算を誤り、全体のページ数や行数がズレる
IllustratorやInDesignでパンフレットや雑誌のレイアウトを行う際、禁則ルール（JIS X 4051準拠）による文字の「追い込み」や「追い出し」の行数変動を予測せず、原稿テキストをただ文字数だけで計算して流し込み、最終的な全体のボリューム（総行数）が合わなくなる失敗です。
💡 対策・解決策を見る▼
縦書き（縦組み）デザインで、括弧や記号が横向きのまま流し込まれ文字組版が崩れる
Webサイトの縦書きレイアウト（writing-mode: vertical-rl;）やDTPの縦組みにおいて、全角括弧「」や句読点、三点リーダー「…」などの向きや、数字の縦中横（たてちゅうよこ）の挙動を確認せずに文字を流し込み、フォントのレンダリングが崩れて不自然な改行・表示になる失敗です。
💡 対策・解決策を見る▼
単語の途中で不自然な改行が発生し、キャッチコピーやバナーの文字組みの可読性が著しく低下する
バナー広告やメインビジュアル、LP（ランディングページ）のキャッチコピーにおいて、「word-break: break-all;」などの設定により、自立語（名詞や動詞）の文字の途中で不自然に改行されてしまい、ユーザーの可読性や文章のインパクトを大きく落としてしまう失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.「追い込み」と「追い出し」の両方に対応していますか？
A. はい。ロジック上、行頭禁則に対しては現在の行に収める「追い込み」、行末禁則に対しては次の行へ送る「追い出し」に近い挙動を再現しています。
Q.字送りの単位は何ですか？
A. Webの実装で使いやすい「px」単位で調整可能です。1文字ごとの間隔を細かく制御して、視認性を確認できます。
Q.商用利用は可能ですか？
A. はい、本ツールおよび生成されたシミュレーション結果は、業務や商用デザインの検証に自由にご活用いただけます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。