UIを構築する際、最初から実際のコンテンツを書くのは時間の無駄であり、レイアウトの判断を妨げます。Loremイプサムプレースホルダーテキストを使えば、最終的にコンテンツが入るスペースを埋めながら、デザインとコードに集中できます。このガイドでは、Loremイプサムの実態・使うべき場面・必要なテキストを正確に生成する方法を解説します。

Loremイプサムテキストを生成する →

Loremイプサムとは

Loremイプサムは、キケロの著作『善と悪の究極について（De Finibus Bonorum et Malorum）』（紀元前45年）から取り出したスクランブルテキストです。標準テキストはこう始まります：

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

出典を突き止めたのは、米バージニア州ハムデン・シドニー大学のラテン語教授 Richard McClintock とされ、その経緯は1994年に『Before & After』誌に掲載されました。「1500年代から印刷業者が使っていた」という説はよく引用されますが、裏付けとなる当時の印刷物は残っていません。確実に記録が残る最初の使用例は、1960年代の Letraset のドライトランスファーシートです。現在も事実上の標準である理由は、意味のある英語による認知的な混乱なしに、文字と単語の長さが現実的に分布しているからです。

なぜプレースホルダーテキストを使うのか

開発の初期段階に実際のコンテンツを使うといくつかの問題が生じます：

認知的な混乱： プレースホルダーテキストが意味のある文章を形成すると、レビュアーはレイアウトではなく言葉に注目してしまいます。開発者が書いた「プレースホルダー」コンテンツには微妙な編集上の判断が含まれ、レビューサイクルを無駄にします。

スコープクリープ： 実際のコンテンツは依存関係を生みます。UIコンポーネントに「実際のマーケティングコピー」が必要な場合、コンテンツチームのタイムラインにUI作業がブロックされます。

不均一な分布： 実際のコンテンツが均等に分布することはほとんどありません。プレースホルダーテキストは予測可能にスペースを埋め、レイアウトの問題を早期に明らかにします。

法的リスク： 実際のテキスト（競合他社、パブリックドメインの作品、Wikipedia）をコピーすると、社内モックアップに著作権や帰属に関する懸念が生じる可能性があります。

Loremイプサムを使わないべき場面

Loremイプサムは構造的なデザイン作業には適していますが、特定の段階では逆効果になります：

  • ユーザビリティテスト： 参加者はLoremイプサムと実際のコンテンツを異なる方法で読みます。読解を伴うテストには現実的なプレースホルダーコンテンツを使用してください。
  • コンテンツドリブンのレイアウト： コンテンツの長さが構造を決定するレイアウト（データテーブル、カードグリッド）には代表的な実際のデータを使用してください。
  • アクセシビリティレビュー： スクリーンリーダーのテストには実際のまたは現実的なテキストを使用してください。
  • ステークホルダーへのプレゼンテーション： Loremイプサムを読む意思決定者はコンテンツが未完成だと判断して承認しないことがあります。

カスタムLoremイプサムの生成

標準のLoremイプサムの段落は約69語です。ほとんどのケースではより細かいコントロールが必要です：

段落 vs 文 vs 単語

  • 段落： 複数カラムのレイアウト、本文ブロック、カードの説明文に最適。数文からなる段落で、現実的な文章の密度を再現できます（ZeroTool のジェネレーターは1段落3〜6文）。
  • 文： リストアイテム、テーブルセル、ツールチップのコピー、短い説明文に適しています。
  • 単語： 正確な文字数が決まっているラベル、ボタンのコピー、バッジテキスト、ナビゲーション項目に最適です。

テキストの開始バリエーション

標準の「Lorem ipsum dolor sit amet…」という書き出しは認識しやすく、チーム全員に「これはプレースホルダー」というシグナルを送ります。ただし、ツールやデザインシステムがクライアントの目に触れるLoremイプサムを挿入している場合、コーパスの別の箇所から生成して最初の行を避けることを検討してください。

HTML vs プレーンテキスト

Web開発では、<p> タグでラップされたLoremイプサムを生成する方が生テキストよりも使いやすいです。HTMLテンプレートやコンポーネントプレビューにそのまま貼り付けられます。

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Loremイプサムの代替手段

コンテキストによっては、他のプレースホルダー戦略の方が適している場合があります：

リアルな偽データ

名前、住所、メールアドレス、日付、その他の構造化コンテンツには、Loremイプサムは機能しません。Faker.js などのライブラリは文脈に適したプレースホルダーを生成します：

import { faker } from '@faker-js/faker';

faker.person.fullName();     // "Jane Smith"
faker.internet.email();      // "[email protected]"
faker.date.recent();         // 2024-03-15T09:23:41.000Z
faker.commerce.productName(); // "Ergonomic Rubber Chair"

テーマ別ジェネレーター

チームがLoremイプサムに飽きた場合や、もう少し読みやすいプレースホルダーテキストが欲しい場合、テーマ別ジェネレーターが役立ちます（カップケーキイプサム、ヒップスターイプサム、企業イプサム、海賊イプサムなど）。デザインレビューの雰囲気を和らげる効果もあります。

繰り返しの短いフレーズ

予測可能な長さが必要な非常に短いラベルやタグ：

Short label
A slightly longer label
The longest label variant

これはコンテンツ構造についてLoremイプサムより正直です。

一般的な開発での使用例

Reactコンポーネント開発

const PLACEHOLDER_PARAGRAPHS = [
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  "Ut enim ad minim veniam, quis nostrud exercitation ullamco.",
  "Duis aute irure dolor in reprehenderit in voluptate velit.",
];

function ArticlePreview() {
  return (
    <article>
      <h2>Placeholder Title</h2>
      {PLACEHOLDER_PARAGRAPHS.map((p, i) => (
        <p key={i}>{p}</p>
      ))}
    </article>
  );
}

CSSテスト

Loremイプサムはテキストの長さに依存するCSSプロパティをテストするのに理想的です：

.card-description {
  /* Does this truncate correctly at 3 lines? */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

50語のLoremイプサム文字列を貼り付けて、実際のコンテンツを統合する前にクランプの動作を確認します。

データベースシーディング

現実的に見えるテキストで開発データベースをシーディングするために：

LOREM_WORDS = "Lorem ipsum dolor sit amet consectetur adipiscing elit".split()

def generate_lorem(words=50):
    return " ".join((LOREM_WORDS * (words // len(LOREM_WORDS) + 1))[:words])

posts = [
    {"title": f"Post {i}", "body": generate_lorem(100)}
    for i in range(100)
]
db.bulk_insert(posts)

標準Loremイプサムテキスト

ほとんどのジェネレーターが参照する完全な標準Loremイプサムテキスト：

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
mollit anim id est laborum.

69語です。より長いブロックが必要な場合、ジェネレーターはラテン語風の文を追加します。ZeroTool のジェネレーターは20個の文をシャッフルして段落を作ります。

Loremイプサムを生成する

1〜20段落のプレースホルダーテキストが必要ですか？ジェネレーターがブラウザ内ですぐに作成します。サインアップは不要です。

Loremイプサムジェネレーターを開く → — 1〜20段落を選び、必要なら定番の書き出しで始めて、ワンクリックでコピー。