Lorem Ipsumって何なのさ？プレースホルダーテキストの歴史と理論

一文で言うと

Lorem Ipsumは、デザインのコンテンツ領域を埋めるために使われる、ラテン語っぽい無意味なプレースホルダーテキストのこと。これにより、関係者は読みやすいコンテンツに気を取られることなく、レイアウトや視覚的な階層に集中できます。

これが解決する問題

想像してみてください。あなたはデザイナーで、素晴らしい新作ウェブサイトのレイアウトを練っているところです。見出し、段落、画像キャプション用のボックスを用意しました。でも、その中に何を入れたらいいでしょう？

「ここに見出しが入ります」とか「この段落のコンテンツは後で提供されます」と書くこともできます。でも、これには2つの問題があります。第一に、本物のテキストに見えません。「ここに見出しが入ります」は数単語ですが、本物の見出しは5単語や10単語かもしれません。「ここにコンテンツ」を何度も繰り返したテキストブロックは、奇妙で注意を散漫にさせるパターンを作り出し、本物の段落が持つ自然な質感を反映しません。第二に、もっと厄介なことに、もし「我が社は1998年に、〜という使命を持って設立されました」のような実際に読める文章を使ってしまうと、クライアントや上司は間違いなくそれを読み始めます。あなたの美しいデザインを評価する代わりに、「待って、設立は1999年だったはずだ」と言い出し、あなたは構成ではなく、原稿についての会話に引きずり込まれてしまうのです。

根本的な問題は、形の評価と内容の評価を切り離すことにあります。

そこで登場するのがLorem Ipsumです。その起源の物語は、あなたが思っているよりもクールです。単なるランダムなデタラメではありません。標準的なテキストは、紀元前45年にローマの政治家キケロが書いた古典ラテン語のテキスト「De finibus bonorum et malorum」（善と悪の究極について）から、単語を抜き出して改変したものです。

これをフィラーテキストとして使う習慣は、少なくとも1500年代にまで遡ります。当時、ある無名の印刷業者が活字見本帳を作るために、活字のゲラをぐちゃぐちゃにしたのが始まりだと考えられています。しかし、その現代的な名声は1960年代に由来します。Letrasetという会社がグラフィックデザイナー向けに文字のドライ転写シートを販売し、そのシート上でLorem Ipsumの文章を普及させました。1980年代にAldus PageMakerのようなデスクトップパブリッシングソフトウェアが登場すると、組み込みのLorem Ipsumジェネレーターが搭載され、デジタルデザイナーのツールキットにおけるその地位を永遠のものとしました。

これが機能するのは、もっともらしいヨーロッパ言語のように見えるからです。単語の長さは様々で、大文字や句読点もあり、ページ上でリアルな「色」や「テクスチャ」を生み出します。解読不能であるため、見る人の脳は読もうとすることをやめ、代わりにデザインレビューで重要な事柄に集中せざるを得なくなります。フォントは読みやすいか？行間は適切か？レイアウトはバランスが取れているか？見出しは十分に目立っているか？といった具合に、会話を本来あるべき場所に留めてくれるのです。

内部の仕組み

Lorem Ipsumジェネレーターなんて、単にテキストファイルをコピー＆ペーストしているだけだと思うかもしれません。最もシンプルなバージョンはまさにその通りですが、優れたジェネレーターはもう少し賢く、より自然に見え、変化に富んだテキストブロックを作成するために、簡単なアルゴリズムを用いています。

ソーステキスト：キケロの遺産

プロセスはソーステキストから始まります。古典的な Lorem ipsum dolor sit amet... は、キケロの文章をめちゃくちゃにしたバージョンです。元の文章はこう始まります：

...neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...

これは次のように翻訳されます：

...痛みそれ自体を、それが痛みであるという理由で愛したり、追い求めたり、手に入れたいと望む者など誰もいない...

見ての通り、プレースホルダーの最初の単語 Lorem は dolorem の一部です。単語は本物のラテン語ですが、切り刻まれ、並べ替えられ、いくつかの無意味な単語がちりばめられており、文章全体が文法的に不正確で無意味になっています――それがまさにポイントなのです。

ジェネレーターの「辞書」は、これらのラテン語およびラテン語風の単語の大きなリストです。

元のキケロの文章	ごちゃ混ぜのLorem Ipsum
`dolorem ipsum`	`Lorem ipsum dolor`
`quia dolor sit`	`quia dolor sit`
`amet, consectetur`	`amet, consectetur`
`adipisci velit`	`adipiscing elit`

生成アルゴリズム

設定可能なジェネレーターは、毎回同じ100単語のブロックを吐き出すだけではありません。簡単なルールセットを使って、段落を一から構築します。

文の生成: 1つの文を作るために、アルゴリズムは単語リストからランダムな数の単語（例えば8から20の間）を選びます。それらをスペースで連結し、最初の単語を大文字にして、ピリオドを追加します。より凝ったものにするために、いくつかの単語の後にランダムにカンマを挿入することもあります。
段落の生成: 1つの段落を作るために、アルゴリズムは文生成器をランダムな回数（例えば3から7回）呼び出し、結果として得られた文を連結します。
設定可能な出力: あなたが「5段落」を要求すると、ツールは単に段落生成ループを5回実行します。一部のジェネレーターは、単語数や文字数を指定するなど、より多くの制御を提供します。これは、目標数に達するまで単語選択ループを実行するだけです。

ここに、中心的なロジックを示す小さなJavaScript風の疑似コードの例があります：

// 単語の辞書
const LOREM_WORDS = ["lorem", "ipsum", "dolor", "sit", "amet", "consectetur", ...];

// 可変長の文を1つ生成する
function generateSentence(minWords = 8, maxWords = 20) {
  const wordCount = Math.floor(Math.random() * (maxWords - minWords + 1)) + minWords;
  let words = [];
  for (let i = 0; i < wordCount; i++) {
    const randomIndex = Math.floor(Math.random() * LOREM_WORDS.length);
    words.push(LOREM_WORDS[randomIndex]);
  }
  let sentence = words.join(" ");
  // 最初の文字を大文字にし、ピリオドを追加する
  return sentence.charAt(0).toUpperCase() + sentence.slice(1) + ".";
}

// 可変数の文からなる段落を1つ生成する
function generateParagraph(minSentences = 3, maxSentences = 7) {
  const sentenceCount = Math.floor(Math.random() * (maxSentences - minSentences + 1)) + minSentences;
  let sentences = [];
  for (let i = 0; i < sentenceCount; i++) {
    sentences.push(generateSentence());
  }
  return sentences.join(" ");
}

// 3つの段落を生成する
for (let p = 0; p < 3; p++) {
  console.log(generateParagraph());
}

このシンプルな構造だけで、ユニークに見えるプレースホルダーテキストのブロックを、要求に応じて無限に生成することができるのです。

実話から学ぶ

###前のめりすぎるクライアントフリーランスのデザイナー、マリアは、新しい職人技のパン屋のウェブサイトを構築していました。「私たちの物語」と商品説明のセクションにLorem Ipsumを使い、豪華なホームページのモックアップを作成しました。自分の仕事に誇りを持ち、彼女はデザイン承認のためにクライアントにリンクを送り、メールでテキストは単なるプレースホルダーだと説明しました。パン屋の経営で忙しいクライアントは、メールをざっと読み、リンクをクリックしました。1時間後、マリアはパニックになったメールを受け取りました。「デザインはいいけど、ウェブサイトがラテン語になってる！うちは『dolor sit amet』なんて売ってない！すぐにテキストを直してください。」マリアは次の20分間、電話で彼をなだめ、プレースホルダーテキストの目的を再度説明するのに費やしました。

教訓: 技術者でない関係者がLorem Ipsumを知っていると思い込んではいけません。それが視覚デザインに集中するのを助けるためのツールであり、本物の文章は後で入ることを、積極的に説明しましょう。

改行できない単語事件

フロントエンド開発者のサムは、ニュースアプリ用のレスポンシブなカードコンポーネントを構築していました。カードにはタイトル、画像、そして短いテキストのスニペットがありました。スマホで見栄えが良くなくてはならず、つまりテキストカラムはかなり狭いということです。サムはLorem Ipsumを数文入れてみたところ、完璧に見えました。テキストは美しく折り返され、スペースも適切で、彼はそのコンポーネントをシップしました。数週間後、アプリはドイツの科学雑誌から本物の記事を取り込みました。そこには Rechtschreibreform という単語が含まれていました。この単語はカードの全幅よりも長かったのです。単語は改行されず、コンテナをはみ出し、レイアウトを完全に破壊してしまいました。

教訓: Lorem Ipsumは短いラテン語ベースの単語を使用します。一般的な流れを確認するには最適ですが、レイアウトのストレステストには全く向いていません。長い単語、短い見出し、または異なる言語のテキストなど、現実的な最悪ケースのコンテンツでUIを常にテストしましょう。

本番サイトでの大失敗

ジュニア開発者のクロエは、稼働中のeコマースサイトに新しいプロモーションバナーを追加するタスクを与えられました。金曜日の午後4時に依頼された、急ぎの仕事でした。彼女はバナーをコーディングし、スタイルを整え、配置を確認するためにLorem Ipsumをいくつか入れました。週末前にデプロイしようと急ぐあまり、彼女はコードをコミットし、本番環境にプッシュしてしまいました。その後3時間、会社のホームページには「春の新作コレクションをチェック！Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.」と書かれた目立つバナーが表示され続けました。

教訓: プレースホルダーテキストは放射性物質のようなものです――絶対に本番環境に到達させてはなりません。デプロイプロセスに、コードベース内で "lorem ipsum" を検索し、見つかったらビルドを失敗させるような簡単なスクリプトなどのチェックを実装しましょう。これは、恥ずかしいミスに対する安価で効果的なセーフティネットです。

よくある間違いと落とし穴

置き換え忘れ。 これは最大の罪です。Lorem Ipsumが残ったまま公開されたサイトは、プロフェッショナルに見えず、壊れているように見えます。デプロイ前のスクリプトや手動のチェックリストを使って、それを見つけ出し、根絶しましょう。
クライアントを混乱させる。 それが何であるかを説明しないと、クライアントは必ず混乱し、何かが間違っていると考えます。事前の説明は、全員の時間と不安を節約します。
実際のコンテンツの長さを表していると思い込む。 「Lorem ipsum dolor sit amet...」の一行は、本物の見出しではありません。生成された段落は、実際のユーザーの自己紹介と同じ長さではありません。実際のコンテンツは予測不可能なので、柔軟性を念頭に置いてデザインしましょう。
国際化（i18n）を無視する。 Lorem Ipsumの文字セットと単語構造はラテン語ベースです。中国語（中文）のより幅の広い文字、ドイツ語の長い複合語、またはアラビア語（عربى）の右から左への流れを、あなたのデザインがどのように処理するかは明らかになりません。
UXテストに使う。 これは無視されるように設計されています。ユーザーが指示に従えるか、またはコールトゥアクションを理解できるかをテストしている場合、現実的で意味のあるテキストを使用しなければなりません。ユーザー向けの指示にLorem Ipsumを使用するのは、ラベルのない地図を誰かに渡すようなものです。

なぜ注目すべきか

開発者、デザイナー、あるいはプロジェクトマネージャーであっても、Lorem Ipsumはデジタル制作プロセスの基本的な部分です。コンテンツが確定する前に構造を構築する必要がある状況では、いつでもこれを思い浮かべるべきです。

フロントエンド＆UI開発: Reactコンポーネント、CSSグリッドレイアウト、または単純なHTMLページを構築しているとき、テキストがどのように流れるかを確認する必要があります。Lorem Ipsumは、コピーライターを待たずにスタイリングを正しく行うために、それらのpタグやdivを埋めるための頼れるツールです。
UI/UXデザイン＆ワイヤーフレーム作成: Figma, Sketch, Adobe XDでプレースホルダーテキストを使用すると、フィードバックセッションがコピー編集のセッションに成り下がるのではなく、レイアウト、階層、ユーザーフローに集中し続けることができます。
データベースのシーディング: アプリを構築する際、テストデータが必要です。1,000人の偽ユーザーを生成するスクリプトは、彼らの「自己紹介」フィールドにLorem Ipsumを使用してデータを投入でき、開発環境をNULLや空文字列で埋め尽くすよりもはるかにリアルに感じさせます。
印刷＆グラフィックデザイン: 元々の使用例は今も健在です。パンフレット、雑誌、または本のカバーをデザインする際、タイポグラファーはフォントの選択、組み合わせ、リーディング（行間）、カーニング（字間）を評価するためにこれを使用します。

さらに深く

Wikipedia: Lorem Ipsum — Lorem Ipsumの歴史、起源、目的についての、出典が明記された決定的な概要。
Cicero's "De finibus bonorum et malorum" — Lorem Ipsumが生まれた元のラテン語テキスト（英訳付き）を読んでみましょう。関連する箇所は第1巻、セクション1.9.32-33にあります。
Lipsum.com — ウェブ上で最も古いLorem Ipsumジェネレーターの一つ。歴史やよくある誤解について良い説明があります。
"Designing with Real Content" by A List Apart — Lorem Ipsumの限界について議論し、デザインプロセスの早い段階で現実的なコンテンツを使用することを提唱する優れた記事です。