サイト制作時に便利なダミーテキスト & ダミー画像生成ツール

サイト制作時に便利なダミーテキスト & ダミー画像生成ツール

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

2014年9月1日 追記
2. 画像」に「Unsplash It」を追記しました。

サイト制作時に便利なダミーテキスト & ダミー画像生成ツール 目次

  1. テキスト
  2. 画像
  3. その他

1. テキスト

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

すぐ使えるダミーテキスト – 日本語 Lorem ipsum

すぐ使えるダミーテキスト - 日本語 Lorem ipsum

日本語用のダミーテキストジェネレータで、夏目漱石「私の個人主義」、宮沢賢治「セロ弾きのゴーシュ」、Wikipedia:引用のガイドライン(部分)、自分で指定の4種類から選択できます。
また、パラグラフ毎の文字数、空行、アルファベットや記号の半角・全角指定などといった指定を行うこともできます。

Lorem Ipsum – All the facts – Lipsum generator

Lorem Ipsum - All the facts - Lipsum generator

あらゆる分野で使用されているダミーテキスト「Lorem ipsum」を生成できるジェネレータで、こちらもパラグラフやワード数などの設定が可能です。

HTML-Ipsum

HTML-Ipsum

上記で紹介してきたものとは違って、ダミーテキストをHTML付きでコピーすることができます。
最も利用しそうなパラグラフは長いものと短いもので用意されていたり、他にもリスト・テーブル・ナビゲーションなど、マークアップ時に使用するものがいろいろと用意されています。

Dummy Text Generator

Dummy Text Generator

「Lorem ipsum」を始めとする様々なダミーテキストを生成できるジェネレータで、テキストの種類やワード数といったオプションを選択できます。

また、「Dummy HTML snippets for webdesigners」では先ほどのHTML-Ipsumと同様にHTMLのマークアップ付きのダミーテキストをコピーすることができ、見出しやパラグラフはもちろん、リストやテーブルなども用意されています。

WEB制作時に役立つ!ダミーテキストに使える定型文まとめ

WEB制作時に役立つ!ダミーテキストに使える定型文まとめ

ジェネレータツールではないですが、会社情報・採用情報・プライバシーポリシーなど、サイト制作時によく作成するページで使える様々な定型文がまとめられているエントリー。

個人的にはあからさまにダミーとわかる内容ではなくなってしまうので、見落す可能性が出てきてしまうなどの理由であまり使わないんですが、たとえダミーだとしても実際に近いものを使用したい場合は便利です。

個人的によく使うやつ

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

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

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

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

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

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

目次へ

2. 画像

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

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

Unsplash It

Unsplash It

高品質なフリー写真素材の配布サイトとして利用している人も多いと思う「Unsplash」のイメージを使用したサービスで、サイズ指定やランダム表示はもちろん、複数イメージの指定、ブラーエフェクト指定、Cropなども可能です。

Dynamic Dummy Image Generator

Dynamic Dummy Image Generator

パッと見で明らかにダミーだとわかるようにしたい時に便利な生成ツールで、サイズ・背景色・テキストカラー・フォーマットを選択して表示させることができます。

デフォルトでは画像にサイズ表示がされるようになっており、任意でテキストを表示(日本語可)させることもできます。

Placehold.it

Placehold.it

同じくパッと見で明らかにダミーだとわかるようにしたい時に便利な生成ツールで、サイズ・背景色・テキストカラー・フォーマットを任意で指定して表示させることができますし、任意のテキストを表示(日本語不可)させることもできます。

Fake images please?

Fake images please?

サイズ・背景色・テキストカラーなどを任意で指定して表示させることができますし、任意のテキストを表示(日本語不可)させることもできます。

また、表示させるフォントの種類を指定することもでき、bebas・lobster・museo・yanoneの4種類のフォントを表示させるテキストなどに適用させることができます。

Placehold.jp

Placehold.jp

こちらも同じくサイズ・背景色などを選択して表示させることができるもので、国産ツールなので日本語も問題なく使用できます。

日本語なのでいろいろわかりやすいというのはもちろん、表示させる文字サイズの指定ができたり、予めよく使用されるサイズがプリセットで用意されていたりと機能的な面でも便利なものが沢山あります。

hhhhold!

hhhhold!

FFFFOUND!」の写真などをランダムで使用してダミー画像として生成するツール。
サイズやフォーマット指定が可能で、出力画像のイメージを明るめと暗めとで選ぶことなどもできます。

PlaceIMG

PlaceIMG

任意でサイズ・カテゴリー・フィルターを指定することで写真を使用したダミー画像を生成してくれます。
カテゴリーは全5種類、フィルターは白黒とセピアの2種類となっており、それぞれ選択しなかった場合はカテゴリーランダムでカラー画像が表示されます。

lorempixel

lorempixel

「PlaceIMG」と同様で、任意でサイズ・カテゴリー・フィルターを指定することで写真を使用したダミー画像を生成してくれます。
カテゴリーは全13種類、フィルターはカラーとグレーの2種類となっており、カテゴリーを選択後に「color image」か「gray image」どちらかを選択すると画像が出力されます。

{placekitten}

{placekitten}

猫好きにはたまらない、猫を使用したダミー画像を生成してくれるツール。
サイズ指定可能で、カラーもデフォルトではカラーですが、サイズの前に「g」を入れれば白黒画像で表示できます。

Placepuppy

Placepuppy

こちらは犬を使用したダミー画像を生成してくれるツール。
(最近ちょっと動きが怪しい感じ…)

placepu.gs

placepu.gs

こちらは犬のパグのみを使用したダミー画像を生成してくれるツールで、写真にサイズ表記もされるようになっています。

目次へ

3. その他

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

User Inter Faces

User Inter Faces

フォーラムやユーザー参加型のWebサイトでよく表示されるのを見かけるアバター画像一覧で生成してくれるツールです。
今まで紹介してきた画像生成ツールとは違い、こちらはURLで埋め込む等ではなく表示されたものをキャプチャするなどして使用するタイプなのですが、アバターサイズ・間隔・角丸指定などのオプション設定は可能です。

ダミーの氏名を生成するスクリプト “namegen.rb”

ダミーの氏名を生成するスクリプト "namegen.rb"

同じくユーザー参加型のWebサイトを作る際などで、とりあえず沢山のダミーユーザーを登録したい時などに便利な氏名生成ツールです。
1520個の姓と1953個の名の組み合わせから約290万通りのダミー氏名を生成してくれます。

Random name generator

Random name generator

こちらも先ほどのものと同様、とりあえず沢山のダミーユーザーを登録したい時などに便利な氏名生成ツールで、日本ではなく英語圏のダミーネームが欲しい時に便利です。
オプションを使えば出力数や性別などを指定して生成することができます。

疑似個人情報データ生成サービス

疑似個人情報データ生成サービス

氏名だけではなく、住所や電話番号といったより詳細な個人情報に近いダミーデータを欲しい時に便利なツールで、各項目を任意で設定してボタンを押すだけで様々な項目が用意されたダミーの個人情報を生成してくれます。
設定項目もかなり豊富に用意されており、氏名・性別・電話番号・メールアドレス・住所などの基本的な項目はもちろん、オプションで出力件数・年齢や住所の範囲・男女比率なども設定することができます。

また、生成したデータはXML・Excel・CSV(文字コード:UTF-8)の3形式でダウンロードすることができるので、そのままインポートしたりすることもできます。

なんちゃって個人情報

なんちゃって個人情報

こちらも先ほどと同様、個人情報のダミーデータを欲しい時に便利なツールで、項目やオプションも豊富に揃っています。
また、出力形式もHTML(シンプルなテーブルを使ったもの)・XML・CSV・タブ区切りの4形式が用意されているので、自分が必要なタイプに合わせて出力させることができます。

目次へ

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

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。