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年にこの出典を突き止めました。このテキストは1500年代から組版のプレースホルダーとして使われており、最初はAldus Manutiusの初期印刷機で、1960年代にはLetrasettのドライトランスファーシートで普及しました。現在も事実上の標準である理由は、意味のある英語による認知的な混乱なしに、文字と単語の長さが現実的に分布しているからです。

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

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

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

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

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

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

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

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

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

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

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

段落 vs 文 vs 単語

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

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

標準の「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();      // "jane.smith@example.net"
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イプサム文字列を貼り付けて、実際のコンテンツを統合する前にクランプの動作を確認します。

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

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

import requests

def generate_lorem(words=50):
    # Or use a library like lorem-text
    return " ".join(LOREM_WORDS[: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語です。より長いブロックが必要な場合、ほとんどのジェネレーターはより大きなラテン語脱ラテン化テキストのコーパスを循環します。

Loremイプサムを生成する

特定の数の単語、文、段落が必要ですか？ジェネレーターが即座に処理します — サインアップ不要、Wikipediaからコピー不要です。

Loremイプサムジェネレーターを開く → — 単語数または段落数を選択し、ワンクリックでコピー。