ダミー画像を生成できるおすすめツールとデザインツールで使えるダミー画像生成プラグインをまとめて紹介します。
ダミー画像生成ツールはグレーで無地の画像だけでなく、フリー素材からキーワードを指定して表示したりサイズの変更などもできます。
生成した画像はダウンロードすることもできるのでワイヤーフレームやプロトタイプをくるときに便利です。
ダミー画像って何?
ダミー画像はデザインの初期の段階で本番用画像を使う前に使用するもの。
本番用画像をいきなり使うと後でサイズ変更が発生した場合に何度も画像のリサイズをする必要がありますが、ダミー画像ならあまり気にせずサイズの調整ができます。
ダミー画像の使いみち
ダミー画像はWeb制作のプロトタイピングやワイヤーフレームでもよく使います。画像のサイズ感などを確認したいときに使用することが多いです。
デザインツールの場合は四角ツールでグレーの箱を作ればいいですが、HTMLでコーディングした場合はimg
タグを使ってダミー画像を配置できます。
<img src="https://loremflickr.com/320/240" alt="">
HTMLのimgタグで使う以外にもブラウザのアドレスバーにURLを入力してダミー画像を生成し、表示された画像を保存して使用することもできます。
ダミー画像生成ツールと使い方
ダミー画像を生成できるツールを紹介します。どれも使い方は大体同じで使用する際のURLが異なる程度です。
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制作が楽になります。