ダミーテキスト活用ガイド：Lorem IpsumとUI開発での使い方

ダミーテキストとは、デザインやレイアウトの確認を目的として使われる意味を持たない仮の文章です。 Webサイト・アプリのUI設計段階では、実際のコンテンツが用意されていないことが多く、 テキストが入る箇所に何らかの文章を当て込んでレイアウトや可読性を検証する必要があります。 そのためのプレースホルダーとして使われるのがダミーテキストです。

ダミーテキストの重要な性質は「内容が目に入りにくいこと」です。 意味のある文章を使うと、閲覧者は内容を読もうとしてしまい、 デザイン・レイアウト自体の評価が妨げられます。 意味を持たない文字列であれば、純粋に視覚的な要素（フォントサイズ・行間・余白など）に 集中してフィードバックできます。

このサイトの Dummy Text Generator では、 日本語・英語の両方で、段落数と1段落あたりの文字数を指定してダミーテキストを生成できます。

英語のダミーテキストといえば「Lorem ipsum dolor sit amet...」で始まる文章が世界標準として使われています。 この文章は紀元前45年頃に書かれたキケロのラテン語の著作 「De finibus bonorum et malorum（善と悪の究極について）」を 意図的に読みにくく改変したものです。

活版印刷が普及した15世紀以降、印刷業者がフォントや組版のサンプルを作るために使い始め、 20世紀にはLetrasetのドライトランスファーシートに採用されてデザイン業界に広まりました。 1984年にAdobe PageMakerがデフォルトのダミーテキストとして組み込んだことで、 デジタルデザインツールでも標準的な存在となっています。

現代では lorem と入力すると自動補完してくれるエディタ拡張機能（Emmet）や、 各種CMSのデモコンテンツでも広く使われています。 「ロレム・イプサム」「Lorem」と呼ばれることも多く、 デザイナー・エンジニア共通の言語として定着しています。

日本語のWebサイトやアプリを開発する際に英語（Lorem ipsum）をダミーとして使うと、 いくつかの問題が発生します。

• 文字幅の違い： 日本語（全角文字）と英語（半角文字）では文字の幅が異なります。 日本語では1文字が英語の約2倍の幅を占めるため、 同じ文字数でも行の折り返し位置やテキストエリアの広がり方が大きく変わります。 英語のダミーでレイアウトを調整しても、日本語コンテンツに差し替えると崩れることがあります。
• フォントのレンダリング： 日本語フォント（Noto Sans JP、ヒラギノなど）は英語フォントと異なるカーニングや 行間の特性を持ちます。日本語ダミーを使うことで、 実際のコンテンツに近いフォントレンダリングの状態でデザインを確認できます。
• ステークホルダーへのプレゼン： クライアントや非エンジニアのメンバーに対してプロトタイプを見せる際、 英語のダミーが入っていると違和感を持たれることがあります。 日本語ダミーを使うと完成形に近い印象でフィードバックを得やすくなります。

• デザインカンプ・モックアップ： Figmaなどのデザインツールで画面を作成する際、 記事タイトルには20〜30文字、本文には100〜200文字程度のダミーテキストを使うのが一般的です。 タイトルが長くなったとき・短くなったときのレイアウト崩れも確認しておくと良いでしょう。
• コンポーネント開発（Storybook等）： Reactコンポーネントの動作確認用ストーリーを書く際、 CardコンポーネントやListItemコンポーネントに流し込む文章として使います。 文字数が多いケース・少ないケースの両方でテストすると、 テキスト overflow の処理漏れを早期に発見できます。
• E2Eテスト・スクリーンショットテスト： フォームへの入力値やAPIのレスポンスのモックとして日本語ダミーテキストを使うと、 テスト結果のスクリーンショットが実際の使用に近い状態で記録されます。
• データベースのシードデータ： 開発環境のデータベースに大量のテストデータを投入する際、 記事本文や商品説明などのテキストフィールドにダミーテキストを使います。 ランダム性を持たせた文字数指定で、実際の使用を模したデータを生成できます。

ダミーテキストの量は、確認したいUIの種類によって変えると効果的です。 以下は目安です。

• 見出し・タイトル：15〜40文字。 短い見出しと長い見出しの両方でレイアウトを確認します。 特に長い見出しが2行に折り返したときのデザインは忘れがちです。
• カードコンポーネントの概要文：50〜100文字。 一定の文字数で切り捨てる（truncate）処理がある場合は、 その閾値を超える文字数で確認します。
• 記事本文・説明文：200〜500文字（1〜3段落）。 行間・段落間のマージン、長文での可読性を確認します。
• フォームのtextarea：100〜300文字。 スクロールが発生するタイミング、resizeの動作を確認します。

Dummy Text Generator では 段落数と1段落あたりの文字数を個別に指定できます。 目的に応じて調整してください。

用途によっては、意味のあるコンテンツをプレースホルダーとして使う方が効果的な場合もあります。

• コンテンツファーストデザイン： 実際のコンテンツが決まっている場合は、早い段階で本番コンテンツを使ってデザインします。 ダミーテキストに合わせてデザインを作ると、 実際の文章の長さ・語感と合わない問題が後で発覚することがあります。
• プレースホルダー属性： フォームのinput要素では placeholder 属性を使うことで、 入力前のヒントをUIに組み込む方法もあります。 ただしプレースホルダーはアクセシビリティ上の注意点（コントラスト不足・消えてしまう）があるため、 ラベルの代替として使うのは避けましょう。
• Faker.jsなどのライブラリ： 大量のテストデータを自動生成する場合は、@faker-js/faker ライブラリを使うと人名・住所・メールアドレスなど カテゴリ別のリアルなダミーデータを日本語で生成できます。 シードデータ生成スクリプトと組み合わせて使うと効果的です。