Lorem Ipsumとは、本物の文章がまだ存在しない段階でデザイナーがレイアウトに流し込む、わざと無意味にした疑似ラテン語のかたまりだ。狙いは「テキストの形をしたテキスト」で空間を埋めること。そうすればレビューする側は、文章を読んで編集することに気を取られず、タイポグラフィ・余白・構造そのものを評価できる。何の意味も読み取れないのが、このテキストの本来の役目である。今すぐ一塊ほしいなら、Lorem Ipsum ジェネレーターがブラウザ上でワンクリックで生成してくれる。
ただ「それは何か」は入り口にすぎない。本ガイドでは、このテキストが実際どこから来たのか（紀元前45年のキケロの実在する一節）、なぜ「asdf asdf」と打つよりうまく機能するのか、コードエディター、Word、faker ライブラリ、Figma、生の CSS といったほぼあらゆる環境でどう生成するのか、代替手段には何があるのか、そして多くの記事が飛ばす落とし穴までを扱う。その落とし穴とは、西欧言語以外の言語をレイアウトが扱わねばならなくなった途端、Lorem Ipsum が現実とずれた数字を返し始めるという点だ。
Lorem Ipsumとは？
Lorem Ipsum はプレースホルダーテキストだ。本物のコンテンツが書かれる前にデザインを埋めるために使う、無意味なラテン語めいた単語の集まりである。箱を埋めるために適当に打つでたらめではない。単語の長さのばらつき、文の長さのばらつき、ときおり挟まれるカンマといった自然に感じられる形を持っているので、一段落分を組むと、本物の文章とよく似た形で行が折り返され、ハイフネーションされ、活字として収まる。価値はそこにある。目には信じられるテキストのかたまりが映り、メッセージではなくレイアウトを評価することになる。
誰もが見覚えのある一行は、定番の書き出し「Lorem ipsum dolor sit amet, consectetur adipiscing elit」だ。人はこれを本物のラテン語だと思い込むが、厳密にはそうではない。最初の単語がすでに種明かしをしている。ラテン語に「lorem」という単語は存在しない。それは「痛み」を意味する「dolorem」の先頭の音節が削り取られた末尾だ。世界で最も有名なプレースホルダーテキストの、まさに最初の単語が、苦しみを語るより長い単語の断片なのである。lorem ipsum の意味を一文で言えば、誰もコンテンツと取り違えないよう意図的に壊されたラテン語、ということになる。
この意図的な壊れ具合が肝心だ。仮にこの埋め草が筋の通った言語として読めてしまえば、レビューする側はそれを読み始め、編集し始め、デザインレビューがコピーのレビューに変わってしまう。Lorem Ipsum はちょうどよい塩梅に収まっている。紙面上では文章のように振る舞う構造を持ちつつ、誰も実際に読もうとは思わない程度に無意味だ。
Lorem Ipsumはどこから来たのか？
lorem ipsum の由来にまつわる話は、多くの人が思っているより具体的だ。ウェブ上に出回っている短い説明（「ただのランダムなラテン語」）は間違っている。このテキストには実在する古典の出典があり、そこから歪められ、二つのデザイン技術の波に乗って広まった。
キケロの『善と悪の究極について』（紀元前45年）
出典はキケロが紀元前45年に著した道徳哲学の著作『De Finibus Bonorum et Malorum』（「善と悪の究極について」）だ。第1巻10章32節と33節は快楽と苦痛を論じており、ある一節は「Neque porro quisquam est qui dolorem ipsum quia dolor sit amet…」（「苦痛それ自体を、それが苦痛であるという理由で愛する者など誰もいない…」）と始まる。「dolorem」を「lorem」へ削り、続く語をかき混ぜ、いくつか落とし、別の語を加えると、あの見慣れた埋め草になる。有名な書き出しは、なぜ誰も苦痛そのものを求めはしないのかを語る実在の一文を壊したものなのだ。
つまり Lorem Ipsum は、でっち上げの無意味な言葉ではない。意味を外科的に取り除かれた、2,000年前の哲学のテキストだ。
Letrasetと1960年代
ラテン語の一節が、ひとりでにデザイン業界の標準になるわけではない。その飛躍は1960年代、Letraset という会社を通じて起きた。ドライトランスファー（こすって転写する）レタリングシートを作っていた会社で、デジタル活字以前にグラフィックデザイナーが使っていたこすり付け式の文字だ。Letraset はそのシートと見本資料に Lorem Ipsum の一節を印刷し、中立的な埋め草をすぐ手に取れる形で現役のデザイナーに届けた。こうしてこのテキストは、まだ言葉になっていない言葉が必要なときに手を伸ばすものになった。
PageMakerとデスクトップパブリッシング（1980年代）
第二の波はソフトウェアだった。1980年代、Aldus は事実上デスクトップパブリッシングを生み出したアプリケーション PageMaker を出荷し、Lorem Ipsum を組み込みのサンプルテキストとして同梱した。これにより埋め草は、印刷の見本シートから画面の上へ、そしてコンピューターでページを組むすべての人の標準ワークフローの中へ移った。そこからこのテキストは、あらゆるページレイアウトアプリ、あらゆるウェブサイトテンプレート、あらゆる現代のデザインツールへと広がった。今日では InDesign も Figma も、コマンド一つでフレームに Lorem Ipsum を流し込めるし、その連鎖をたどればまっすぐ、苦痛について語ったローマ人にまで戻る。
デザイナーと開発者がプレースホルダーテキストを使う理由
プレースホルダーテキストを使う理由は、結局ひとつの考えに行き着く。デザインの問題とコンテンツの問題を切り離し、一つずつ解けるようにすることだ。段組みの幅、行長、行送り、そしてカードのテキストが3行目に折り返す位置を決めているとき、本物のコピーは邪魔になる。レビューする側が見出しを読んで言い回しに異を唱え、グリッドではなく一つの文を議論する羽目になるからだ。
では、なぜどんな埋め草でもなく、デザイナーは Lorem Ipsum をわざわざ使うのか。その統計的な形が効いてくるからだ。単語は現実的な長さの分布を持ち、文は本物の文と同じようにばらつく。だから一段落分の Lorem Ipsum は行をまたいで折り返し、ハイフネーションし、現実的な行数に積み上がる。Lorem を入れて承認したレイアウトは、同じ長さの本物のテキストで得られるレイアウトに近い。
手抜きの代替手段と比べてみよう。text text text text と打てば、すべての単語が同じ長さなので、行の折り返しが均一で偽物めいたパターンに落ち、本物のコピーがどう流れるかを覆い隠す。asdfasdf jkl;jkl; を打ち込めば、不自然な文字の形になり、単語の区切りがまるでなくなる。どちらも、評価しようとしている対象を偽って見せてしまう。Lorem Ipsum は、言語のように見えて読めはしない、という求められている性質をちょうど備えている。
社会的な利点もある。Lorem Ipsum は通じる合図だ。クライアントやチームメイトが「Lorem ipsum dolor sit amet」を見れば、これは意図したプレースホルダーで本物のコピーは後から来ると読み取り、ページが壊れていると慌てたり、かき混ぜられたラテン語を校正し始めたりしない。その共通理解は、レビューの場で効いてくる。
どこでもLorem Ipsumを生成する方法
このテーマの記事の多くは「ウェブサイトからコピペすればいい」で止まる。それでは、Lorem Ipsum を生成する手段が実際どれだけ多くの場所で使えるかを取りこぼしている。ここではブラウザのタブからビルドスクリプトまで、ひととおりの道具を挙げる。
オンラインジェネレーター
最も速く、最も制御が効くのは専用のウェブツールだ。Lorem Ipsum ジェネレーターは、開いた時点で3段落がすでに入力欄に入っているので、ページが読み込まれた瞬間に埋め草をコピーできる。そこから単位（段落、文、単語、リスト項目、あるいは正確なバイト数）を選び、量を設定し、出力フォーマットを選ぶ。プレーンテキスト、<p> や <ul><li> で囲んだ HTML、Markdown、または JSON 配列だ。バイト単位は便利で、ツイート欄向けにちょうど280バイト、varchar(255) の列向けに255バイトを、最後の文字まで切り詰めて埋められる。
エディター内で：VS CodeとEmmet
HTML を書くなら、すでに生成機能が組み込まれている。Emmet――VS Code に同梱され、ほとんどのエディターで使える――は、HTML ファイル内で Tab を押すと lorem という略記を埋め草に展開する。数字を加えれば単語数を制御できる。
lorem
<!-- 約30語のLorem Ipsumに展開される -->
lorem30
<!-- ちょうど30語 -->
p*3>lorem20
<!-- 3つの<p>要素、それぞれ20語のLorem Ipsum -->最後の例は覚えておく価値がある。lorem を Emmet の乗算とネストと組み合わせれば、キーボードから手を離さずにマークアップ済みの埋め草を丸ごと生成できる。JetBrains の IDE（WebStorm、IntelliJ）も同じ Emmet サポートを備えているので、これらの略記はそこでも使える。
Microsoft Word内で
Word には、ウェブより前から存在する隠れた生成機能がある。空の行で次を入力して Enter を押す。
=lorem()これで数段落の Lorem Ipsum が挿入される。量は二つの引数――段落数と1段落あたりの文数――で制御できる。
=lorem(3,5)これは5文ずつの段落を3つ生成する。ラテン語ではなく読める英語の埋め草（実際の Word のヘルプテキスト）がほしければ、同じ要領で =rand() や =rand(3,5) を使う。ラテン語では混乱してしまう非技術者の相手に何かを示すときに便利だ。
コード内で：faker.js
データベースへの初期投入、テストフィクスチャの作成、API のモック化のように、プログラムの中で埋め草が必要なときは、faker ライブラリがコピペに勝る。現役でメンテナンスされているパッケージは @faker-js/faker だ。
import { faker } from '@faker-js/faker';
// 1文、1段落、3段落
const sentence = faker.lorem.sentence();
const paragraph = faker.lorem.paragraph();
const article = faker.lorem.paragraphs(3);
// 再現可能な出力：まずジェネレーターにシードを与える
faker.seed(42);
const fixed = faker.lorem.paragraphs(3); // 実行ごとに同じテキストシードはテストで効いてくる。faker.seed(42) は出力を決定的にするので、実行ごとに埋め草が変わったというだけでスナップショットテストが不安定になることがない。さらに faker は名前・メール・住所・構造化されたレコードも生成するので、現実的なフィクスチャを満たして、そのままディスクへ流し込める。そのフィクスチャを JSON として保存するなら、JSON整形ツールに通しておけば、コミットされたファイルが差分で読みやすくなる。
デザインツール内で：FigmaとInDesign
デザイナーが別のタブを必要とすることはめったにない。Figma では「Lorem ipsum」プラグイン（および Content Reel）が、選択したテキストレイヤーを指示一つでプレースホルダーのコピーで満たす。InDesign では、テキストフレームを選択して書式 → プレースホルダーテキストで埋めるを選べば、Lorem Ipsum がストーリー全体に流し込まれ、原稿が届く前に複数段組みのゲラを評価できる。
CSS内で
純粋な視覚的プロトタイピングには、生成コンテンツで埋め草を注入でき、マークアップを変える必要もない。
.skeleton::after {
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
}これはほどほどに使うこと。CSS で設定したコンテンツは本物のドキュメントテキストではなく、スクリーンリーダーの扱いも一貫せず、そこにあることを忘れやすい。使い捨てのプロトタイプやスタイリングの実験には問題ないが、実際のテンプレートでプレースホルダーコンテンツの代わりにはならない。
Lorem Ipsumの派生と代替手段
古典的な Lorem Ipsum は既定の選択肢だが、唯一の選択肢ではないし、ときには間違った選択肢になる。lorem ipsum の代替手段は大きく三系統に分かれ、それぞれ向く仕事が違う。
テーマ付きIpsum（Bacon、Hipster、Cat）
テーマ付きジェネレーターは、ラテン語を冗談めいた語彙に差し替える。Bacon Ipsum（「bacon ipsum dolor amet ribeye…」）、Hipster Ipsum、Cat Ipsum、そのほか数十種類だ。これらが本当に役立つのは、見覚えがあって少しおかしい埋め草がチームの関心を引き、これは絶対に最終版ではないと知らせる、カジュアルな社内レビューの場面だ。リスクは Lorem の強みの裏返しにある。テーマ付きの埋め草は読めてしまうので、人は読み始める。そしてクライアントの場では、真剣味に欠ける印象を与えかねない。雰囲気づくりには使い、レイアウトの判断には使わないこと。
実データ系faker（faker、Mockaroo）
プレースホルダーに文章ではなく構造が必要なときは、実データ系の faker に手を伸ばす。Lorem Ipsum は偽のテキストのかたまりをくれるが、@faker-js/faker や Mockaroo のようなツールは、実際のデータモデルの形をした偽のレコード、つまり名前、メール、価格、日付、住所をくれる。データベースへの初期投入、API モックの作成、プロトタイプでのユーザーテーブルの充填には、構造化された偽データのほうが、同一の段落を10個並べたラテン語よりはるかに正直だ。もっともらしい名前とメールを持つユーザー行は、「Lorem ipsum dolor」では分からないことを、あなたのレイアウトについて教えてくれる。
コンテンツファーストのデザイン
Lorem Ipsum に対する最も鋭い批判は、コンテンツファースト派から来る。そして真剣に受け止める価値がある。その主張はこうだ。本物のコンテンツには、プレースホルダーテキストが取り繕ってしまう長さ・トーン・エッジケース・気まずい真実がある。料金表は、きちんとした Lorem の説明文を3つ並べると整って見えるが、あるプランの本物の説明が他より3倍長くなった途端に崩れる。「Lorem ipsum dolor sit amet」を中心に組んだプロフィールカードは、本物のユーザーが40文字の名前を持ち、自己紹介が空のときに壊れる。現実的な、できれば本物のコンテンツでデザインすれば、そうした問題が、修正の安いうちに早く表面化する。実用的な教訓は「Lorem を絶対に使うな」ではなく、「Lorem で構造をざっと固め、確定する前に本物のコンテンツで負荷をかけて試せ」だ。
i18nプレースホルダーの落とし穴
ここは多くのガイドが飛ばす部分であり、いちばん痛い目に遭わせやすい部分でもある。Lorem Ipsum はラテン語だ。その単語の長さ、文字の出現頻度、空白の取り方は、英語・フランス語・スペイン語とその近縁といった西欧言語に近い。レイアウトがその語族に属さない言語を表示しなければならなくなった途端、Lorem Ipsum は現実をまるで予測しなくなる。
破綻のパターンは、繰り返し現れる三つに集約される。
- CJK文字（中国語、日本語、韓国語）。 これらの言語はしばしば単語間に空白を使わず、改行の規則がまったく異なり、各文字がほぼ正方形の固定幅セルを占める。Lorem Ipsum では釣り合って見える段組みが、中国語で埋めると、しかも異なる行数で、まるで違う折り返しになることがある。1行あたりの文字密度はラテン語と似ても似つかない。
- RTL文字（アラビア語、ヘブライ語）。 これらは右から左へ読むので、読む方向、揃え方、UI コントロールの位置がすべて反転する。Lorem Ipsum は、レイアウトが正しく鏡映しになるかどうかについて何の手がかりもくれない。実際の RTL のサンプルテキストで試すしかない。
- ドイツ語などの複合語が多い言語。 ドイツ語は長い複合名詞（「Geschwindigkeitsbegrenzung」「Rechtsschutzversicherung」）を組み立てるが、これらは Lorem のきれいな5〜8文字の単語のようには折り返さない。Lorem Ipsum を余裕で収める狭い段組みが、本物のドイツ語が一つ入った途端にあふれたり、不格好なハイフネーションを強いられたりする。
対処は単純だ。ローカライズされたレイアウトの検証に Lorem Ipsum を信用しないこと。各ロケールをその言語のサンプルテキストで埋め、折り返し、行数、コントロールの揃え方を実際に確認する。メタディスクリプション、ツイート、SMS といった現実の上限にスロットを合わせるときは、実際の文字数の予算に合わせること。プラットフォーム別文字数制限ガイドが数字を整理しているし、文字数カウンターを使えば、それを軸にデザインする前にサンプルが範囲に収まるか確認できる。
ここはまた、バイトと文字の区別が牙を剥くところでもあり、そのまま「よくある間違い」の節につながる。
よくある間違いとLorem Ipsumを使ってはいけない場面
Lorem Ipsum は開発のツールであって、出荷する素材ではない。トラブルの大半は、その一線を忘れることから来る。警戒すべき失敗を挙げておく。
本番に出荷してしまう。 これが最大のものだ。Lorem Ipsum がまだ残ったまま公開・インデックスされるページは、ランクづけする本物のコンテンツを持たず、見つけた訪問者には壊れているように読め、内容が薄い／未完成だと判定されかねない。たいていは意図せず起きる。公開されてしまったステージング用テンプレート、忘れられたフッター、誰も差し替えなかった CMS の既定値といったものだ。防御は機械的に行う。デプロイのたびに、プロジェクト全体を（大文字小文字を区別せず）lorem ipsum で検索し、ヒットがゼロであることを確認する。リンク切れチェックの隣に、公開前チェックリストとして入れておこう。
アクセシビリティを忘れる。 スクリーンリーダーは Lorem Ipsum を飛ばさず、かき混ぜられたラテン語を、使っている人に向けて一語ずつ読み上げる。デモでは混乱を招き、プレースホルダーが本番に届いてしまえば、利用者にとって相当に厄介だ。支援技術を使う関係者に成果物を見せるなら、ラテン語の壁よりも、本物の、あるいはテーマ付きでも読める埋め草のほうが親切だ。
量をスロットに合わせ損ねる。 1行の見出しを3段落で埋めたり、長い記事本文を1文で埋めたりすると、間違った長さでレイアウトを試すことになる。モックアップでは問題なく見え、本物のコンテンツが来ると壊れる。単位と量を、スロットが実際に収めるものに合わせること――見出しなら60語ではなく6語だ。
バイトは常に文字と等しいと思い込む。 古典的な Lorem Ipsum は純粋な ASCII なので、1文字はちょうど1バイトであり、それが普遍の法則だと信じ込みやすい。だが違う。アクセント付きの文字、絵文字、あるいはラテン以外の文字を一つ差し込めば、1文字が2バイト、3バイト、4バイトになりうる。255個の ASCII の Lorem 文字を余裕で収める varchar(255) のバイト列は、本物のユーザーが café 北京 😀 を255文字打ち込むとあふれる。フィールドが実際に格納する文字セットでバイト上限を試すこと。プラットフォーム別文字数制限ガイドが、これでつまずきやすい場所を具体的に掘り下げている。（同じバイトと文字の注意は、識別子をサニタイズするときにも出てくる。命名規則ガイドが、キーやスラッグについて関連する地点を扱っている。）
生成したテキストを保存済みアセットだと思い込む。 たいていのジェネレーターは何も保存せず、ページを再読み込みすれば出力は消える。特定のかたまりがもう一度必要なら、コピーするかダウンロードすること。繰り返し使うテストフィクスチャなら、実行のたびに（しかも毎回違う内容で）生成し直すのではなく、JSON 出力をリポジトリに保存して、それに依存するテストと一緒に埋め草をバージョン管理する。
よくある質問
Lorem Ipsumはどういう意味ですか？
Lorem Ipsum は意図的に何の意味も持たない、壊されたラテン語だ。キケロの苦痛と快楽についての一節に由来するが、単語は切り取られ、並べ替えられ、読めるラテン語を成さなくなるまで手を加えられている。最初の単語「lorem」は、「dolorem」（「痛み」）の先頭の音節を取り除いた断片だ。
Lorem Ipsumは本物のラテン語ですか？
いいえ。キケロの『De Finibus Bonorum et Malorum』の一節という本物のラテン語に基づいてはいるが、意図的に歪められている。単語は切り詰められ、並べ替えられ、落とされ、付け足されているので、翻訳できるテキストではなく、ラテン語風の無意味な文として読める。「lorem」自体は本物のラテン語の単語ではない。
Lorem Ipsumはどこから来たのですか？
Lorem Ipsum は紀元前45年のキケロのテキスト『De Finibus Bonorum et Malorum』から来ている。1960年代にドライトランスファーのレタリングシートにこれを印刷した Letraset 社を通じてデザインに入り、1980年代に Aldus が最初のデスクトップパブリッシングアプリ PageMaker のサンプルテキストとして同梱したことで主流になった。
なぜデザイナーは本物のテキストではなくLorem Ipsumを使うのですか？
デザイナーが Lorem Ipsum を使うのは、レビューする側がコピーを読んで編集するのではなく、レイアウト・タイポグラフィ・余白を判断できるようにするためだ。現実的な単語と文の長さのおかげで、text text text や asdf とは違い本物の文章のように折り返され区切られる一方、誰も実際に読もうとは思わない程度に無意味でいられる。
VS CodeやWordでLorem Ipsumを生成するには？
VS Code では、HTML ファイルで Emmet の略記 lorem（正確な単語数なら lorem30）を入力して Tab を押す。Word では、空の行で =lorem() を入力して Enter を押すか、5文ずつの段落を3つにするなら =lorem(3,5) を使う。どちらもプラグインなしでオフラインで動く。
Lorem Ipsumの最良の代替手段は何ですか？
主な代替手段は三つ。カジュアルなレビュー向けのテーマ付きジェネレーター（Bacon、Hipster、Cat Ipsum）、文章ではなく構造化された偽のレコードが必要なときの @faker-js/faker や Mockaroo のような実データ系 faker、そして実際の長さやトーンがレイアウトの中でどう振る舞うかを負荷をかけて試したいときの本物のコンテンツそのものだ。
公開ページにLorem Ipsumを残すのはSEOに悪いですか？
はい。Lorem Ipsum で埋まった、公開されインデックスされるページは、ランクづけする本物のコンテンツを持たず、内容が薄い／未完成だと扱われかねず、クロール予算を浪費し、訪問者を混乱させる。ラテン語そのものに直接のペナルティはないが、ページは性能を発揮できない。デプロイのたびにプロジェクトを lorem ipsum で検索すること。
Lorem Ipsumは英語以外やCJKのレイアウトで機能しますか？
確実には機能しない。Lorem Ipsum は西欧言語にしか近くない。CJK 文字はまったく違う折り返しと空白になり、アラビア語のような RTL 言語は全体の方向を反転させ、ドイツ語の複合語は狭い段組みをあふれさせる。ローカライズされたレイアウトは、Lorem ではなく対象言語の本物のサンプルテキストで検証すること。
まとめ
Lorem Ipsum は意味を抜き取られた2,000年前のキケロの一節であり、Letraset と PageMaker によって生き永らえ、今やあなたが触れるあらゆるデザインツールに組み込まれている。それが居場所を得ているのは、言語のように見えて読めないからだ。レイアウトを判断するには都合がよく、出荷するコンテンツとしては無用だ。構造をざっと固めるために使い、作業しているその場で生成し、何かが公開される前に本物の、ロケールに合ったコンテンツへ置き換えること。今すぐ一塊ほしいときは、Lorem Ipsum ジェネレーターが用意して待っている。