サイト制作時にまだ掲載内容がちゃんと決まっていなかったり校正中だったりすると、見た目をそれっぽくしたり全体のバランスを見るためにとりあえずでダミーのテキストや画像を入れることが多いですが、それらを手っ取り早く用意したい時に便利なツールを紹介します。 よくあるジェネレータツールだけでなく、疑似個人情報の生成やアバター画像を生成してくれるといったような少し変わったタイプのものもあります。

September 1, 2014 追記

  • 2. 画像」に「Unsplash It」を追記しました。
  • 2. 画像」でクローズしていたサイトを削除しました。

テキスト

文字の大きさ・字間・行間などを確認するためにダミーテキストを使いたい時に便利なツールやエントリーです。
文字の半角・全角の有無や出力する文字数などを任意で設定できるものや文章だけでなくptableといったHTMLのマークアップ付きでコピーできるものもあります。

  • すぐ使えるダミーテキスト - 日本語 Lorem ipsum
    日本語用のダミーテキストジェネレータで、夏目漱石「私の個人主義」、宮沢賢治「セロ弾きのゴーシュ」、Wikipedia:引用のガイドライン(部分)、自分で指定の4種類から選択できます。
    また、パラグラフ毎の文字数、空行、アルファベットや記号の半角・全角指定などといった指定を行うこともできます。
  • Lorem Ipsum - All the facts - Lipsum generator
    あらゆる分野で使用されているダミーテキスト「Lorem ipsum」を生成できるジェネレータで、こちらもパラグラフやワード数などの設定が可能です。
  • HTML-Ipsum
    こちらはダミーテキストをHTML付きでコピーすることができます。
    最も利用しそうなパラグラフは長いものと短いもので用意されていたり、他にもリスト・テーブル・ナビゲーションなど、マークアップ時に使用するものがいろいろと用意されています。
  • Dummy Text Generator
    「Lorem ipsum」を始めとする様々なダミーテキストを生成できるジェネレータで、テキストの種類やワード数といったオプションを選択できます。
    また、「Dummy HTML snippets for webdesigners」ではHTML-Ipsumと同様にHTMLのマークアップ付きのダミーテキストをコピーすることができ、見出しやパラグラフはもちろん、リストやテーブルなども用意されています。
  • WEB制作時に役立つ!ダミーテキストに使える定型文まとめ | 株式会社LIG
    ジェネレータツールではないですが、会社情報・採用情報・プライバシーポリシーなど、サイト制作時によく作成するページで使える様々な定型文がまとめられているエントリー。
    個人的にはあからさまにダミーとわかる内容ではなくなってしまうので、見落す可能性が出てきてしまうなどの理由であまり使わないんですが、たとえダミーだとしても実際に近いものを使用したい場合は便利です。

個人的によく使うやつ

以前はこんな感じのダミーテキストを出力してくれて個人的に一番よく利用しているツールがあったのですがクローズしてしまっていたので、以下はその代替として自分がよく使用するダミーテキストのコピペ用一覧です。

<p>この文章はダミーテキストです。</p>
<p>
  この文章はダミーテキストです。この文章はダミーテキストです。この文章はダミーテキストです。この文章はダミーテキストです。この文章はダミーテキストです。<br />
  この文章はダミーテキストです。この文章はダミーテキストです。この文章はダミーテキストです。この文章はダミーテキストです。この文章はダミーテキストです。<br />
  この文章はダミーテキストです。この文章はダミーテキストです。
</p>

<p>この部分には○○文字ぐらいのテキストが入ります。</p>

<p>この文章はダミーテキストです。文字の大きさ・字間・行間などを確認するために入れています。</p>

<p>
  この文章はダミーテキストです。文字の大きさ・字間・行間などを確認するために入れています。この文章はダミーテキストです。文字の大きさ・字間・行間などを確認するために入れています。この文章はダミーテキストです。文字の大きさ・字間・行間などを確認するために入れています。<br />
  この文章はダミーテキストです。文字の大きさ・字間・行間などを確認するために入れています。この文章はダミーテキストです。文字の大きさ・字間・行間などを確認するために入れています。この文章はダミーテキストです。文字の大きさ・字間・行間などを確認するために入れています。<br />
  この文章はダミーテキストです。文字の大きさ・字間・行間などを確認するために入れています。
</p>

<ul>
  <li>リスト 01</li>
  <li>リスト 02</li>
  <li>リスト 03</li>
  <li>リスト 04</li>
  <li>リスト 05</li>
</ul>

<ol>
  <li>リスト 01</li>
  <li>リスト 02</li>
  <li>リスト 03</li>
  <li>リスト 04</li>
  <li>リスト 05</li>
</ol>

画像

テキストと同様、まだ画像の用意ができていない時に全体のバランスを見る目的などで入れておくことが多いダミー画像を手軽に生成できるツールです。
あからさまにダミーとわかるようなものからそれっぽい画像を手っ取り早く使用できるものまであります。
また、紹介しているツールのほとんどが画像を出力するURLを変更するだけでいろいろな画像へ変更できるというものなので、お気に入りのツールを決めてサイズやカラーなどの変更方法をひと通り覚えておけば、わざわざサイトにいかないで更に容易にダミー画像を用意することができます。

ただ、これらのツールは便利ではあるものの、たまに表示するまでにすごく時間がかかったり最悪の場合画像が表示されないなんてこともあるので、これから頻繁に利用しようと思った方はお気に入りのものをひとつではなく幾つか覚えておくことをお勧めします。

  • Unsplash It
    高品質なフリー写真素材の配布サイトとして利用している人も多いと思う「Unsplash」のイメージを使用したサービスで、サイズ指定やランダム表示はもちろん、複数イメージの指定、ブラーエフェクト指定、Cropなども可能です。
  • Dynamic Dummy Image Generator
    パッと見で明らかにダミーだとわかるようにしたいときに便利な生成ツールで、サイズ・背景色・テキストカラー・フォーマットを選択して表示させることができます。
    デフォルトでは画像にサイズ表示がされるようになっており、任意でテキストを表示(日本語可)させることもできます。
  • Placehold.it
    同じくパッと見で明らかにダミーだとわかるようにしたい時に便利な生成ツールで、サイズ・背景色・テキストカラー・フォーマットを任意で指定して表示させることができますし、任意のテキストを表示(日本語不可)させることもできます。
  • Fake images please?
    サイズ・背景色・テキストカラーなどを任意で指定して表示させることができますし、任意のテキストを表示(日本語不可)させることもできます。
    また、表示させるフォントの種類を指定することもでき、bebas・lobster・museo・yanoneの4種類のフォントを表示させるテキストなどに適用させることができます。
  • Placehold.jp
    こちらも同じくサイズ・背景色などを選択して表示させることができるもので、国産ツールなので日本語も問題なく使用できます。
    日本語なのでいろいろわかりやすいというのはもちろん、表示させる文字サイズの指定ができたり、予めよく使用されるサイズがプリセットで用意されていたりと機能的な面でも便利なものが沢山あります。
  • PlaceIMG
    任意でサイズ・カテゴリー・フィルターを指定することで写真を使用したダミー画像を生成してくれます。
    カテゴリーは全5種類、フィルターは白黒とセピアの2種類となっており、それぞれ選択しなかった場合はカテゴリーランダムでカラー画像が表示されます。
  • lorempixel
    「PlaceIMG」と同様で、任意でサイズ・カテゴリー・フィルターを指定することで写真を使用したダミー画像を生成してくれます。
    カテゴリーは全13種類、フィルターはカラーとグレーの2種類となっており、カテゴリーを選択後に「color image」か「gray image」どちらかを選択すると画像が出力されます。
  • {placekitten}
    猫好きにはたまらない、猫を使用したダミー画像を生成してくれるツール。
    サイズ指定可能で、カラーもデフォルトではカラーですが、サイズの前に「g」を入れれば白黒画像で表示できます。

その他

上で紹介してきたテキストや画像のダミー生成ツールに比べると使用頻度は少ないですが、他にも知っておくと地味に便利なものが幾つかあるので紹介します。

  • User Inter Faces
    フォーラムやユーザー参加型のWebサイトでよく表示されるのを見かけるアバター画像一覧で生成してくれるツールです。
    今まで紹介してきた画像生成ツールとは違い、こちらはURLで埋め込む等ではなく表示されたものをキャプチャするなどして使用するタイプなのですが、アバターサイズ・間隔・角丸指定などのオプション設定は可能です。
  • ダミーの氏名を生成するスクリプト "namegen.rb"
    同じくユーザー参加型のWebサイトを作る際などで、とりあえず沢山のダミーユーザーを登録したいときなどに便利な氏名生成ツールです。
    1520個の姓と1953個の名の組み合わせから約290万通りのダミー氏名を生成してくれます。
  • Random name generator
    こちらも先ほどのものと同様、とりあえず沢山のダミーユーザーを登録したいときなどに便利な氏名生成ツールで、日本ではなく英語圏のダミーネームが欲しいときに便利です。
    オプションを使えば出力数や性別などを指定して生成することができます。
  • 疑似個人情報データ生成サービス
    氏名だけではなく、住所や電話番号といったより詳細な個人情報に近いダミーデータを欲しいときに便利なツールで、各項目を任意で設定してボタンを押すだけで様々な項目が用意されたダミーの個人情報を生成してくれます。
    設定項目もかなり豊富に用意されており、氏名・性別・電話番号・メールアドレス・住所などの基本的な項目はもちろん、オプションで出力件数・年齢や住所の範囲・男女比率なども設定することができます。
    また、生成したデータはXML, Excel, CSV(文字コード:UTF-8)の3形式でダウンロードすることができるので、そのままインポートしたりすることもできます。
  • なんちゃって個人情報
    こちらも先ほどと同様、個人情報のダミーデータを欲しい時に便利なツールで、項目やオプションも豊富に揃っています。
    また、出力形式もHTML(シンプルなテーブルを使ったもの), XML, CSV, タブ区切りの4形式が用意されているので、自分が必要なタイプに合わせて出力させることができます。

以上、サイト制作時に便利なダミーテキスト & ダミー画像生成ツールのまとめでした。
結局普段からよく使うものは慣れなどもあって大体決まってたりするとは思いますが、急にサイトが閉鎖されてしまったなんてこともある(実際メモしていたものは幾つか閉鎖していたり、このエントリーを書いている間にもひとつ閉鎖してしまいました)ので、そういった時に代替ツールを探す手間を省くためにひと通り自分が知っているものを紹介しました。