デザイン確認時などに使うダミーテキストやダミー画像は、自分で作成するとなると結構な手間です。必要なときは自動生成してくれるWebサービスを利用しましょう。
今回は、ダミーテキストやダミー画像を作成してくれる便利なWebサービスをご紹介します。
目次
ダミーテキスト
すぐ使えるダミーテキスト
http://lipsum.sugutsukaeru.jp/
元テキストに似た無意味な文章を生成してくれます。パラグラフごとの文の数やパラグラフ間の空行の有無など、細かい設定が可能です。
ダミーテキストジェネレータ
http://webtools.dounokouno.com/dummytext/
文字数を指定すると、プルダウンリストから選択したダミーテキストが指定した文字数分ボックスに表示されます。
青空文庫
http://www.aozora.gr.jp/
著作権の切れた作品や、著者が許諾した作品を公開している電子図書館です。著作権の切れた作品については自由に利用することができるので、ダミーテキストとしても利用できます。
なんちゃって個人情報
http://kazina.com/dummy/index.html
名前、メールアドレス、性別、電話番号など、ダミーの個人情報を生成してくれます。
擬似個人情報データ生成サービス
http://hogehoge.tk/personal/
こちらもダミーの個人情報を生成してくれるサービスです。こちらは住所のダミーデータも生成してくれます。
Lorem Ipsum
http://www.lipsum.com/
欧米でよく使われている「Lorem Ipsum……」から始まるダミーテキストを、指定したパラグラフ数やワード数で生成してくれます。
HTML-Ipsum
http://html-ipsum.com/
HTMLタグ付きのLorem Ipsumをコピーできるサイトです。短いパラグラフ、長いパラグラフ、リスト、見出しなどがあります。
Dummy Text Generator
http://www.blindtextgenerator.com/lorem-ipsum
Lorem Ipsum含む10種類のダミーテキストを、パラグラフ数やワード数に応じて生成してくれます。Dummy HTML snippets for webdesignersでは、HTML-Ipsumと同様にHTMLタグ付きのテキストを生成することができます。
スポンサーリンク
ダミー画像
User Inter Faces
http://uifaces.com/
アバター画像の一覧を生成してくれるサービスです。個々の画像のサイズ、スペース、角丸などの設定ができます。
Placehold.jp
http://placehold.jp/
シンプルなダミー画像を生成してくれます。プリセットも用意されていてとても親切。
1 |
<img src="http://placehold.jp/幅x高さ.png"> |
1 |
<img src="http://placehold.jp/650x350.png"> |
上記のようにコードを書くと、以下のような画像が表示されます。
幅や高さのほか、背景色、文字色、文字サイズ、ファイルフォーマット、テキスト内容も設定できます。国産のサービスなのでわかりやすいです。
placekitten
http://placekitten.com/
猫のダミー画像を生成してくれます。
1 2 3 4 |
/* カラー */ <img src="http://placekitten.com/幅/高さ" /> /* モノクロ */ <img src="http://placekitten.com/g/幅/高さ" /> |
1 |
<img src="http://placekitten.com/650/350" /> |
上記のようにコードを書くと、以下のような画像が表示されます。
lorempixel
http://lorempixel.com/
12のカテゴリーの中から生成するダミー画像を選ぶことができます。
1 2 3 4 |
/* カラー */ <img src="http://lorempixel.com/幅/高さ/カテゴリー名" /> /* モノクロ */ <img src="http://lorempixel.com/g/幅/高さ/カテゴリー名" /> |
1 |
<img src="http://lorempixel.com/650/350/food" /> |
上記のようにコードを書くと、以下のような画像が表示されます。
PlaceIMG
http://placeimg.com/
5つのカテゴリーの中から生成するダミー画像を選ぶことができます。サイズ・カテゴリー・フィルターを設定すると上記ページの上部に画像のURLが表示されるので、それをimgタグに設定します。
1 |
<img src="画像URL" /> |
1 |
<img src="http://placeimg.com/650/350/nature/grayscale" /> |
上記のようにコードを書くと、以下のような画像が表示されます。
Unsplash It
http://unsplash.it/
CC0の写真素材サイト「Unsplash」の写真を利用したダミー画像生成サービスです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* カラー */ <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" /> |
1 |
<img src="https://unsplash.it/650/350?image=1027" /> |
上記のようにコードを書くと、以下のような画像が表示されます。
画像番号はhttps://unsplash.it/imagesで調べられます。各パラメータは「&」でつなげることも可能です。
おわりに
いかがでしたか?
体裁を確認したいときすぐに流し込めるダミーテキストやダミー画像があれば作業効率が上がります。こういったダミーのデータは意外と必要になることが多いです。そのときは今回ご紹介したようなサービスを上手に活用していきましょう。
スポンサーリンク