ダミーテキスト活用ガイド｜Webデザイン・モック作成の必須知識

Webデザインやモック作成の際、必ず必要になるのがダミーテキストです。

「とりあえずサンプル文を入れておきたい」「レイアウトを確認したい」そんな時に活躍するダミーテキストですが、実は使い方にはコツがあります。

この記事では、ダミーテキストの歴史から、日本語とLorem ipsumの使い分け、デザインワークフローでの活用法まで徹底解説します。

ダミーテキストとは？

ダミーテキストとは、デザインやレイアウトの確認用に使用する仮の文章です。実際のコンテンツが用意される前の段階で、文字が入る位置やバランスを確認するために使用します。

なぜダミーテキストを使うのか？

• レイアウト確認：文章が入った時の見た目をシミュレーション
• デザイン評価：内容に気を取られずデザインに集中できる
• コミュニケーション：クライアントへの提案時の視覚的説明
• 開発テスト：フロントエンドのUIコンポーネントの動作確認

Lorem ipsumの歴史と意味

ダミーテキストの代名詞といえば「Lorem ipsum」です。デザイン業界では500年以上の歴史を持つ、由緒あるダミーテキストです。

起源は古代ローマ

Lorem ipsumの原典は、紀元前45年頃に古代ローマの哲学者キケロが書いた「De finibus bonorum et malorum（善と悪の究極について）」という哲学書です。

ただし、現在使われているLorem ipsumは原文を改変したもので、文法的には意味を成しません。これは意図的な変更で、「意味がわからない」ことがダミーテキストとして機能する理由です。

印刷業界での普及

1500年代、印刷業者が活字サンプルとしてLorem ipsumを使い始めました。以来、活版印刷、写植、DTP、そしてWebデザインへと、500年以上にわたって使われ続けています。

年代	出来事
紀元前45年頃	キケロが原典となる哲学書を執筆
1500年代	印刷業者が活字サンプルとして使用開始
1960年代	Letraset社がLorem ipsumシートを発売
1980年代	PageMakerなどのDTPソフトに搭載
現在	Webデザインの標準ダミーテキストに

日本語ダミーテキストの必要性

Lorem ipsumは世界標準ですが、日本語サイトのデザインにはLorem ipsumだけでは不十分です。

日本語とLatin文字の違い

特徴	Latin文字（英語）	日本語
文字幅	プロポーショナル（可変）	等幅（固定）
単語間	スペースで区切り	区切りなし
改行	単語の途中で折り返さない	どこでも折り返し可能
行間	狭め（1.2〜1.5）	広め（1.5〜2.0）

日本語ダミーテキストの種類

• 文学風：青空文庫のような文体。長文の本文エリアに適合
• ビジネス風：報告書やメールの文体。BtoBサイトに
• ニュース風：新聞記事のような客観的文体。メディアサイトに
• Web記事風：ブログやレビューの親しみやすい文体
• 会話風：セリフ形式。チャットUIやFAQに

スタイル別の使い分け

ダミーテキストは、実際のコンテンツに近いスタイルを選ぶことが重要です。

コーポレートサイト

企業サイトにはビジネス文書風のダミーテキストが適しています。「弊社」「ご検討」などのビジネス用語が含まれていると、実際の文章が入った時のイメージがつかみやすくなります。

ブログ・メディアサイト

Web記事風やニュース風がおすすめ。段落の長さ、見出しの頻度、リストの使い方など、実際の記事構成に近い形でテストできます。

ECサイト

商品説明には短めのWeb記事風が適しています。特徴を箇条書きにしたり、「おすすめ」「人気」などのワードを含めると、より実践的なテストができます。

チャット・FAQ

会話風のダミーテキストを使いましょう。吹き出しUIや質問・回答形式のレイアウトを正確にテストできます。

デザインワークフローでの活用

Figma / Sketch での使い方

1. テキストボックスを作成
2. ダミーテキスト生成ツールでテキストを生成
3. コピー＆ペーストで貼り付け
4. フォントサイズ・行間を調整してレイアウト確認

フロントエンド開発での使い方

HTMLに直接貼り付ける場合は、HTMLタグ付き出力が便利です。<p>タグで段落が分かれ、<h2>で見出しが入るため、CSSのスタイルがすぐに確認できます。

<h2>見出しテキスト</h2>
<p>山路を登りながら、こう考えた。智に働けば角が立つ。
情に棹させば流される。意地を通せば窮屈だ。
とかくに人の世は住みにくい。</p>
<p>住みにくさが高じると、安い所へ引き越したくなる。
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</p>

WordPressでの使い方

テーマ開発時には、投稿や固定ページにダミーテキストを入れてデザインを確認します。特に以下のケースをテストしましょう：

• タイトルが極端に長い/短い場合
• 本文が1段落しかない場合
• 本文が非常に長い場合
• 画像やリストが混在する場合

ベストプラクティス

1. 実際のコンテンツに近い文字数を使う

見出しは20〜40文字、本文段落は100〜200文字が一般的です。実際のコンテンツに近い文字数でテストすることで、より正確なレイアウト確認ができます。

2. 複数パターンでテストする

最短・最長・平均的な長さの3パターンでレイアウトを検証しましょう。特に「極端に長い文章」での表示崩れ確認が重要です。

3. 日本語とLorem ipsumを併用

国際的なプロジェクトや、英語コンテンツも扱うサイトでは、両方でテストしておくと安心です。

4. バージョン管理に含めない

ダミーテキストを含むデザインファイルやHTMLは、Gitなどのバージョン管理では明確にマークしておきましょう。「WIP」「dummy」などのラベルを付けると良いです。

注意点・よくある失敗

本番公開前の置き換え忘れ

最もありがちな失敗が、ダミーテキストが残ったまま本番公開してしまうこと。「Lorem ipsum」が表示されているサイトは意外と多く、プロフェッショナルさを損ないます。

クライアントへの説明不足

デザインカンプをクライアントに見せる際、ダミーテキストであることを説明しないと「この文章で良いの？」と誤解されることがあります。「仮の文章です」と明記しましょう。

意味のある文章を使ってしまう

「サンプルテキストサンプルテキスト...」のような繰り返しや、意味のある短い文を使うと、デザイン評価の妨げになります。適切なダミーテキストを使いましょう。

まとめ

ダミーテキストは、デザイン・開発ワークフローに欠かせないツールです。ポイントをまとめると：

• Lorem ipsumは500年の歴史を持つ国際標準のダミーテキスト
• 日本語サイトには日本語ダミーテキストも併用が必要
• スタイルは実際のコンテンツに近いものを選ぶ
• 複数パターン（短・中・長）でレイアウトをテスト
• 本番公開前に必ずダミーテキストを置き換える

当サイトのダミーテキスト生成ツールを使えば、6種類のスタイルから用途に合ったダミーテキストを簡単に生成できます。ぜひお試しください！