DigiPress

Highly Flexible WordPress Theme

メニュー

プレゼンやデモサイトで重宝するダミー画像を生成してくれるWebサービス10選

2019/02/21
プレゼンやデモサイトで重宝するダミー画像を生成してくれるWebサービス10選

Webサイトを制作する上で、クライアントにサイトの完成イメージを提示する際にページ内に「とりあえず表示しておきたいそれっぽい適当な画像」というのは、あると結構助かります。
しかし、製作段階のテスト環境を構築するたび、毎回ダミー画像を用意してアップロードしたりURLを指定するのは結構面倒なものです。

というわけで、そんなときに便利な固定のURLを指定しておくだけで、それっぽい「ダミー画像」を表示してくれる、とっても便利なオンラインサービスをご紹介します。

Unsplash it


自然や風景中心のおしゃれで質の高いライセンスフリーの無料画像を提供している、人気の定番画像サイト「Unsplash」からランダムに画像をピックアップして画像URLを生成してくれます。

表示例

placeholder

<img src="https://unsplash.it/630/400" alt="pplaceholder" />

URLの後に、幅と高さをピクセル数値でスラッシュ(/)で区切って指定するだけ。とっても簡単!

その他の指定方法

URLに/g/を含めると、グレイスケールで画像を表示してくれます。
placeholder

<img src="https://unsplash.it/g/630/400/" alt="placeholder" />

listを付けて https://unsplash.it/list にリクエストすると、なんと画像の一覧情報(撮影者、タイトル、サイズ)をまとめてjsonフォーマットで取得できます。

?blurパラメータをつければ、画像にぼかしもかけることもできます。
placeholder

<img src="https://unsplash.it/630/400/?blur" alt="placeholder" />

p-hold


Flickr上にあるクリエイティブコモンライセンスの画像を表示できるURLを生成してくれます。
URLに、幅、高さ、キーワード、Flickrのユーザー名が指定できるほか、フィルター(ぼかし、グレースケール)にも対応しています。

表示例

placeholder

<img src="http://p-hold.com/630/400" alt="placeholder" />

placeholder

<img src="http://p-hold.com/people/630/400/gray" alt="placeholder" />

PlaceIMG


幅と高さ、そして任意の画像のカテゴリーを指定すると、ダミー画像用のURLを生成してくれます。

表示例

placeholder

<img src="http://placeimg.com/630/400/people" alt="placeholder" />

lorempixel


「PlaceIMG」と同じように、オンラインのジェネレーターで、幅、高さ、カテゴリーを指定してダミー画像用のURLを生成できます。

表示例

placeholder

<img src="http://lorempixel.com/630/400/fashion/" alt="placeholder" />

placekitten


サイト名の通り、こちらは子猫の画像のみでダミー画像を生成してくれるサービス。
ドメインの後に、幅(width)、高さ(height)を指定することで画像サイズを指定します。さらに、URLに/g/ を追加することでグレースケールの画像になります。

表示例

<img src="https://placekitten.com/g/630/400" alt="placeholder" />

Placehold.jp


こちらは写真ではなく、指定サイズの単色画像として背景カラー、任意のテキストを反映したダミー画像用のURLを生成してくれるというサービス。
出力フォーマットはPNGとJPGから選べます。

表示例

placeholder

<img src="http://placehold.jp/80/4cafe0/ffffff/630x400.png?text=Dummy%20Image" alt="placeholder" />

Fake images please?


URLに、縦、横のサイズや、背景カラー、表示したいテキスト、さらにフォントをパラメータで指定してダミー画像を生成してくれます。

表示例

placeholder

<img src="http://fakeimg.pl/630x400/?text=Hello" alt="placeholder" />

Dynamic Dummy Image Generator

表示例

placeholder

<img src="http://dummyimage.com/630x400/2b8294/ffffff.png&text=Dummy+Image" alt="placeholder" />

FPOImg.com

表示例

placeholder

<img src="http://fpoimg.com/630x400?text=Dummy Image&bg_color=f495bb&text_color=ffffff" alt="placeholder" />

Dummy Image Generator


こちらはURLを指定するのではなく、サイズや画像のジャンルを選んで様々なサイズにクロップされた画像をまとめてzipアーカイブとしてダウンロードできるサービス。


いかがでしたか?
Webサイト制作の表示チェックやサンプル用にはとても役に立ちそうですね。

Share / Subscribe
Facebook Likes
Tweets
Hatena Bookmarks
Pinterest
Pocket
Feedly
Send to LINE