Webサイト制作でモックアップを用意する際に意外と困るのが画像です。仮のダミー画像とはいえ、作成する画像にはこだわりたいですよね？
同じく、学習でWebサイトを作る人にとっても画像の用意は手間だったりします。
そこで今回は、URLを貼るだけでおしゃれなダミー画像を作成できる無料のジェネレーターを紹介します。
もちろん人物や動物のダミー画像、テキストを入れる事だって可能。どのサービスも作成時にサンプル画像で確認も出来るので、これから作るWebサイトの雰囲気に合うようなダミー画像を選びましょう。
ダミー画像を使う事で、これから作るWebサイトの完成イメージがしやすくなりますよ。
この記事の目次
ダミー画像や写真を作成できるサービスとは
Webサイトやアプリなどのデザインを行う際、必要な画像素材がまだ全部揃っていないような時に活躍するのがダミー画像。
デザインならフリー素材サイトを利用する事も有りますが、コーディングでモックアップを作る時には不便です。
そんな時に使うのが、placeholdのimage generator（イメージ ジェネレーター）といったダミー画像生成サービス。HTMLのimgタグにリンクを貼るだけで好みのサイズの画像を作成できます。
サービス側では、サイズや色などの設定をしてURLを発行するだけ。ダウンロードする煩わしさもなく、後からでも簡単にやり直せるので、コーディングに集中出来ます。
似たようなサービスは沢山あるので、便利なものだけ紹介していきますね。
placehold.jp 日本語版
特徴
placehold.jp（simple image placeholder service）は、昔からあるダミー画像サービスの日本語版。べた塗りの画像やテキストを入れる事が出来ます。
左側のメニューからWeb制作でよく使うサイズなどを簡単に選ぶ事が出来ます。
「Basic」「Advanced」と別れていますが、好きなテキストを入れたい時はAdvancedの左メニューにある【表示文字】の所に文字を入れてください。
写真のダミー画像は有りませんので、シンプルなべた塗り画像が欲しい人向け。広告だらけなので不快に感じるかも知れませんが。
おしゃれなダミー画像や人物・猫など、こだわりたい方は次の項目で紹介する他のサービスをご覧ください。
表示内容
- べた塗り画像
- テキスト表示
ファイル形式
JPG、PNG
サンプル画像
<img src="https://placehold.jp/3d4070/ffffff/150x150.png">
<img src="https://placehold.jp/24/e869ad/ffffff/200x150.png?text=%E5%A5%BD%E3%81%8D%E3%81%AA%E6%96%87%E5%AD%97%E3%82%82">リンク先：placehold.jp
Lorem Picsum
特徴
Lorem Picsumは、Unsplashの画像をダミー画像として表示することができるサービスです。
おしゃれなフリー素材サイトで有名なアンスプラッシュの画像が使えるので、膨大な種類があります。
表示出来る画像
- 人物
- 動物
- べた塗り画像
- 建物
- 風景
などなど。
ファイル形式
JPG、WEBP
例えば、WebP形式の画像を取得するには「.webp」をURLの最後に追加します。
https://picsum.photos/200/300.webp基本の使い方
URLの後に希望の画像サイズ（幅と高さ）を追加するだけで、ランダムな画像が得られます。
https://picsum.photos/200/300正方形の画像を取得するには、サイズを追加するだけです。
https://picsum.photos/200特定の画像を指定するなら
イメージギャラリーから使用したい画像を選ぶ事も出来ます。
サンプル画像
画像にはID「#番号」が書いてありますので、それをリンクパスに指定します。
■書き方
<img src="img src="https://picsum.photos/id/ID番号/横幅サイズ/高さサイズ">
↓
<img src="img src="https://picsum.photos/id/1059/200/200">リンク先：Lorem Picsum
placeIMG
特徴
PlaceIMGは、カテゴリをしてダミー画像を表示できるサービス。「動物」「建物」「自然」「人物」「TECH」の5つのカテゴリがあり、グレースケールとセピアのフィルタをかける事もできます。
表示出来る画像
- 動物
- 建物
- 自然
- 人物
- TECH
ファイル形式
JPG、WEBP
基本の使い方
カテゴリを選び、高さと幅を入力します。【画像を生成する】を押せば、写真がポップアップ表示されます。
カテゴリの上にURLが表示されますのでIMGタグに貼り付けて使います。この辺は他のサービスと同じですね。
ただし、ブラウザで読み込むたびに画像はランダムに切り替わってしまいます。
サンプル画像
<img src="https://placeimg.com/250/250/animals">リンク先：PlaceIMG
まとめ：ダミー画像作成サービスで時短しよう
ダミー画像生成サービスを使う事で時短に繋がりますし、完成イメージも湧きやすいです。
ジェネレーターで生成できる写真の種類は限られていますので、フリー画像素材も上手く活用して下さいね。
