Webサイトのモックアップ(プロトタイプ)を制作していると、「ここには画像を置きたいんだけど、まだ用意できてないので代替の画像を……」というような状況の際にダミー画像を用意することがあるでしょう。しかし、ダミー画像をその都度作るのは面倒です。そこで今回は、そんな時に便利なダミー画像の生成サービスを紹介します。

DummyImage.com と Placehoid.it

ダミー画像、英語では「Placeholder(プレースホルダー) Image」ともいいますが、その生成サービスとして比較的有名なサービスは「DummyImage.com」と「Placehold.it」でしょう。

DummyImage.com

Placehold.it

どちらのサービスも、生成したい画像のサイズや色コードをURLに与えるだけで、思い通りの画像を生成することができます。

DummyImage.com の画像生成ルール

ダミー画像を生成するためのURLの書式は以下の通りです。

http://dummyimage.com/横サイズx縦サイズ/背景色/文字色.フォーマット&text=テキスト

試しに以下のURLコピー&ペーストしてブラウザで表示してみてください。

  • DummyImage.com のURL例
    http://dummyimage.com/300x200/ff0000/0000ff.gif&text=This+is+a+dummy+image

DummyImage.comで生成したダミー画像

背景色、文字色の部分には「ff0000」のような16進数のRGB値を指定します。「ff0000」は「f00」のような短縮型で指定することも可能です。

フォーマットには「gif, jpg, png」のいずれかを指定できます。textパラメータで指定するテキストはダミー画像の上に表示される文字列で、日本語を指定することもできます。

Placehold.it の画像生成ルール

では、Placehold.itではどうでしょうか。

http://placehold.it/横サイズx縦サイズ/背景色/文字色.フォーマット&text=テキスト

  • Placehoid.it のURL例
    http://placehold.it/300x200/ff0000/0000ff.gif&text=This+is+a+dummy+image

Placehold.itで生成したダミー画像

こうして見ると、どちらのサービスもパラメータの指定のルールがまったく同じですが、実はどちらも中身は同じものです。

DummyImage.comの開発者である kingkool68 氏がHacker Newsにて「placehold.it and dummyimage.com are one in the same. Source code is available at dummyimage.com」とコメントしているように、DummyImage.comのソースコードはMITライセンスのもと、サイトで公開されているのです。

というわけでDummyImage.comについて説明を続けます。

画像サイズの指定には、数値での指定のほかに「キーワード」で指定する方法も用意されています。キーワードとは、例えば国際標準のバナーサイズ、ディスプレイの解像度サイズ、ビデオ標準のサイズなどのわかりやすい名称です。

  • largerectangle (バナー広告 336x280)
    http://dummyimage.com/largerectangle
  • xga (XGAサイズ 1024x768)
    http://dummyimage.com/xga

指定可能なキーワードの一覧は、DummyImage.comのサイトに掲載されています。しかし馴染みのない単語が多いので、個人的にはキーワードでの指定よりも数値で指定する方がパッと見てわかりやすいかなと思います。

flickholdr.com と placekitten

さて、DummyImage.comでは色や文字を指定できるものの、無地で面白味のない画像しか生成できません。Webサイトを作った時に無地の画像だとテンションが上がらない、というタイプの人には次の2つのダミー画像生成サービスがおすすめです。

flickholdr.comの画像生成ルール

flickholdr.comは、Flickrの画像を利用したダミー画像生成サービスです。Flickrの検索APIを利用しており、クリエイティブ・コモンズ・ライセンスで公開されている写真のみを対象としています。さらに、ライセンス条件にある著作者の表示に対応するため、写真には自動的に著作者名が表示されるようになっています。

flickholdr.com

このflickholdr.comの画像生成ルールは以下の通りです。

http://flickholdr.com/横サイズ/縦サイズ/タグ
http://flickholdr.com/横サイズ/縦サイズ/タグ/bw
http://flickholdr.com/横サイズ/縦サイズ/タグ/オフセット

  • flickholdr.com のURL例
    http://flickholdr.com/360/240/sakura
    http://flickholdr.com/360/240/sakura/bw
    http://flickholdr.com/360/240/sakura/3

flickholdr.comで生成したダミー画像

「タグ」はFlickrの写真につけられている「タグ」で、写真の検索に利用されます。タグの後ろにつけられるオプション「bw」は、グレースケール(白黒)の画像を生成するためのオプションです。常に同じ画像が返ってくるのを避けたい場合は、URLの最後に指定する「オフセット」の数値を変えることで対応できます。

Flickrの写真が対象となるので画像のフォーマットはJPEG画像のみ。タグに日本語を指定することはできません。

placekitten の画像生成ルール

placekittenは、「kitten」という名の通り「子猫の写真」のダミー画像を生成できるという、猫好きにはたまらないサービスです。こちらのサービスで利用されている子猫写真もFlickrの写真が利用されています。

placekitten

placekittenの画像生成ルールは以下の通りです。

http://placekitten.com/横サイズ/縦サイズ
http://placekitten.com/g/横サイズ/縦サイズ

  • placekitten のURL例
    http://placekitten.com/360/240
    http://placekitten.com/g/360/240

placekittenで生成したダミー画像

URLに「g」をつけると、flickholdr.comと同様にグレースケールの写真を生成できます。どんなサイズを指定しても、子猫の写真ばかり生成されるという楽しいサービスです。

今回はWebサイトのモックアップを作る時に使える「ダミー画像」の自動生成サービスを紹介しました。これらのサービスはオンラインでないと利用できないので、オフライン環境で利用する場合はあらかじめ画像をダウンロードしておいてから利用してください。

著者紹介

F.Ko-Ji

ブログやネットサービスを運営するブロガー兼Webエンジニア。大手IT系企業、ベンチャー系Web開発企業を経てフリーに。『F.Ko-Jiの「一秒後は未来」』というブログや、「Meity」「DailyFeed」「梅酒.in」といったサービスを運営しています。