ダミーテキストを入れるFigmaプラグインとは？ワイヤーフレーム・デザイン確認を効率化する使い方
FigmaでワイヤーフレームやWebデザインを作っていると、よく使うのが「ダミーテキスト」です。
ダミーテキストとは、まだ正式な文章が決まっていない段階で仮に入れておく文章のことです。
例えば、FigmaでLPやコーポレートサイトのデザインを作るとき、
「ここに見出しが入る」
「ここに本文が2〜3行入る」
「ここにお客様の声が入る」
「ここにプロフィール文が入る」
「ここにFAQの回答文が入る」
というように、文章量の目安を確認したい場面があります。
このとき、毎回手入力で「テキストが入ります。テキストが入ります。」と書いていると時間がかかります。
また、短い仮テキストだけでデザインを作ってしまうと、実際の文章を入れたときにレイアウトが崩れることもあります。
そこで便利なのが、Figmaでダミーテキストを入れるプラグインです。
Figma公式ブログでも、Lorem Ipsumのような仮テキストだけでなく、名前・電話番号・住所・画像など、
より実際に近いデータを使うことで、UIが現実の内容に近い状態で確認しやすくなると紹介されています。
この記事では、Figmaでダミーテキストを入れるプラグインについて、使うメリット、代表的なプラグイン、
実務での使い方、注意点までわかりやすく解説します。
ダミーテキストとは？
ダミーテキストとは、正式な文章がまだ決まっていない段階で、一時的に入れておく仮の文章です。
デザイン制作では、文章がないとレイアウトの確認ができません。
例えば、見出しだけを置いても、本文がどのくらいの量になるかがわからなければ、余白やカードの高さを判断しづらくなります。
そのため、以下のような場面でダミーテキストを使います。
ワイヤーフレーム作成
LPの構成確認
カードデザインの確認
ブログ一覧の確認
お客様の声のレイアウト確認
FAQの文章量確認
プロフィール欄の確認
フォーム周りの説明文確認
特にWeb制作では、文章量によってデザインの見え方が大きく変わります。
見出しが1行なのか2行なのか。
本文が2行なのか5行なのか。
カード内のテキスト量が揃っているのか、バラつきがあるのか。
これらを確認するために、ダミーテキストはとても重要です。
なぜダミーテキスト用プラグインが便利なのか
Figmaでは、普通にテキストツールを使って文章を入力できます。
しかし、毎回手入力でダミーテキストを作るのは非効率です。
例えば、以下のような作業があるとします。
カードを6枚作る
それぞれに見出しと本文を入れる
お客様の声を3件入れる
FAQを5件入れる
プロフィール文を4人分入れる
これをすべて手入力で作ると時間がかかります。
さらに、同じ文章をコピーして使い回すと、文章量の差が確認しづらくなります。
本番では文章の長さがバラバラになることが多いため、仮テキストもある程度バリエーションを持たせた方が、レイアウト崩れに気づきやすくなります。
Figma公式ブログでも、複雑なデザイン内の多くのテキストボックスへ手作業でコンテンツを入れるのは時間がかかるため、データ入力系のプラグインが役立つと説明されています。
つまり、ダミーテキスト用プラグインを使うメリットは、単なる時短だけではありません。
実際の文章に近い状態で、デザインの耐久性を確認できることが大きなメリットです。
代表的なプラグイン1：Content Reel
Figmaでダミーコンテンツを入れるプラグインとして、よく名前が出るのが「Content Reel」です。
Content Reelは、テキストだけでなく、名前、住所、画像、アイコンなど、さまざまな仮コンテンツをデザインに入れられるプラグインです。
Figmaのベストプラクティス記事でも、Content Reelはコピー、画像、アイコンなどをデザインに入れられるプラグインとして紹介されており、選択したレイヤーに必要なコンテンツをクリックして追加できると説明されています。
Content Reelが便利なのは、単なるLorem Ipsumだけではなく、より実際のUIに近い内容を入れられる点です。
例えば、以下のような用途に向いています。
名前を入れる
住所を入れる
メールアドレス風のテキストを入れる
プロフィール文を入れる
画像を入れる
アイコンを入れる
カードの仮データを作る
WebサイトやアプリUIでは、単なる長文だけでなく、名前、肩書き、レビュー文、商品名、住所、日付など、さまざまな情報が入ります。
Content Reelを使えば、こうした仮データを短時間で入れられるため、UIの見え方を確認しやすくなります。
代表的なプラグイン2：Lorem Ipsum系プラグイン
もっとシンプルにダミーテキストだけを入れたい場合は、Lorem Ipsum系のプラグインも便利です。
Lorem Ipsumとは、デザインや印刷物の仮文章として昔から使われているダミーテキストです。
文章の意味を読ませるためではなく、文字量や見た目のバランスを確認するために使います。
Figmaでも、Lorem Ipsumを生成するプラグインはいくつかあります。
使い方はシンプルで、テキストレイヤーを選択して、プラグインを実行すると、指定した長さのダミーテキストを入れられます。
Lorem Ipsum系プラグインは、以下のような場面に向いています。
本文量を確認したい
カード内の文章量を仮で入れたい
ブログ詳細ページの本文を確認したい
LPの説明文を仮で入れたい
文章の内容より見た目を確認したい
ただし、Lorem Ipsumは日本語の文字量確認には向かない場合があります。
英語と日本語では、文字の幅や改行位置が違うためです。
日本語サイトを作る場合は、日本語の仮テキストを入れた方が、より実際に近い見え方を確認できます。
代表的なプラグイン3：日本語ダミーテキスト系プラグイン
日本語サイトを作る場合は、日本語のダミーテキストを入れられるプラグインが便利です。
例えば、日本語の名前、住所、文章、見出しなどを入れられるプラグインがあります。
日本語サイトでは、英語のLorem Ipsumを入れても、実際の見た目とは違って見えることがあります。
理由は、日本語と英語では以下が違うからです。
文字幅
改行位置
行間の見え方
文章の密度
見出しの長さ
例えば、英語のダミーテキストでは自然に見えていたカードも、日本語を入れると2行になったり、ボタンの文言が長くなって折り返されたりすることがあります。
そのため、日本語サイトや日本語LPを作る場合は、日本語のダミーテキストで確認するのがおすすめです。
特に以下のようなデザインでは、日本語ダミーテキストが役立ちます。
サービス紹介
お客様の声
FAQ
ブログカード
プロフィール
採用ページ
コーポレートサイト
LP
日本語サイトを作るなら、英語のLorem Ipsumだけで済ませず、日本語の仮文章でも確認しましょう。
最近はAIによるダミーコンテンツ生成も便利
最近では、単なるLorem Ipsumではなく、AIで文脈に合った仮コンテンツを作る方法も増えています。
Figma公式のAI content fillerでは、選択したフレームやテキストレイヤーに対して、商品名、レビュー、メールアドレス、日付など、必要な内容を指定して生成できると説明されています。さらに、AI生成のフィラー文は文脈やトーンに合わせられるため、通常のLorem Ipsumよりも実際のコンテンツに近い状態でレイアウト確認ができると案内されています。
これは実務ではかなり便利です。
例えば、以下のように使えます。
介護施設向けサイトのお客様の声を3件作る
美容サロンのFAQを5件作る
不動産サイトの物件説明文を仮で作る
ECサイトの商品名と説明文を作る
採用サイトの社員コメントを仮で作る
AIで作った仮テキストを使うと、デザインの確認がより現実に近くなります。
ただし、AIで作った文章はそのまま本番公開しない方が安全です。
あくまで仮テキストとして使い、正式な原稿はクライアント確認やライター作成のものを使いましょう。
ダミーテキストを入れる基本の流れ
Figmaでダミーテキストプラグインを使う基本の流れは、以下のようになります。
1. Figmaでテキストレイヤーを作る
2. ダミーテキストを入れたいレイヤーを選択する
3. プラグインを起動する
4. 入れたいテキストの種類を選ぶ
5. 必要に応じて文字量や種類を調整する
6. デザイン上で見え方を確認する
Content Reelのようなプラグインでは、テキストだけでなく画像やアイコンも入れられる場合があります。
その場合は、対象のレイヤーやフレームを選び、入れたいコンテンツをクリックして反映します。
Figma上でプラグインを探す場合は、リソースメニューから検索できます。FigmaのUXライティングガイドでも、Shift + IでResourcesメニューを開き、プラグイン、ウィジェット、チームコンポーネントを検索できると紹介されています。
実務での使い方1：カードデザインの確認
ダミーテキストプラグインが特に便利なのが、カードデザインの確認です。
例えば、ブログ一覧やサービス一覧、お客様の声などでは、複数のカードが並びます。
カードには、見出し、本文、日付、カテゴリ、画像などが入ることが多いです。
このとき、すべて同じ文章を入れてしまうと、本番で文章量が変わったときの崩れに気づきにくくなります。
例えば、以下のように文章量に差をつけると確認しやすくなります。
短い見出し
2行になる見出し
長めの説明文
短い説明文
画像あり
画像なし
カードの高さを揃えるのか。
本文の行数を制限するのか。
ボタン位置を揃えるのか。
このような判断がしやすくなります。
実務での使い方2：FAQの確認
FAQは、ダミーテキストとの相性が良いパーツです。
FAQでは、質問文と回答文の長さがバラバラになりやすいです。
例えば、
短い質問
長い質問
1行の回答
5行以上の回答
箇条書きの回答
などがあります。
短いダミーテキストだけでFAQを作ると、本番の文章を入れたときに余白が崩れることがあります。
Figma上で複数パターンの回答文を入れておくと、アコーディオンやdetailsタグで実装する場合の見え方も確認しやすくなります。
特にスマホ版では、FAQの文章が長いと縦にかなり伸びます。
PC版だけでなく、スマホ版でも確認しましょう。
実務での使い方3：お客様の声の確認
お客様の声も、文章量がバラつきやすいコンテンツです。
実務では、以下のような差が出ます。
短い感想
長い感想
名前あり
肩書きあり
顔写真あり
会社名あり
お客様の声カードを作る場合、ダミーテキストを入れて文章量の違いを確認しておくと安心です。
特に、カードを横並びにする場合は、文章量の違いで高さがバラバラになります。
この場合、
カード高さを揃える
本文に最大行数を設定する
高さを揃えず自然に並べる
スライダーにする
など、実装方針にも関係します。
ダミーテキストは、単に見た目を埋めるだけでなく、実装方針を考える材料にもなります。
実務での使い方4：LPの文章量確認
LPでは、セクションごとに文章量が重要です。
特に以下の部分は、文章量によってデザインの印象が大きく変わります。
ファーストビューのキャッチコピー
悩みセクション
サービス説明
選ばれる理由
料金説明
FAQ
CTA周りの補足文
仮テキストを入れずにデザインすると、実際の原稿を入れたときにレイアウトが崩れることがあります。
例えば、ファーストビューのキャッチコピーが2行になるだけで、画像やボタンの位置が変わる場合があります。
サービス説明文が長くなると、カードの高さが揃わないこともあります。
そのため、LP制作では、早い段階でダミーテキストを入れて文章量を確認することが大切です。
ダミーテキストを使う時の注意点
ダミーテキストは便利ですが、使い方には注意が必要です。
1. ダミーテキストのまま公開しない
当たり前ですが、ダミーテキストは仮の文章です。
本番公開前には、必ず正式な原稿に差し替えましょう。
特にWordPress化やコーディング時に、ダミーテキストが残ってしまうことがあります。
公開前チェックで必ず確認しましょう。
2. 短すぎる文章だけで確認しない
短い文章だけを入れると、実際の文章量に耐えられないデザインになることがあります。
見出しや本文は、短いパターンと長いパターンの両方で確認しましょう。
3. 日本語サイトは日本語で確認する
日本語サイトなのに英語のLorem Ipsumだけで確認すると、改行や文字密度が実際と変わります。
日本語サイトでは、日本語ダミーテキストを使うのがおすすめです。
4. 本文量を想定しておく
正式な原稿が入る予定なら、だいたい何文字くらいになるかを想定しておきましょう。
例えば、カード本文は60文字程度、FAQ回答は100〜200文字程度など、目安を決めておくとデザインしやすくなります。
5. AI生成文は事実として扱わない
AIで作った仮テキストは便利ですが、内容が正しいとは限りません。
料金、実績、効果、保証、法律・医療・金融系の表現などは、仮でも注意が必要です。
本番では必ず確認済みの原稿を使いましょう。
プラグインを使わない方法もある
ダミーテキストは、プラグインを使わなくても作れます。
例えば、ChatGPTで仮テキストを作って、それをFigmaに貼り付ける方法もあります。
以下のように依頼できます。
Web制作会社のLPに使う仮テキストを作ってください。
以下のセクションごとに、見出しと本文を作ってください。
1. ファーストビュー
2. よくある悩み
3. サービス内容
4. 選ばれる理由
5. FAQ
6. CTA
この方法のメリットは、文脈に合った仮文章を作れることです。
ただし、Figma内で一括入力するにはプラグインの方が便利な場合もあります。
つまり、
大量のテキストを素早く入れたい：プラグイン
文脈に合った仮文章を作りたい：ChatGPT
Figma内で直接生成したい：Figma AI系機能
という使い分けがおすすめです。
おすすめの使い分け
ダミーテキストを入れる方法は、目的によって使い分けるのがよいです。
単純な仮本文を入れたい：Lorem Ipsum系プラグイン
名前・住所・画像なども入れたい：Content Reel
日本語サイトを確認したい：日本語ダミーテキスト系プラグイン
文脈に合った仮文章が欲しい：ChatGPT
Figma内でリアルな仮データを作りたい：AI content filler系機能
実務では、1つの方法だけにこだわる必要はありません。
ワイヤーフレーム段階ではLorem Ipsum。
日本語サイトのデザイン確認では日本語ダミーテキスト。
LPの提案段階ではChatGPTで仮コピー。
UIテストではContent ReelやAIフィラー。
このように使い分けると、効率よく確認できます。
コーディング視点で見るダミーテキストの重要性
コーダー目線でも、ダミーテキストは重要です。
なぜなら、文章量によってHTML/CSSの設計が変わるからです。
例えば、カード内の文章が長くなる場合、以下を考える必要があります。
高さを揃えるか
本文を何行で省略するか
ボタン位置を下に揃えるか
flexやgridで管理するか
スマホでどのように積むか
FAQの回答文が長い場合は、アコーディオンの開閉や余白を考える必要があります。
ブログカードのタイトルが長い場合は、2行で省略するのか、自然に伸ばすのかを決める必要があります。
つまり、ダミーテキストを入れることは、デザイン確認だけでなく、コーディング設計にもつながります。
Figmaでダミーテキストを使って長文パターンを確認しておくと、実装時の手戻りを減らせます。
実務でのチェックリスト
Figmaでダミーテキストを入れたら、以下を確認しましょう。
短い文章でも崩れないか
長い文章でも崩れないか
見出しが2行になっても問題ないか
カードの高さはどうなるか
スマホ版で読みやすいか
CTAボタンの文言が長くても入るか
FAQの回答が長くても余白が自然か
お客様の声の文章量に対応できるか
ダミーテキストが本番に残らないよう管理できているか
このチェックをするだけで、デザインと実装の精度が上がります。
まとめ
Figmaでダミーテキストを入れるプラグインは、ワイヤーフレームやWebデザイン作成を効率化する便利なツールです。
ダミーテキストを使うことで、文章量、余白、カードの高さ、スマホ表示、FAQの長さ、CTAボタンの見え方などを早い段階で確認できます。
代表的な方法としては、以下があります。
Content Reel
Lorem Ipsum系プラグイン
日本語ダミーテキスト系プラグイン
ChatGPTで作る仮テキスト
FigmaのAI content filler系機能
Content Reelは、テキストだけでなく画像やアイコンなども入れられるため、UIを実際に近い状態で確認しやすいプラグインです。Figmaのベストプラクティス記事でも、Content Reelはコピー、画像、アイコンなどをデザインに入れられるツールとして紹介されています。
また、AIによるフィラーコンテンツは、通常のLorem Ipsumよりも文脈に合った仮コンテンツを作れるため、実際の内容に近い状態でレイアウト確認がしやすくなります。
ただし、ダミーテキストはあくまで仮の文章です。
本番公開前には、必ず正式な原稿に差し替える必要があります。
特に日本語サイトでは、英語のLorem Ipsumだけで確認するのではなく、日本語の仮テキストを使って、改行や文字量、スマホ表示まで確認しましょう。
Figmaでダミーテキストをうまく使えるようになると、デザインの確認精度が上がり、実装時の手戻りも減らせます。
ワイヤーフレームやLP制作、カードデザイン、FAQ、お客様の声など、文章量が関係するパーツでは、ぜひダミーテキスト用プラグインを活用してみてください。
