Webサイトの制作を行う際に、画像が準備中の場合に仮でダミー画像を表示することがあります。

ダミー画像を表示することによって、画像がない場合と比べて、作業を効率良く行うことができ、より完成形のイメージがしやすくなります。

今回は、Webサイトでダミー画像を簡単に表示できるサービスをご紹介したいと思います。

Web制作で活躍するダミー画像、モック用画像生成サービス

Web制作を行う際に、コーディングの段階でまだ画像素材が全部揃っていないようなケースがあります。そんな時に活躍するのが、ダミー画像です。

ダミー画像生成サービスを使えば、URLで画像サイズや画像の種類などを指定して、imgタグから呼び出すだけでダミー画像を表示することができます。

例えば、

<img src="https://placehold.jp/300x200.png">

のようなimgタグを貼り付けると、

このようにダミー画像を表示することができます。

URLで簡単に画像サイズなどを変更することができるので、サイズに合わせた画像をわざわざ用意する必要もなく、効率良くWebコーディング作業が進められますね。

おすすめのダミー画像生成サービス

Placehold.jp

Placehold.jpは、サイズ表示付きの画像を生成できるサービスです。PNGとJPGの2種類が利用可能です。

画像のURLに下記のような情報を記述することで、任意の画像を表示することができます。

  • 画像サイズ
  • 背景色
  • テキストカラー
  • テキストの内容

日本のサイトなので、使い方も日本語で表示されていて使いやすくておすすめです。

表示サンプル

<img src="https://placehold.jp/300x200.png">

<img src="https://placehold.jp/3697c7/ffffff/360x180.png?text=dummy">

Lorem Picsum

Lorem Picsumは、Unsplashの画像をダミー画像として表示することができるサービスです。PNG、JPG、WEBPの3種類に対応しています。

URLで下記を設定することが可能です。

  • 画像サイズ
  • グレースケール
  • ブラー

表示サンプル

<img src="https://picsum.photos/300/200">

<img src="https://picsum.photos/id/236/360/180?grayscale">

Unsplash Source

Lorem PicsumはUnsplashの画像を表示できるダミー画像生成サービスですが、任意のUnsplashの画像を表示することはできません。

Unsplash Sourceは、任意のUnsplashの画像を表示することができるサービスです。ダミー画像専用のサービスではありませんが、他のダミー画像生成サービスと同様に利用することができます。

ユーザーやコレクション、キーワードで検索など様々な使い方ができ、おしゃれな画像やイメージに合った画像をダミー画像として利用したい場合におすすめです。

表示サンプル

<img src="https://source.unsplash.com/random/300x200">

Unsplashの画像IDを指定した例

<img src="https://source.unsplash.com/zpyex3I9elw/360x180">

Generative Placeholders

Generative Placeholdersは、他のダミー画像とは一味違うパターン画像を表示することができるダミー画像生成サービスです。

パターン画像であればひと目でダミーであることが分かりやすいというのがメリットの1つですね。変にクオリティが高い画像をダミー画像にしてしまうと、実際の画像を入れ込んだ際に見劣りしてしまう可能性もあります。

表示サンプル

<img src="https://generative-placeholders.glitch.me/image?width=300&height=200">

<img src="https://generative-placeholders.glitch.me/image?width=360&height=180&style=mondrian">

placeIMG

placeIMGは、カテゴリを指定してダミー画像を表示することができるサービスです。

動物、建物、自然、人物、テックの5つのカテゴリが用意されていて、URLで指定することでそのカテゴリの画像を表示することができます。

グレースケールとセピアのフィルタをかけることもできて、シンプルなサービスながら使い勝手に優れています。

表示サンプル

<img src="https://placeimg.com/300/200/any">

<img src="https://placeimg.com/360/180/arch/sepia">

placekitten

placekittenは、かわいい子猫のダミー画像を表示することができるダミー画像生成サービスです。

かわいい子猫たちの写真に癒やされながら作業すれば、大変な時でもなんとか乗り越えられるかもしれませんよ。

URLで画像のサイズと、グレースケールの指定が行えます。

表示サンプル

<img src="https://placekitten.com/300/200">

<img src="https://placekitten.com/g/360/180">

placebear

placebearは、placekittenのからインスピレーションを受けて作られた熊のダミー画像を表示することができるダミー画像生成サービス

こちらも同様に、画像サイズとグレースケールの指定が行なえます。

表示サンプル

<img src="https://placebear.com/300/200">

<img src="https://placebear.com/g/360/180">

画像素材サービスも活用しよう

今回ご紹介したのはダミー画像生成サービスですが、もっと実際の画像イメージに近づけたり、雰囲気の近い画像を埋め込みたい場合は、フリー画像を利用するのもおすすめです。

無料の画像素材、イラスト素材なども様々なものが公開されているので、イメージに合うものを探してみてください。