ウェブ制作における「ダミーデータの扱い方」
ウェブサイトを制作するとき、原稿や写真がすべて揃ってから作業を始められるとは限りません。
仮の文章や画像など、いわゆる「ダミーデータ」を使って進めることもあります（むしろ、すべての情報が揃ってから始められるケースの方が少ないと思います）。
しかし、適当なデータだけで確認していると、本番の文章や画像を入れたときに、改行や余白が想定と変わることがあります。
ダミーを差し替えずに公開してしまうこともあります。
今回はデザインや動作確認に使うダミーデータの用意の仕方と、公開前に確認しておきたいことをまとめます。
ダミーテキストの扱い方
ダミーだと分かる状態 vs 本番に近い状態
たまに見かけるのが「サンプルテキストサンプルテキスト……」のようなダミーテキストです。
しかし、これだけでは、実際の文章を入れたときの改行や余白を確認しにくくなります。
どれくらいの文字量になるかも含めて、本番に近い状態で確認した方が良いです。
一方で、本番に近づけすぎると、ダミーテキストだと分からずに差し替えを忘れてしまうことがあります。
個人的にオススメなのは、文頭に「【ダミー】」のような後から検索できる目印を入れ、あとは本番に近い文字数の文章を入れておく方法です。
公開前に目印で検索すれば、差し替え忘れがないか確認できます。
見出しでは目印が改行位置に影響しますが、本文のダミーテキストならこの方法が良いんじゃないかと思っています。
Lorem ipsumの活用
欧文のダミーテキストには、「Lorem ipsum（ローレム・イプサム）」がよく使われます。
ラテン語の文章をもとに一部を改変したもので、下記のように始まります。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
ただ、Lorem ipsumは英語なので、日本語サイトの場合は日本語の文章で確認する必要があります。
その場合、著作権の保護期間が満了した小説が使われることもあります。
例えば、宮沢賢治の『ポラーノの広場』の一節「あのイーハトーヴォのすきとおった風……」や、夏目漱石の『吾輩は猫である』などです。
最近はAIで簡単にダミーテキストを作れるので、わざわざこうした文章を使う必要はないのでは？とも思ってしまいます。
ただ、中途半端に本番らしい文章を入れてしまうと、デザインよりも文章の内容に意識が向いてしまうことがあります。
特にクライアント確認時にノイズになってしまうので、配置や配色などを確認してもらいたい段階では、Lorem ipsumや、よく知られた小説の一節など、明らかにダミーと分かる文章を使う方が話がそれにくくなります。
ダミー画像・未購入画像の扱い方
本番で縦長の人物写真が入るのに、横長の風景写真だけで確認すると、差し替えたときに顔が切れる場合があります。
仮画像も、用途に近い縦横比や被写体の位置を選びましょう。
また、購入前のウォーターマーク付きの素材を使う場合は、正式な素材への差し替えが必要だと分かる状態にしておきます。
背景を暗く加工すると透かしが目立たなくなることもあるので、透かしだけを目印にしない方が良いでしょう。
私の場合はKeyboard MaestroでImageMagickというターミナルで動作する画像加工ツールを使って、画像にダミー用の目印を追加できるようにしています。
かなり長いマクロに見えますが、やっていることはあらかじめ用意したラベル用の画像を、Finderで選択している対象の画像の真ん中に配置しているだけです。
複数画像を選択してショートカットキーで一気に処理できるので便利です。
Figmaなら、ダミー画像用のコンポーネントを作り、正式な素材へ差し替えたら目印をオフにできるようにしておく方法もあります。
複数パターンの確認
短い文章と長い文章を混ぜる
記事一覧やサービス紹介のカードは、同じ長さの文章を並べるとキレイに揃って見えます。
実際の運用で長さが変わるなら、ダミーにも違いを付けておきたいところです。
- 1行で収まるタイトルと、2〜3行になるタイトル
- 短い説明文と、想定する上限に近い説明文
- 長い英単語やURLを含む文章
その上で、タイトルの行数を制限するのか、カードの高さを揃えるのかなどを決めます。
可変項目では0件や未入力の状態も確認する
可変する項目の場合、0件や未入力の状態も確認する必要があります。
例えば記事一覧ページの0件表示や、画像が登録されていない場合の表示など。
他にも文字量が多い場合にどのように表示されるかも考えておく必要があります。
下記のように、複数パターンのデザインやデータを用意して確認しましょう。
| 対象 | 用意するデータ | 確認すること |
|---|---|---|
| 一覧・検索結果 | 0件・1件・複数件 | 空のときの案内や、少ない件数での配置 |
| ページ送り | 1ページに収まる件数・次ページが必要な件数 | ページ送りの表示と移動 |
| 任意入力の項目 | 画像なし・説明文なし・タグなし | 不要な枠や余白が残らないか |
| 記事本文 | 見出し・リスト・リンク・画像を含む文章 | CMSから出力した内容の見え方 |
デザインではすべての項目を埋めていても、管理画面で未入力にできるなら、その状態の表示も考える必要があります。
必須入力にするのか、空ならその部分を表示しないのかも決めておきましょう。
まとめ
ダミーデータを少し変えるだけで、長いタイトルや画像がない場合など、運用中に起こりそうな表示も確認できます。
原稿待ちの間に、こうしたパターンを見ておくと後から調整する箇所を減らせます。
一方、本番に近い内容を使うほど、仮のまま残っていることは分かりにくくなります。
文章にも画像にもダミーだと分かる目印を付けておくと、公開前に差し替え箇所を探し直す手間が減ります（公開前はバタつく場合もあるので、抜け漏れがないように確認事項をチェックリスト化し、ダミーのまま公開することがないようにしましょう）。
ダミーデータは何となく用意してしまいがちですが、確認する内容に合わせて選び、差し替えまで制作フローに含めておくと事故の確率は下がります。
