Webサイトの制作を行う際に、画像が準備中の場合に仮でダミー画像を表示することがあります。
ダミー画像を表示することによって、画像がない場合と比べて、作業を効率良く行うことができ、より完成形のイメージがしやすくなります。
今回は、Webサイトでダミー画像を簡単に表示できるサービスをご紹介したいと思います。
INDEX
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">
画像素材サービスも活用しよう
今回ご紹介したのはダミー画像生成サービスですが、もっと実際の画像イメージに近づけたり、雰囲気の近い画像を埋め込みたい場合は、フリー画像を利用するのもおすすめです。
無料の画像素材、イラスト素材なども様々なものが公開されているので、イメージに合うものを探してみてください。
