Lorem ipsum とは
Lorem ipsum は、デザイナー、開発者、出版関係者が何十年も前から、本物の文章ができあがる前のレイアウトを埋めるために使ってきたダミーテキストです。おなじみの「Lorem ipsum dolor sit amet, consectetur adipiscing elit.」という一文で始まります。単語はキケロのラテン語の文章から取られていますが、細かく切って並べ替えてあるので、自然な言葉のように見えても何も意味していません。
そこがポイントです。本物の文章は気を散らします。初期段階の Web ページに本物の文が並んでいると、クライアントはレイアウトを評価するより先に文言の修正を始めてしまいます。ダミーテキストを使えば、フォント、1行の長さ、余白、ページの流れに注意を向けてもらえます。
このツールが生成するのはラテン語風の英字のダミーテキストだけで、日本語のダミーテキストは作れません。英語サイトや多言語サイトのデザイン、海外向けのモックアップには適していますが、日本語の文章は文字の密度や改行の位置が英文と大きく異なります。日本語サイトのレイアウトを確認するときは、最終的には実際に近い日本語の文章でも確かめてください。
ジェネレーターの使い方
- 生成単位で、段落、文、単語、リスト項目のいずれかを選びます。
- 個数を設定します。
- Lorem ipsum で始めるかどうかを決めます。初期設定ではオンです。
- コードに貼り付ける場合は、HTML タグで囲むをオンにします。
- 別のランダムなテキストが欲しい場合は、新しいテキストを生成を押します。
- コピーまたはダウンロードを押して保存します。
オプションを変えるとすぐにテキストが更新されます。結果の下には文字数、単語数、行数が表示されるので、決まった大きさの枠を埋めたいときに役立ちます。
各オプションの出力
段落は、それぞれ4〜7文で構成され、空行で区切られます。HTML モードでは <p> タグで区切られます。
文は、6〜14単語で構成されます。長めの文には真ん中あたりにカンマが入るので、自然なリズムになります。
単語は、ピリオドで終わるちょうど指定した数の単語を出力します。見出し、ボタン、短いラベルを埋めるのに使います。
リスト項目は、3〜7単語の短いフレーズです。プレーンテキストでは各項目がハイフンとスペースで始まります。HTML モードでは <ul> のリストになります。
生成例
以下は、新しいテキストを生成を押す前の、ページの初期設定で表示される結果です。
| 設定 | 結果 |
|---|---|
| 単語、5 | Lorem ipsum dolor sit amet. |
| 単語、12 | Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur lorem sunt metus. |
| 文、2 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Velit nostrud et occaecat adipiscing voluptate integer. |
| リスト項目、3 | - Lorem ipsum dolor sit amet、次に - Cillum sagittis pariatur occaecat ut velit、次に - Et occaecat adipiscing voluptate |
HTML タグで囲むをオンにすると、3つのリスト項目は次のようになります。
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Cillum sagittis pariatur occaecat ut velit</li>
<li>Et occaecat adipiscing voluptate</li>
</ul>仕組み
ジェネレーターは、伝統的な lorem ipsum で使われるラテン語およびラテン語風の100語のリストから、単語をランダムに選びます。ランダムな長さの文を作り、最初の単語の頭文字を大文字にして、各文をピリオドで終えます。乱数にはシード付きの生成器を使っているので、新しいテキストを生成を押して新しいシードが選ばれるまでは、同じ設定なら常に同じテキストになります。そのため、個数を調整している間にテキストがころころ変わることはありません。
Lorem ipsum で始めるがオンの場合、最初の文は必ずおなじみの書き出しになり、多くの人がひと目でダミーテキストだとわかります。
ダミーテキストを使うコツ
- 実際の長さに合わせる。 本番の商品説明が50単語程度なら、3段落ではなく50単語を生成してください。結果の下の数字で確認できます。
- 長い内容と短い内容の両方を試す。 あるカードには1文だけ、別のカードには3段落を入れて、レイアウトがどう対応するかを確認します。
- 公開前に差し替える。 公開前にページ内を「lorem」で検索してください。公開ページに残ったダミーテキストは雑な印象を与え、検索エンジンにインデックスされることもあります。
- アクセシビリティのテストに注意。 スクリーンリーダーは lorem ipsum も読み上げようとします。ユーザーテストでは本物の文章を使ってください。
- ランダムなラテン語ではなく同じフレーズの繰り返しが必要なら、テキスト繰り返しツールで好きな文章を好きな回数だけ複製できます。
本物の文章が届いたら、文数カウンターに貼り付けて長さを確認できます。完成した記事の内容を視覚的にまとめたい場合は、ワードクラウド作成ツールを試してください。
Lorem ipsum を入手するほかの方法
Microsoft Word：新しい行に =lorem() と入力して Enter を押すと、ラテン語のダミーテキストが挿入されます。=lorem(3,5) なら5文ずつの3段落になります。=rand() を使うと、ラテン語ではなく普通の文章のサンプルが挿入されます。
Google ドキュメント：組み込みのコマンドはないため、多くの人はこのようなジェネレーターからテキストを貼り付けています。
コードエディター：VS Code など Emmet に対応したエディターでは、lorem と入力して Tab を押すと1段落、lorem20 なら20単語が入ります。
Figma などのデザインツールには、ダミーテキストのオプションやプラグインが用意されていることがよくあります。