【超簡単】ダミー画像やダミーの写真を生成・埋め込みする方法をご紹介！

WEBサイトを作成している時や、紙面の記事などを作成している時に「後から画像を入れる予定の場所」を空けたままにしておくことがあります。

ですが、そこにダミー画像を入れておけば、全体のイメージがしやすく、後に画像を入れた時のエラーなども発見しやすくなります。

簡単にお好みのサイズのダミー画像を作成できて、大量に作りたい時にも簡単に利用できるツール「Placehold.jp」「Unsplash.it」をご紹介します。

どちらも無料で使いやすいのですが、それぞれ特徴があります。ぜひ自分が使いやすい方を選んでみてくださいね。では早速それぞれの使い方をチェックしていきましょう。

Placehold.jpの特徴は写真ではなく、シンプルなダミーイメージを入れたい時に使いやすいです。またダミーイメージに文字を入れたい時にも、簡単に利用できますよ。

サイト自体も日本語対応なので、スムーズに使いやすいのもポイントです。

そして「画像を生成する」をクリックすると、その右側にすぐに表示されます。

画像のURLは「 https://placehold.jp/100x100.png 」となり、そのまま画像コード<img src="ここにURL">の形で埋め込めばOKです。

実際に埋め込んでみると、以下のようになります。

https://placehold.jp/100x100.pngの中の「100×100」の部分は文字通り縦横を表しています。

直接書き換えても問題なく表示されますので、デザイン変更などがあった時にも簡単に対応できます。

「フォーマット」「文字サイズ」「文字色」「背景色」「表示文字」を設定することができます。

では、それぞれ詳しくご紹介していきます。

すると、リンクが表示されます。上記の設定で完成したものは、以下の仮画像です。

また、それぞれ以下のコードをそのまま書き換えることでも、可能となります。

Lorem Picsumは旧Unsplash.itと呼ばれていました。特徴としては、簡単に写真を使った仮画像を作成することができ、大量に作る時にも早いですよ。

また、画像の加工ができるのもポイントです。仮画像とは言っても、なんとなくのイメージが決まっている場合にもおすすめです。

使用したい場所に、以下のURLを入力します。

「 https://picsum.photos/幅サイズ/高さサイズ 」

このURLをPlacehold.jpと同じように<img src="ここにURL">の間に入れるだけで、入力したサイズに合う写真を、ランダムで表示してくれます。以下が実際に入力した画像です。

このように、簡単に希望サイズの写真を表示してくれます。サイズによっては途切れてしまうこともありますので、ご注意くださいね。

ランダムではなく、指定した画像を表示させることもできます。イメージがしやすいものを選んでおけば、スムーズですね。

表示した時のURLを、そのままコードとして利用できます。そして、このURLを使用して表示したのが以下の画像です。

画像のサイズは大きなものがほとんどです。ですので、とりあえずで良いのであれば、希望のサイズを入れておきましょう。見切れないようにしながら、お好みのサイズに変更したい場合には縦横のサイズを同じ対比で割るようにします。

例えば上記の画像は「5616/3744」でした。それでは大きすぎるので、それぞれ÷24をして「234/156」と設定しています。

使える加工方法は「グレースケール」「ぼかし」です。それぞれ、URLにプラスするだけなので、とっても簡単です。

より一歩イメージを膨らませたり、イメージを伝えたい時にぜひ使ってみてくださいね。

「 ?grayscale 」をURLの末尾につけるだけで、昔の写真のようなグレースケールにすることができます。

「 ?blue=3 」を末尾につけるだけで、ぼかしをつけることができます。ぼかしは度合いも調節ができて、最後の数字を1〜10段階に設定できます。

上記では3の度合いです。
 

通常は問題なく使用できるのですが、基本的な目的はダミー画像です。公開記事などへの使用は自己責任となります。内部的に利用した方が良いでしょう。

元々はUnsplashと同じで、画像自体もUnsplashのものを利用しているようです。ですが「別サイトとなっていること」「ランダム時に著作物が写っている可能性があること」から、公開サイトへの使用は控えた方が良いですね。

無料とはいえ、画像の使用に関しては気をつけてください。