logo
コーディング

更新日

Webサイトの制作途中や学習時に使えるダミー画像の生成サービス

Webサイトの制作中には、とりあえずで入れておく「ダミー」を使用する事が多々あるかと思います。日本ではアタリ・アテなどとも呼ばれますね。そんなダミー画像を便利に生成してくれるジェネレーターをいくつか紹介します。かつて「制作途中にお世話になる、ダミーテキスト・ダミー画像のジェネレーターいろいろ」という記事で紹介したこともあったのですが、SSLに対応していないものも多かったので、httpsに対応した画像URLが生成できるもののみに絞りました！

制作途中にお世話になる、ダミーテキスト・ダミー画像のジェネレーターいろいろ

Placeholder.com

Placeholder.comは昔からあるダミー画像を提供しているサービス。とにかくシンプル！以前の名前は Placehold.it でした。その頃からずっとお世話になっています！

基本的な使い方は、画像のソース部分に https://via.placeholder.com/画像のサイズ を指定するだけ。HTML で 100px の正方形を指定するなら、

<img src="https://via.placeholder.com/100" alt="" />

横 200px、縦 100px なら

<img src="https://via.placeholder.com/200x100" alt="" />

と言った形ですね！他にも色やテキストも指定できます。色はスラッシュで区切って最初に背景色、次に文字色を指定。テキストは英字のみ対応しています。例えば以下のような画像を指定してみましょう：

  • 横：640px
  • 縦：360px
  • 背景色：#0bd
  • 文字色：#fff
  • 表示テキスト：Hello!!!
<img src="https://via.placeholder.com/640x360/0bd/fff?text=Hello!!!" alt="" />

実装例：

Fake images please?

Fake images please?も、上記 Placeholder.com と利用方法はほとんど一緒です。画像部分に https://fakeimg.pl/画像のサイズ を指定するだけです。オプションで色やテキストも指定できます。

<img src="https://fakeimg.pl/640x360/0bd/fff?text=Hello!!!" alt="" />

Placeholder.com との違いは、こちら日本語の指定ができます！その場合はフォントの指定として &font=noto を加える必要があります。

<img
  src="https://fakeimg.pl/640x360/0bd/fff?text=やっほい!!!&font=noto"
  alt=""
/>

実装例：

Doodle Ipsum

Doodle Ipsumはダミー画像の中でもめずらしい、イラスト画像を表示してくれるサービス。「画像は画像でも、実写じゃなくてイラストが入るスペースだよ」と示したいときに使えますね。https://doodleipsum.com/画像のサイズ で表示可能です。特に指定がなければイラストはランダムに表示されますが、Web サイトの「Choose a style」からイラストのテイストを選択することもできますよ。背景色は ?bg= に続けてカラーコードを指定すれば OK!

<img src="https://doodleipsum.com/640x360?bg=0bd" alt="" />

他にも shape=circle で丸く切り抜いたり、sat=-100 で白黒にしたり、blur=数値 で画像をぼかしたりできます！例えば以下のような画像を指定してみましょう：

  • 横：300px
  • 縦：300px
  • 背景色：#ddd
  • 円に切り抜き
  • 白黒
<img src="https://doodleipsum.com/300?bg=ddd&shape=circle&sat=-100" alt="" />

実装例：

Lorem Picsum

Lorem Picsumも写真をランダムに表示してくれます。基本の書き方は https://picsum.photos/画像のサイズ です。 grayscale を加えて白黒にしたり、blur=数値 でぼかし度合いを指定することも可能。数値は 1〜10 で指定できます。

例えば以下のような画像を指定してみましょう：

  • 横：640px
  • 縦：360px
  • 白黒
  • ぼかし度合い：2
<img src="https://picsum.photos/640/360?grayscale&blur=2" alt="" />

実装例：

こちらはAPI も用意されています。開発時や学習の際に試してみるといいですね！

Lorem.space

Lorem.spaceは映画や音楽、ゲーム、本、ファッションなど、さまざまなジャンルの実在する写真をランダムで表示してくれるサービス。EC サイトなどの制作で使えそうですね。ただし著作権まわりで問題がありそうなものもあるので、あくまで開発時、テスト時のみの利用となるでしょう。

基本の書式は https://api.lorem.space/image?w=横のサイズ&h=縦のサイズ です。ジャンルを指定する場合は https://api.lorem.space/image/ジャンル?w=横のサイズ&h=縦のサイズ となります。ジャンルは以下のものが指定できます：

  • movie
  • game
  • album
  • book
  • face
  • fashion
  • ai
  • dashboard
  • crm
  • finance
  • calendar
  • messenger

例えば以下のような画像を指定してみましょう：

  • 横：640px
  • 縦：360px
  • ジャンル： fashion
<img src="https://api.lorem.space/image/fashion?w=640&h=360" alt="" />

私は長年 Placeholder.com を利用しているので、URL も記述方法も覚えてしまっていますが、よく使いそうなものは辞書登録などしておくと便利ですよ。他にもおすすめのサービスがあったらぜひ教えてくださいね！