ダミーイメージの生成ツールを目的別に使い分ける

  • あとで読みたい人は…

@cappeeです。

特にシステム案件のコーディングをしていると、後に動的に出力されるため、ひとまずアタリの画像を入れておきたいという場合がとても多いです。

そんなダミーイメージを生成してくれるとてもありがたいツールがたくさんあるので、使用目的別にご紹介したいと思います。

バナーや広告、コンテンツのダミー

バナーや広告のダミーイメージはグレー背景にサイズが表示されるシンプルなものを置くとわかりやすいです。

Dynamic Dummy Image Generator

dummy ダミーイメージの生成ツールを目的別に使い分ける

Dynamic Dummy Image Generator

ダミーイメージといえばこちらは老舗ですよね。生成ツールをわざわざ使わなくてもURLにサイズや色を指定するだけでOKです。

画像の中に日本語でテキストを入れることもできるので、まだ追加されるかわからないコンテンツ枠をワイヤー的に表示することもできます。

http://dummyimage.com/600x400/000/fff.gif&text=追加コンテンツ

PLACEHOLD.IT

Placehold ダミーイメージの生成ツールを目的別に使い分ける

PLACEHOLD.IT

こちらも上記とほぼ同じなのですが、サイズ表示のみのシンプルなダミーイメージに向いています。数字のフォントがかわいいので、そっけなくなりすぎません。

http://placehold.it/350x150

ビジュアル画像やユーザー画像のダミー

今回一押しでご紹介したいのがこちらの生成ツールです。

lorempixel

lorempixel ダミーイメージの生成ツールを目的別に使い分ける

lorempixel

何が優れているかというと、サイズにプラスして「animals(動物)」や「nature(自然)」など写真付きのダミーイメージを生成してくれます。モノクロも可能です。

動物

lorempixel2 ダミーイメージの生成ツールを目的別に使い分ける

自然

lorempixel3 ダミーイメージの生成ツールを目的別に使い分ける

同じカテゴリの画像でも数種類用意されているので用途に合わせて特定の写真を指定したり、ランダムで表示することもできます。

末永く重宝しそうなダミーイメージです。

http://lorempixel.com/400/200/animals

ダミーイメージの注意点

生成ツールのURLを直接指定しているので多くの画像を貼り付けるとサイトが重くなって作業が非効率になる場合があります。
重く感じたらローカルにダウンロードして使うなどしてください。

下記は今回ダミーイメージを探すのに参考にしたサイトです。ダミーテキストの生成ツールなんかもあるのでぜひご覧ください。

これは便利!ダミーテキストとアタリ画像を生成できるツール7選(サイト閉鎖)
ダミー画像を簡単に作成出来るWebサービス フードやスポーツなどイメージも可能 lorempixel

Pocket
article clipper ダミーイメージの生成ツールを目的別に使い分ける

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)