Web便利ツール集

日本語ダミーテキストの作り方|Lorem Ipsumのまま使うと崩れる理由

ダミーテキストLorem IpsumモックアップWeb制作

Webサイトやアプリのモックアップを作るとき、"Lorem ipsum dolor sit amet..." という英語のダミーテキストを、そのまま日本語のデザインに流し込んでいませんか。結論として、英語のLorem Ipsumを日本語サイトの検証にそのまま使うのはおすすめできません。 見た目の好みの問題ではなく、日本語と英語では「改行のルール」と「1文字あたりの幅」がまったく違うため、本番のコンテンツを流し込んだ瞬間にレイアウトが崩れることがあるからです。この記事では、日本語ダミーテキストが必要な理由、無料で生成する具体的な方法、Lorem Ipsumを使ってよい場面との使い分け、公開前に見落としやすい注意点までまとめます。

なぜ英語のLorem Ipsumを日本語サイトに使うと崩れるのか

  • 改行ルールの違い:英語は単語の区切りで改行する(word wrap)のに対し、日本語は文字単位で改行し、句読点や括弧が行頭・行末に来ないようにする「禁則処理」に従います。英語のLorem Ipsumでは綺麗に収まっていたレイアウトも、日本語文章に差し替えると改行位置の想定がまったく変わります。
  • 文字幅の違い:日本語の文字(全角)は英数字(半角)のおよそ2倍の幅を持ちます。同じピクセル幅のカラムに収まる文字数が英語よりずっと少なくなるため、英語で3行に収まっていた文章が、日本語では5〜6行になることも珍しくありません。
  • 行間・字間の違い:日本語書体は行間(line-height)を広めに取らないと読みにくくなります。英語基準の行間設定のままだと、実際の日本語コンテンツでは窮屈に見えます。

これらの違いによって、「テキストがボタンからはみ出す」「見出しが2行に折り返り、カードの高さがそろわない」といった不具合が、英語のダミーテキストでの確認段階では気づけず、本番の日本語コンテンツを入れて初めて発覚する——というのが実務でよく起きる落とし穴です。デザインカンプの段階でこの検証をしておかないと、実装後の手戻りにつながります。

日本語ダミーテキストを無料で生成する方法

当サイトのダミーテキスト生成ツールでは、日本語とラテン語(Lorem Ipsum)を切り替えて、次の単位で好きな分量のダミーテキストを生成できます。

項目内容
言語日本語 / Latin(Lorem Ipsum)
単位段落 / 文 / 単語(日本語は1文字ずつ出力)
数量1〜50個まで指定可能
HTML出力段落単位で <p> タグに包んで出力可能
コピーボタン1つでクリップボードにコピー

使い方は次の手順です。

  1. 「日本語」タブを選ぶ
  2. 単位(段落・文・単語)を選ぶ
  3. 数量を入力する
  4. CMSやHTMLにそのまま貼りたい場合は「<p> タグで囲む」にチェックを入れる
  5. 「コピー」を押して、モックアップやCMSの本文欄に貼り付ける
私はその人を常に先生と呼んでいた。それは彼の生涯において最も重要な出来事であった。
朝の光が窓から差し込み、部屋全体を暖かく照らしていた。彼女は静かに本を閉じると、深いため息をついた。

生成される文章は、日常的な描写とWeb制作・ITに関する内容を組み合わせた、現代的な日本語の文です。ダミーテキストの中には著作権が切れた古い小説から文章を抜き出すタイプの生成方法もありますが、その場合は昔の言い回しが混ざり、クライアントへの提案時に「なぜ古めかしい文章が入っているのか」と説明が必要になることがあります。現代的な文体で統一されているほうが、モックアップとしての説明コストは低く済みます。

Lorem Ipsum(ラテン語)を使ってよい場面

日本語ダミーテキストが常に正解というわけではありません。使い分けの目安を整理します。

場面おすすめ理由
日本語サイトの本文・見出しの検証日本語ダミーテキスト改行位置と文字幅の違いを事前に確認できる
多言語対応サイトの英語版プレビューLorem Ipsum英語圏で長年使われてきた業界標準で、意味のない文字列だと誰の目にも明らか
言語未確定のワイヤーフレーム共有Lorem Ipsum特定の言語に依存しない中立的なプレースホルダーとして機能する
実際の文字数の当たりをつけたい場合日本語ダミーテキスト(本番想定の文字数で生成)文字幅が違うため、英語基準の文字数は参考にならない

文字数を本番のコンテンツに近づけるコツ

デザインの検証目的でダミーテキストを使うなら、「なんとなく埋まっていればいい」ではなく、実際に入る予定の文章量に近い文字数で生成することが重要です。目安が立てにくい場合は、次の手順が有効です。

  1. 過去に公開した似た内容のページを探す
  2. そのページの本文を文字数カウントツールで計測する
  3. 出てきた文字数(例:見出し15字・本文300字)に合わせて、ダミーテキストの数量を調整する

この手順を踏まずに「とりあえず段落3つ」で作ったモックアップは、本番のコンテンツを流し込んだときに文字数が想定より多く、レイアウトが崩れる原因になりがちです。文字数の数え方そのものについてはレポートの文字数の数え方でも解説していますが、スペースや句読点の扱いで数値がずれる点は、ダミーテキストの分量設計でも同じように注意しておく必要があります。

見落としがちな落とし穴:ダミーテキストの消し忘れ

意外と多いのが、モックアップ段階のダミーテキストをそのまま本番公開してしまう事故です。開発環境では気づいていても、コミット前の最終確認担当と、CMSの公開ボタンを押す担当者が別の体制になっていると、ダミーテキストが残ったまま検索エンジンにインデックスされてしまうことがあります。

  • 「Lorem ipsum dolor sit amet」のような文字列が本番ページに残っていると、閲覧者からの信頼を損なうだけでなく、検索エンジンにも内容のないページとして評価され、SEO上も不利に働きます。
  • 対策として、公開前に本文中の「Lorem ipsum」「ダミー」といった文字列が残っていないか、サイト内検索や全文検索で確認する運用を入れておくと安全です。
  • 特に、ダミーテキストを <p> タグに埋め込んだまま下書き保存し、後日別の担当者が中身を確認せずに公開してしまう、というケースで起きやすいため注意してください。

Figma・Word・Googleスライドへの貼り付け方

ダミーテキストは、コーディング前のデザインカンプやドキュメントの下書きでも使われます。ツールごとに使い方に少しコツがあります。

ツール使い方
Figma・XDなどのデザインツールテキストボックスに貼り付けた後、フォントを本番で使う予定の日本語書体に必ず変更する。 デフォルトフォントのままだと行間・字幅の見え方が実装時とずれる
Word・Googleドキュメント見出しスタイルを設定してから貼り付けると、実際のページ数・行数の見積もりに近づく
Googleスライド1スライドに入る文字量の上限確認に使う。フォントサイズを本番と揃えないと文字あふれの検証にならない

いずれのツールでも共通するのは、ダミーテキストだけを差し替えて、フォントやスタイルは本番設定のまま検証するという点です。フォントを仮のまま確認すると、文字幅や行間の違いを見落とし、後述する崩れの問題を防げません。

段落単位で生成するときに文の切れ目を意識する

本ツールで「段落」単位を選ぶと、複数の文をつなげて1つの段落を作ります。この際、次の点を意識すると、より実際のコンテンツに近い検証ができます。

  • 見出し直下の1段落目は短め(2〜3文程度)にすると、実際の導入文の長さに近づく
  • 箇条書きの直前に置く段落は、箇条書きへの導入として1文だけにすることが多いため、「文」単位で個別に生成して組み合わせる
  • カード型のUI(同じ形のボックスが並ぶデザイン)を検証する場合は、複数のカードで文字数を微妙に変えて生成し、あえて長さをそろえない。実際のコンテンツは長さがそろわないことが多く、最長のケースでレイアウトが崩れないかを確認できる

まとめ

  1. 英語のLorem Ipsumは、日本語の改行ルールや文字幅とは前提が異なるため、日本語サイトの検証にそのまま使わない
  2. 日本語ダミーテキストはダミーテキスト生成ツールで、段落・文・単語単位、HTML出力対応ですぐに作れる
  3. 多言語対応サイトの英語版やワイヤーフレームなど、言語非依存のプレースホルダーが欲しい場面ではLorem Ipsumも有効
  4. 文字数は「なんとなく」ではなく、文字数カウントツールで本番想定の分量に合わせて生成する
  5. 公開前に、ダミーテキストの消し忘れがないかを必ず確認する

この記事で使うツール

関連記事