ダミーテキスト&ダミー画像を簡単に作成できるWebサービスまとめ

デザイン確認時などに使うダミーテキストやダミー画像は、自分で作成するとなると結構な手間です。必要なときは自動生成してくれるWebサービスを利用しましょう。

今回は、ダミーテキストやダミー画像を作成してくれる便利なWebサービスをご紹介します。

ダミーテキスト

すぐ使えるダミーテキスト

ダミーテキストジェネレータ

青空文庫

なんちゃって個人情報

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

Lorem Ipsum

HTML-Ipsum

Dummy Text Generator

ダミー画像

User Inter Faces

Placehold.jp

<img src="http://placehold.jp/幅x高さ.png">

<img src="http://placehold.jp/650x350.png">

上記のようにコードを書くと、以下のような画像が表示されます。

幅や高さのほか、背景色、文字色、文字サイズ、ファイルフォーマット、テキスト内容も設定できます。国産のサービスなのでわかりやすいです。

placekitten

/* カラー */
<img src="http://placekitten.com/幅/高さ" />
/* モノクロ */
<img src="http://placekitten.com/g/幅/高さ" />

<img src="http://placekitten.com/650/350" />

上記のようにコードを書くと、以下のような画像が表示されます。

lorempixel

/* カラー */
<img src="http://lorempixel.com/幅/高さ/カテゴリー名" />
/* モノクロ */
<img src="http://lorempixel.com/g/幅/高さ/カテゴリー名" />

<img src="http://lorempixel.com/650/350/food" />

上記のようにコードを書くと、以下のような画像が表示されます。

PlaceIMG

<img src="画像URL" />

<img src="http://placeimg.com/650/350/nature/grayscale" />

上記のようにコードを書くと、以下のような画像が表示されます。

Unsplash It

/* カラー */
<img src="https://unsplash.it/幅/高さ" />
/* 正方形で表示 */
<img src="https://unsplash.it/一辺の長さ" />
/* 違う画像をランダム表示 */
<img src="https://unsplash.it/幅/高さ?random" />
/* モノクロ */
<img src="https://unsplash.it/g/幅/高さ" />
/* 決まった画像を表示 */
<img src="https://unsplash.it/幅/高さ?image=画像番号" />
/* 画像にぼかしをかける */
<img src="https://unsplash.it/幅/高さ?blur" />
/* 切り取り位置指定 */
<img src="https://unsplash.it/幅/高さ?gravity=east" />
<img src="https://unsplash.it/幅/高さ?gravity=west" />
<img src="https://unsplash.it/幅/高さ?gravity=north" />
<img src="https://unsplash.it/幅/高さ?gravity=south" />
<img src="https://unsplash.it/幅/高さ?gravity=center" />

<img src="https://unsplash.it/650/350?image=1027" />

上記のようにコードを書くと、以下のような画像が表示されます。

画像番号はhttps://unsplash.it/imagesで調べられます。各パラメータは「&」でつなげることも可能です。

おわりに

いかがでしたか？

体裁を確認したいときすぐに流し込めるダミーテキストやダミー画像があれば作業効率が上がります。こういったダミーのデータは意外と必要になることが多いです。そのときは今回ご紹介したようなサービスを上手に活用していきましょう。