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

↑私が10年以上利用している会計ソフト！

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="">

実装例：

PlaceIMG

PlaceIMGは写真素材をランダムに表示してくれるジェネレーター。 https://placeimg.com/横のサイズ/縦のサイズ/any と指定します。

このサイトのおもしろいところは、表示する画像のジャンルを指定できる点。 animals 、arch 、nature 、people 、tech から選択できます。また、画像の色も grayscale と sepia から選べます。

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

• 横：640px
• 縦：360px
• カテゴリー：animals
• 色：grayscale

<img src="https://placeimg.com/640/360/animals/sepia" 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も用意されています。開発時や学習の際に試してみるといいですね！

Unsplash Source

人気画像素材サイトのUnsplashが提供しているダミー画像生成サービスのUnsplash Source。https://source.unsplash.com/random と指定するだけで、Unsplashのきれいな写真がランダムに表示されます。サイズ指定がある場合は https://source.unsplash.com/横のサイズx縦のサイズ です。

オプションで、 ? に続けてキーワードを英字で指定すれば、そのキーワードにあう画像を探して表示してくれます。例えば以下のような画像を指定してみましょう：

• 横：640px
• 縦：360px
• キーワード：dog

<img src="https://source.unsplash.com/640x360/?dog" 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
• shoes
• watch
• furniture

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

• 横：640px
• 縦：360px
• ジャンル：furniture

<img src="https://api.lorem.space/image/furniture?w=640&h=360" alt="">

実装例：

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