lorem-ipsum placeholder-text design ui-ux generator

プレースホルダーテキストの技術:デザイナーのための効率的なLorem Ipsum生成

UIデザインやプロトタイプ用にプロフェッショナルなプレースホルダーテキストを生成。段落、文、単語を即座にカスタマイズできます。

はじめに:Lorem Ipsum とは何か?

すべてのデザイナー、開発者、タイポグラファーが必ず一度は目にするもの——それがテンプレートやワイヤーフレーム、空白の段組みを埋めるあの「ラテン語風」テキストです。Lorem ipsum dolor sit amet, consectetur adipiscing elit... デザインモックアップのいたるところで見かけますが、毎日使っている人でもその由来や目的を知らないケースがほとんどです。

Lorem ipsum はプレースホルダーテキスト——実際のコンテンツがまだ用意できていない段階で、デザインレイアウトの空きスペースを埋めるダミーテキストです。ラテン語のように見え、意味をなさないにもかかわらず、500年以上にわたって業界標準として使われ続けてきました。その歴史、仕組み、ベストプラクティスを深く理解することは、より優れた、より見識あるデザイナーになることにつながります。

本記事では、Lorem Ipsum を包括的に解説します——起源、生成器の仕組み、使用するタイミング、そして実際のコンテンツの方が適切な場面まで。


2000年の歴史

キケロと『善と悪の究極について』(紀元前45年)

Lorem ipsum の物語は印刷工房ではなく、古代ローマから始まります。紀元前45年、ローマの哲学者・政治家マルクス・トゥッリウス・キケロ(Marcus Tullius Cicero)は、エピクロス派とストア派の倫理学を探求する哲学論文『De Finibus Bonorum et Malorum』(「善と悪の究極について」)を著しました。人間の生における最高の善と悪とは何かを論じた学術的な作品です。

同書の第1.10.32節と第1.10.33節に、Lorem Ipsum の原典となる文章が含まれています。キケロはその中でこう記しています:

"Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." (「苦痛そのものが苦痛であるがゆえに、苦痛を愛し、追い求め、得ようとする者は誰もいない。しかし時として、苦労と苦痛が大きな喜びをもたらす状況があるのだ。」)

この文章は快楽と苦痛の本質についての考察——苦痛それ自体のために苦痛を求める人はいないというテーゼです。後にこの文章がプレースホルダーテキストに転用されるため、哲学的な意味合いは取り除かれ、文字の視覚的リズムだけが残ることになりました。

15世紀の印刷革命

時は15世紀。ヴェネツィアの印刷業者アルドゥス・マヌティウス(Aldus Manutius)と当時の植字工たちは、実際のコンテンツなしに書体やページレイアウトを見せる方法を必要としていました。彼らはキケロの文章を意図的に並び替えて読めないようにし(読者が内容に気を取られないように)、それを詰め物として使いました。この慣行はヨーロッパ各地の印刷所で標準となっていきました。

この並び替えは意図的なものでした。見た目は本物の言語のようでありながら、意味を持たないテキストは、視覚的にレイアウトが機能しているかを判断するのに最適です。目はそれをテキストとして認識しますが、脳は意味を読み取ろうとしないからです。

リチャード・マクリントックの1994年の発見

何世紀もの間、Lorem Ipsum の正確な出所は誰にもわかりませんでした。その起源は謎でした。そして1994年、バージニア州ハンプデン=シドニー大学のラテン語教授リチャード・マクリントック(Richard McClintock)が、Lorem Ipsum に登場する珍しい語「consectetur」——古典ラテン語では極めてまれな語——に興味を持ちました。彼はラテン文学の用語索引でこの語を調べ、キケロの『De Finibus』に辿り着きました。この発見によって、世界で最も有名なプレースホルダーテキストの2000年にわたる系譜が確認されました。


Lorem Ipsum の古典的な文章

現在使われている標準的な Lorem Ipsum テキストは以下の通りです:

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.

キケロの原文と比較すると、単語がいかに抜き出され、入れ替えられ、切り詰められているかがわかります。ラテン語のように見えて実際には何も意味しないテキストが生み出されています。「Lorem」自体は実はラテン語の単語ではありません——「dolorem」の断片で、「do」が切り落とされたものです。


Lorem Ipsum ジェネレーターの仕組み

現代の Lorem Ipsum ジェネレーターは純粋なランダム性を使うのではなく、厳選された語彙プールとアルゴリズムによる組み立てを使って、自然言語のリズムを模倣したテキストを生成します。

語彙プール

多くのジェネレーターは『De Finibus』から派生した拡張コーパスから始まります——数百のラテン語風単語の集まりです。プールに含まれる代表的な単語には:lorem, ipsum, dolor, sit, amet, consectetur, adipiscing, elit, sed, eiusmod, tempor, incididunt, labore, dolore, magna, aliqua... などがあります。

文の組み立て

ジェネレーターはプールから単語をランダムに選び、長さのさまざまな文(通常5〜20語)に組み立てます。一部のジェネレーターは統計的に自然な間隔でコンマや接続詞を追加し、ラテン語の文章構造を模倣します。

段落の構成

文は段落にまとめられます。ジェネレーターは通常次のオプションを提供します:

  • 段落数(例:3段落)
  • 1段落あたりの文数
  • 合計語数
  • クラシックな「Lorem ipsum dolor sit amet...」の書き出しで始めるかどうか

出力形式

ジェネレーターは通常以下の形式で出力します:

  • プレーンテキスト — 素の文字と句読点
  • HTML<p> タグで囲まれ、ウェブページにそのまま使える形
  • Markdown — ドキュメントや静的サイトジェネレーター向け

バリエーションと代替案

Lorem ipsum はクラシックですが、開発者やデザイナー向けにテーマ別のさまざまな代替案が登場しています。

Bacon Ipsum(ベーコン・イプサム)

肉料理をテーマにした語彙を使用:"Bacon ipsum dolor amet strip steak pork belly brisket short loin..." チームプレゼンテーションにユーモアを加えるのに最適です。

Hipster Ipsum(ヒップスター・イプサム)

流行語で埋め尽くします:"Artisan keffiyeh quinoa normcore organic craft beer..." 過剰にデザインされたブランディングを皮肉るのに役立ちます。

Corporate Ipsum(コーポレート・イプサム)

ビジネス用語を生成:"Synergize scalable functionalities to proactively facilitate cross-platform value propositions..." 不気味なほどリアル。

Cupcake Ipsum(カップケーキ・イプサム)

スイーツをテーマにした甘い文章:"Cupcake ipsum dolor sit amet marshmallow tiramisu toffee donut jelly beans..."

ランダムワード・辞書方式

純粋にランダムな英単語や固有名詞ベースのダミーテキスト(映画の台本を使う Fillerama など)を好むデザイナーもいます。それぞれのアプローチに可読性とリアリティのトレードオフがあります。


Lorem Ipsum を使ったデザイン:メリットとデメリット

Lorem Ipsum を使う理由

レイアウトへの集中:プレースホルダーテキストにより、デザイナーは言葉の意味に惑わされることなく、視覚的な階層構造、余白、プロポーションに専念できます。実際のコンテンツがある場合、関係者は不可避的にデザインを評価するのではなく文章を編集し始めてしまいます。

スピード:必要な量のテキストを即座に生成でき、列やコンテナのサイズにもぴったり合わせられます。

中立性:Lorem ipsum は感情的・政治的反応を引き起こさないため、クライアントへのプレゼンテーションで真に中立な埋め草となります。

業界標準:デザインレビューに参加するすべての関係者——開発者、プロダクトマネージャー、マーケターも——Lorem Ipsum が「ここにコンテンツが入ります」を意味することを理解しています。

Lorem Ipsum に反対する理由(コンテンツファーストデザイン)

「ギリシャ文字」問題:デザイン全体にプレースホルダーテキストが使われている場合、実際のコンテンツが入ると完全に異なる印象になることがあります。本物のヘッドラインは長さが異なり、本文の流れも違い、CTAの重みも変わります。

アクセシビリティの盲点:Lorem ipsum では、デザインがスクリーンリーダーに対して機能するかどうか、ARIAラベルが文脈の中で意味をなすかどうかを評価することが不可能です。

関係者の混乱:デザインに不慣れなクライアントは、Lorem Ipsum を翻訳エラーや不具合と勘違いすることがあります。

コンテンツファーストの提唱者(コピーライターのSarah RichardsやUXデザイナーのGiles Colborneなど)は、たとえ草稿であっても実際のコンテンツでデザインすることで、より誠実で正確なデザインが生まれると主張しています。コンテンツそのものがデザインだからです。


ウェブタイポグラフィとプレースホルダーテキスト

プレースホルダーテキストはタイポグラフィの判断を評価する上で非常に価値があります。

フォントの組み合わせ

見出しと本文のテキストブロックを生成して、選択した見出しフォント(例:太いセリフ体)が本文フォント(例:クリーンなサンセリフ体)とうまく組み合わさるかどうかを確認します。意味のない言葉により、コンテンツではなく形とリズムを判断できます。

行の高さと間隔

Lorem ipsum の段落全体で、line-height が狭すぎる(テキストが詰まって感じる)か広すぎる(リストのように読める)かが明らかになります。本文テキストの標準的な推奨値はフォントサイズの1.4〜1.6倍です。

列幅と可読性

タイポグラファーはmeasure(行の長さ)の原則を使います:最適な可読性のために1行45〜75文字。Lorem ipsum で列幅がこの原則に反していないかすぐに確認できます。

レスポンシブスケーリング

Lorem ipsum ブロックがさまざまなブレークポイントでどのようにリフローするかを観察します。モバイル幅でもテキストはバランスよく見えますか? 見出しは320pxでもきれいに折り返されますか?


アクセシビリティへの影響

Lorem ipsum の使用には、しばしば見落とされる重要なアクセシビリティの影響があります。

スクリーンリーダー

スクリーンリーダー(NVDA、JAWS、VoiceOverなど)は Lorem ipsum を読み上げようとし、混乱した意味不明な音声を生成します。これはLorem ipsum を本番環境に絶対に出荷してはならないという強力な信号です。

ARIAラベルと意味的な意味

アクセシブルなコンポーネントをデザインする際、ボタン・リンク・フォームラベルのプレースホルダーテキストは最終的に意味のあるテキストに置き換えなければなりません。Lorem ipsum でデザインすると、ARIA構造が実際に意図を伝えているかどうかが見えなくなります。

認知負荷のテスト

Lorem ipsum では認知負荷や読解力を適切にテストすることはできません。実際のユーザビリティテストには実際の(またはリアルな)コンテンツが必要です。

黄金ルール

Lorem ipsum を本番のウェブサイトやアプリケーションに絶対に公開してはいけません。 自動化チェック(アクセシビリティリンターやSEOクローラー)は、不規則な擬似ラテン語をコンテンツエラーとしてフラグします。さらに重要なことに、実際のユーザーが混乱したり不快に思ったりします。


Lorem Ipsum と実際のコンテンツ——どちらを使うべきか

適切な選択はデザインフェーズによって異なります:

フェーズ 推奨アプローチ
初期ワイヤーフレーム Lorem ipsum——レイアウト重視
中忠実度モックアップ Lorem ipsum+実際の見出し
高忠実度モックアップ できる限り実際のコンテンツ
ユーザーテスト 常に実際のコンテンツ
本番環境 Lorem ipsum は絶対NG

Lorem ipsum を使う場合:

  • レイアウトオプションを探っていて、コンテンツが構造的な判断に影響しないようにしたい
  • テンプレートを埋めたり、クライアントにデザインシステムを見せたりする必要がある
  • ドキュメントを書いたり、チュートリアルのスクリーンショットを作成したりしている

実際のコンテンツを使う場合:

  • ユーザビリティテストやユーザーリサーチを行っている
  • フォントサイズ、階層構造、またはコピーの長さについて決定を下している
  • 開発者へのデザイン引き渡しを準備している

HTML生成とデザインツールの統合

<p> タグで囲む

ウェブ用に Lorem ipsum を生成する場合、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>

各段落が適切に囲まれており、CSSでのスタイリングにすぐ使えます。

Figma

Figmaには Lorem ipsum のショートカットが組み込まれています:テキストレイヤーを選択して Shift + Cmd/Ctrl + L を押すか、コミュニティの「Lorem ipsum」プラグインを使います。より細かい制御には Lorem ipsumContent Reel などのプラグインも使えます。

Adobe XD

Adobe XD は右クリック→「編集」またはキーボードショートカットで Lorem ipsum の挿入を提供します。Ipsum などのサードパーティプラグインで機能を拡張できます。

Sketch

Sketch では 挿入 → テキスト → Lorem Ipsum で挿入するか、Content Generator Sketch Plugin などのプラグインを通じてテーマ付きコンテンツでテキストレイヤーを埋めることができます。


ベストプラクティス

  1. デザインファイルやドキュメントで Lorem ipsum を明確にラベル付けする — 注釈レイヤーやメモを使用する。
  2. ユーザーテスト前に実際のコンテンツに置き換える — プレースホルダーテキストでテストしてはならない。
  3. ウェブコンポーネントに統合する際は HTML出力を使う — 適切な意味的構造を維持するために。
  4. テキストの長さを実際に合わせる — 見出しが通常5語なら、20語の Lorem ipsum 見出しを使わない。
  5. 両方を組み合わせる — 本文には Lorem ipsum を使い、見出し・CTA・ラベルには実際の(またはリアルな)テキストを使う。
  6. Lorem ipsum を本番コードベースにコミットしない — リンティングルールやコンテンツ監査を設定して検出する。
  7. デザイン関係者以外に見せる場合はテーマ付き代替案を選ぶ — 混乱を減らすために。

よくある質問

Q:Lorem ipsum は本物のラテン語ですか? A:本物のラテン語(キケロの De Finibus)に由来していますが、プレースホルダーテキストとして使われている並び替えられたバージョンは文法的に正しくなく、意味もありません。

Q:Lorem ipsum を誰が発明しましたか? A:原典はキケロ(紀元前45年)です。プレースホルダーテキストとしての使用は15世紀の印刷業者、おそらくアルドゥス・マヌティウスに帰せられています。

Q:「Lorem」は本物の単語でないのに、なぜ Lorem ipsum は「Lorem」で始まるのですか? A:「Lorem」は「dolorem」の断片です——原文は「dolorem ipsum」で始まっていましたが、それが切り詰められました。

Q:商業プロジェクトで Lorem ipsum を使えますか? A:はい——Lorem ipsum はパブリックドメインです。テキスト自体に著作権はありません。

Q:Lorem ipsum に標準の長さはありますか? A:最も一般的な標準段落は5文(約69語)です。ほとんどのジェネレーターで任意の長さを指定できます。

Q:Lorem ipsum は SEO に影響しますか? A:公開ページに掲載されている場合は影響します。クローラーが低品質なコンテンツとしてフラグを立てる可能性があります。公開前に必ず置き換えてください。

Q:最も優れた Lorem ipsum ジェネレーターはどれですか? A:最も優れているのは、あなたのワークフローに最も合ったものです。当ツールはプレーンテキスト・HTML出力・段落数/文数の設定、そして必要に応じてクラシックな書き出しをサポートしています。


Lorem ipsum が500年以上も生き続けてきたのは、本物の問題を解決しているからです——意味に惑わされることなく視覚デザインを評価できるのです。適切なフェーズで、適切な注意を払って使用する限り、Lorem ipsum はデザイナーのツールキットの中で最も有用なツールの一つであり続けます。ただし忘れないでください:それは足場であって、完成した壁ではありません。扉を開く前に、必ず置き換えましょう。