特定の枠幅でテキストがどのように改行されるか、禁則処理が正しく行われるかをプレビューします。 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プロパティを選択してください。
文字組みの品質を高める日本語組版の応用設計とマルチデバイス対応
シミュレーション結果を実際のプロダクトへ組み込むために必要な、各メディア独自の文字送り仕様やマークアップ設計による最適化ノウハウを解説します。
プロポーショナルメトリクスとカーニングによる改行位置の変動対策
WebやDTPでフォントのペアカーニングやOpenType機能のpalt（プロポーショナルメトリクス）を有効化すると、文字幅が詰まるため本ツールの等幅シミュレーションよりも改行位置が後ろにズレる傾向があります。
特に括弧類や句読点が連続するテキストでは、詰め組みによって1行あたり1文字から2文字分の余白が生まれるため、実装時は文字詰めによる全幅の減少を計算に入れた矩形幅の設計が必要です。
レスポンシブWebデザインにおけるコンテナ幅とフォントサイズのマージン設計
スマートフォンの画面幅は320pxから430pxまで端末ごとに多様化しており、固定値での文字組み制御は不可能です。
デバイス幅に応じた改行位置の破綻を防ぐには、CSSのビューポート単位であるsvwやvwを用いてコンテナ幅とフォントサイズを比例縮小させるか、flexboxやCSS Gridの余白にバッファを持たせて禁則処理による文字の追い出しが起きてもレイアウトが崩れないコンテナの伸縮性を確保してください。
商用印刷メディアへの流し込みで発生するジャスティフィケーションと行長調整
パンフレットや書籍の編集では、行末を綺麗に揃える均等配置（ジャスティフィケーション）が基本となります。
禁則処理によって文字が次の行へ追い出された場合、その行の文字間隔（字間）が自動で微調整されますが、1行の文字数が少ないと極端に字間が開いて間伸びするため、美観を保つためには1行あたり最低25文字以上の行長を確保するようテキストフレーム幅を調整するのが組版実務の定石です。
主要OSにおける内蔵フォントのレンダリング差異に伴う挙動管理
Webサイト上で表示される文字組みは、閲覧者の端末に搭載されているフォント（Windowsの游ゴシックやMSゴシック、macOS・iOSのヒラギノ角ゴなど）によって文字の輪郭や仮想ボディのサイズが微妙に異なります。
この環境依存による改行位置のズレを最小化するためには、CSSのfont-familyで総称フォントファミリーであるsans-serifやserifを適切に指定しつつ、システムフォントの優先順位をMac、Windowsの順で厳密に定義してください。
よくある失敗と対策
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. 日本語の組版において、行頭に句読点や閉じ括弧が来たり、行末に開き括弧が来ることを防ぐルールです。本ツールではJIS規格に基づいた一般的なルールをシミュレートできます。
Q.縦書きのプレビューは可能ですか？
A. はい。設定パネルから縦組みを選択することで、日本語特有の縦書きレイアウトでの改行位置を確認できます。
Q.フォントによって改行位置は変わりますか？
A. はい。明朝体とゴシック体で文字幅が異なるため、それぞれの書体に合わせて正確にシミュレートします。
Q.ツールに入力したテキストデータが外部に送信されたり漏洩したりする心配はありますか？
A. いいえ、ありません。本ツールは完全ローカル処理型の安全設計です。入力されたテキストや設定データはサーバーへ一切送信されず、データベースへの保存も行われません。すべてのシミュレーション処理はユーザーのブラウザ内だけで完結し、ページを閉じれば即座にデータは完全消去されます。
Q.スマートフォンの画面サイズでの表示崩れも確認できますか？
A. はい、確認できます。本ツールにはコンテナ幅を調整するスライダーが搭載されているため、一般的なスマートフォンの画面幅に設定を合わせることで、狭い表示領域における句読点や括弧の改行挙動をリアルタイムに検証できます。
Q.字間や行間の数値を変更したシミュレーションにも対応していますか？
A. はい、対応しています。設定項目にある字間や行間のメニューを調整することで、単なる文字数のカウントだけでなく、実際のレイアウト設計やDTPの流し込み環境に近い文字の密度を再現して改行位置を確かめることができます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。