「準備はまだできていないけど、仮のダミー画像を入れておきたい」ウェブ制作中にそんな場面に遭遇することもあるでしょう。
この記事では、ダミー画像を手軽に生成できるジェネレーター、オンラインツールをまとめてご紹介します。
そもそもダミー画像とは？
ウェブ制作中に、「画像の準備はできていないけど、とりあえずレイアウトの確認だけでもしたい」、というときに利用する仮の画像、これが「ダミー画像」です。
画像のサイズはもちろん、スタイルなどもimgタグに直接記述するだけで、ダミー画像を表示できます。
試しに以下のようにimgタグを記述してみると、
<img src="https://placehold.jp/272343/ffd803/640x400.png">
ほんの少しの指定を行うだけで、サイトの雰囲気にあった色合いのダミー画像を用意することができます。サイズ指定も手軽なので、お気に入りのダミー画像ジェネレーターをひとつ見つけておくのも良いでしょう。
おすすめダミー画像生成オンラインサービスまとめ
イラストをつかった新しいダミー画像生成ツールDoodle Ipsum
写真画像も良いですが、手描きイラストをつかったダミー画像はいかがでしょう。Doodle Ipsumでは、10種類のイラストスタイルをえらぶことができるダミーイラスト画像を生成してくれるサービスです。
基本的に、画像サイズを指定すれば表示可能です。
<img src="https://doodleipsum.com/640x400/">
640x400pxでサイズ指定した状態がこちら。
この他にも、?bg=[HEXコード（#なし）]で背景色を指定したり、?shape=circleで丸く切り抜いたり、
<img src="https://doodleipsum.com/640x640?shape=circle&bg=ffd803">
sat=-100で白黒グレイスケールにイラストをしたり、
<img src="https://doodleipsum.com/640x400?sat=-100">
blur=[数値]でイラストをぼかす指定も可能です。
<img src="https://doodleipsum.com/640x400?blur=20">
日本語対応、 国産ダミー画像ジェネレーター Placehold.jp
設定は簡単な程よい、というひとは日本語で設定できる国産ダミー画像生成ツールPlacehold.jpがおすすめです。使い方もとてもシンプルで、画像の縦横サイズを指定するだけで完了。
<img src="https://placehold.jp/{幅}x{高さ}.png">
640x400pxのダミー画像を表示した状態がこちら。サイズが一目で確認できるのも良いですね。
背景や文字の色、サイズの変更も可能となっています。
https://placehold.jp/{文字色}/640x400.png
https://placehold.jp/{背景色}/{文字色}/640x400.png
https://placehold.jp/{文字サイズ}/{背景色}/{文字色}/640x400.png
さらにCSSが利用可能なので、グラデーションや角丸などスタイリングを自由に追加できるのも嬉しいポイントです。
%2C%20to(%238fd3f4))%22%7D)
シンプルが一番、老舗ダミー画像生成ツール Placeholder
とにかくシンプルなツールが使いたいというひとは、Placeholder.comはいかがでしょう。基本的な使い方はとてもシンプルで、他サイト同様にサイズを指定するだけ。
<img src="https://via.placeholder.com/640x400">
その他にも背景や文字の色を指定することもできます。
まず背景色、続けて文字色を/で区切り、?text=[英語テキスト]で文字を指定できます。
<img src="https://via.placeholder.com/640x400/ff8ba7/33272a?text=Awesome Dummy">
ロゴ画像がないときに便利な Logo Ipsum
ウェブサイト制作でよくありがちな 「ロゴが準備できていない」問題。Logo Ipsumでは、さまざまなスタイルで作成されたロゴデザイン40種類以上が揃っており、クリック一発でSVGファイル形式でダンロードできます。
「シンボル」や「文字をつかったロゴ」「曲線カーブロゴ」など、ロゴの人気スタイルを手軽に利用できます。ここらへんのシンボルマークは、重宝する機会も多いはず。厳密にはダミー画像ではありませんが、用途が似ているためメモ。
映画やゲーム、音楽アルバムカバー、ファッションなどEコマース作成に Lorem.Space
映画やゲーム、音楽アートカバー、ファッション、本の表紙、靴、時計、家具とジャンルの写真をランダムで表示できるダミー画像生成ツール Lorem.Space。
実際に使われている映画ポスターなど、著作権的に問題のありそうなため、テスト開発環境でのみの利用がベター。
ジャンルに続けて、w=[幅]とh=[高さ]を指定しましょう。
<img src="https://api.lorem.space/image/fashion?w=640&h=400">
美しい写真をランダム表示 Lorem Picsum
「美しいスタイリッシュな画像を表示したい」というときに便利なLorem Picsum。
/id/[画像ID]で、リストから特定の写真を表示したり、?grayscaleで白黒バージョンに、?blurをURLの最後に加えれば、画像にぼかしを加えることも。
<img src="https://picsum.photos/640/400" alt="">
人気フリー写真ストックサイトUnsplash公式ダミー画像生成ツール Unsplash Source
老舗フリー写真ストックサイトUnsplashで公開されている写真を、ダミー画像として生成してくれる、公式ダミー画像ツールUnsplash Source。
基本的な使い方は、画像サイズを指定してあげるだけ。
<img src="https://source.unsplash.com/random/640x400">
さすがUnsplash公式ということもあり、「コレクション内の画像を表示」したり、「特定のユーザーの画像のみを表示」、「自分のお気に入り画像をランダム表示」など嬉しい機能ばかり。
開発向けにUnsplash APIも公開されています。
ダミー画像のカテゴリを手軽に切り替え PlaceIMG
PlaceIMGも、他のダミー画像生成ツール同様に、ランダムで写真を表示してくれるジェネレーターです。個人的に気に入っている点として、「表示する画像のジャンルを選択できる」ところ。
ボタンをクリックするだけで切り替えできるので、用途に合ったダミー画像を手軽に扱うことができます。
640x400pxのダミー画像を表示した状態がこちら。
<img src="https://placeimg.com/640/400/any" alt="">
AIアートパターンを利用した Generative Placeholders
Generative Placeholdrsは、AIによって描かれたアート作品「ジェネレーティブアート（Generative Art）」を活用したダミー画像生成ツール。
他では見かけないおしゃれなパターンスタイルが特長で、あらかじめ用意された100種類の配色カラーパレットを指定することも可能です。
640x400pxの「Mondrian」スタイルのダミー画像がこちら。
<img src="https://generative-placeholders.glitch.me/image?width=640&height=400&style=mondrian">
猫好きにはたまらない猫オンリーのPlaceKitten
placekittenは、かわいい子猫限定のダミー画像生成ツール。猫好きのひとにはたまらない、癒し系サービス。
640x400pxのダミー画像を表示した状態がこちら。
<img src="https://placekitten.com/640/400" alt="">
野生のクマ、集めました。placebear
上記サービスに触発された、「クマ」を集めたダミー画像生成ツール。/gで白黒グレイスケールに。
640x400pxのダミー画像を表示した状態がこちら。
<img src="https://placebear.com/g/640/400" alt="">
ベーコン好き集まれ PlaceBacon
なぜ？と思ってしまう、ベーコンに特化したダミー画像生成サイト PlaceBacon。とにかくベーコンが好きでたまらないという、食いしん坊なひとに。
まだまだある！面白ダミー画像生成ツールまとめ
紹介を迷いましたが、個人的にツボだったので保存メモとして。どれも著作権がクリアでないため、あくまで個人向けのテスト、デモ開発での利用に留めておきましょう。
- PlaceCage – 俳優ニコラスケイジだけを集めた、ミーム的ダミー画像ツール。
/gif/を加えると、GIFアニメーション表示 - Fill Murray – 往年のアメリカ俳優フィル・マーレイの画像だけを集めたダミージェネレータ。
- Steven SeGALLERY – 俳優スティーブン・セガールの画像を集めたダミー画像。「沈黙シリーズ」好きのあなたに。
