ダミー画像を生成できるツールとプラグインまとめ

ダミー画像を生成できるおすすめツールとデザインツールで使えるダミー画像生成プラグインをまとめて紹介します。

ダミー画像生成ツールはグレーで無地の画像だけでなく、フリー素材からキーワードを指定して表示したりサイズの変更などもできます。

生成した画像はダウンロードすることもできるのでワイヤーフレームやプロトタイプをくるときに便利です。

ダミー画像って何？

ダミー画像はデザインの初期の段階で本番用画像を使う前に使用するもの。

本番用画像をいきなり使うと後でサイズ変更が発生した場合に何度も画像のリサイズをする必要がありますが、ダミー画像ならあまり気にせずサイズの調整ができます。

ダミー画像の使いみち

ダミー画像はWeb制作のプロトタイピングやワイヤーフレームでもよく使います。画像のサイズ感などを確認したいときに使用することが多いです。

デザインツールの場合は四角ツールでグレーの箱を作ればいいですが、HTMLでコーディングした場合はimgタグを使ってダミー画像を配置できます。

<img src="https://loremflickr.com/320/240" alt="">

HTMLのimgタグで使う以外にもブラウザのアドレスバーにURLを入力してダミー画像を生成し、表示された画像を保存して使用することもできます。

ダミー画像生成ツールと使い方

ダミー画像を生成できるツールを紹介します。どれも使い方は大体同じで使用する際のURLが異なる程度です。

Placeholder.com

Placeholder.com

よく使われるダミー画像生成ツールがこちら。使い方はシンプルなのでとりあえずダミー画像欲しいときはほぼこれ使ってます。

サイズの指定

ダミー画像のサイズ指定はURLの後にスラッシュを入れて数値を入れるだけ。

// 四角
https://via.placeholder.com/150

// 幅x高さ
https://via.placeholder.com/300x150

拡張子の変更

使用できるファイルの拡張子はこちらのようになっています。

• .gif
• .jpg
• .jpeg
• .png

https://via.placeholder.com/300.png

テキストをセットする

デフォルトでは画像のサイズが表示されますが、テキストを変更することもできます。

https://via.placeholder.com/728x90.png?text=No+Image

背景色とテキストカラーをセットする

サイズの後に背景色、その後にテキストカラーを指定できます。

https://via.placeholder.com/150/0000FF/808080?text=No+Image

unsplashのダミー画像生成ツール

以前はunsplash.itというサービスだったのですが、picsum.photosに変更されました。

おしゃれなダミー画像を使いたいなら迷わずこのツールを使いましょう。

先ほどのダミー画像と違ってテキスト入力ができませんが、unsplashの高品質な画像をランダムに表示してくれるので、グレーの画像よりもそれっぽい感じになります。

サイズの指定

サイズ指定はPlaceholder.comと違ってスラッシュで幅と高さを分けて指定します。

// 四角
https://picsum.photos/200

// 幅/高さ
https://picsum.photos/200/300

画像のIDを指定する

幅と高さの前にidで特定の画像を指定することもできます。

https://picsum.photos/id/237/200/300

グレースケール

?grayscaleを入れると白黒画像になります。

https://picsum.photos/400/300?grayscale

画像をぼかす

?blurを入れると画像をぼかすことができます。ぼかし具合を数値で指定することもできます。指定できるのは1~10まで。

https://picsum.photos/200/300/?blur

// 数値で指定
https://picsum.photos/200/300/?blur=2

LoremFlicker

Flickerの画像からダミー画像を生成できるサービス。サイトはこちら

サイズ指定

サイズ指定方法はunsplashと同じでスラッシュで区切ります。

https://loremflickr.com/320/240

キーワードを指定

dogやkittenなどキーワードを指定することもできます。

https://loremflickr.com/320/240/dog

// 複数指定も可
https://loremflickr.com/320/240/brazil,rio

Figmaで使えるダミー画像生成画像プラグイン

ここまではHTMLコードのimgタグでダミー画像を生成できましたが、デザインツールでもダミー画像生成できるプラグインがあるので紹介します。

Figmaで使えるダミー画像プラグインはいくつかありますが、以下のプラグインがよく使われます。

• Unsplash: Unsplashの画像を使用できるプラグイン
• Freepik: Freepikから無料画像を使用できるプラグイン
• Imagif: Gif画像を使用できるプラグイン

無料素材の画像はそのまま使えるものもあるのですごく便利。

AdobeXDで使える画像生成プラグイン

AdobeXDのプラグインでも同様に画像を取得して表示できるプラグインがあります。

• Pixels
• Unsplash

まとめ

ダミー画像生成ツールはimgタグで使ったりブラウザで表示して画像として保存して使えるので覚えておくとWeb制作が楽になります。