Web制作に役立つダミー画像生成Webサービスまとめ

画面のモックやワイヤーフレームを作る時に、さくっとダミー画像を付けられると便利ですよね。

そんなダミー画像を作るのに便利な、よく使っているWebサービスを3つご紹介します。

QUICKIMAGE.IT

• QUICKIMAGE.IT

個人的に一番利用していたPLACEHOLD.ITが、ある時から不正アクセス対策としてリクエストに認証が必要になり、気軽に使えなくなってしまいました。

しばらく離れていたのですが、気が付いた頃にそのミラーサイトとして提供されていたのがQUICKIMAGE.ITです。

使い勝手はPLACEHOLD.ITと一緒です。

imgタグにサイズを指定したURLを入れるだけで画像を表示できます。

[html]
<img src="http://quickimage.it/350×150" />
[/html]

画像形式（gif, jpeg, jpg, png）、テキスト、色を変えるオプションもあります。

[html]
<img src="http://quickimage.it/350×150.png/000000/ffffff/&text=This+is+a+pen!" />
[/html]

デフォルトでもカッコよく出てくれるので、敷居も低くとても使いやすいサービスだと思います。

Placehold.jp

• Placehold.jp

ソフテルという会社が作成した国産サイトです。

ドメインで分かるようにPLACEHOLD.ITを踏襲している？せいか基本的な使い方は似ています。

基本はサイズを指定したURLで。

[html]
<img src="http://placehold.jp/350×150.png" />
[/html]

国産だけあってテキスト指定は日本語もOKです。

[html]
<img src="http://placehold.jp/24/000000/ffffff/350×150.png?text=これはペンです！">
[/html]

特徴的な機能として、cssレイアウトを組んだりすることもできます。

[html]
<img src="http://placehold.jp/24/000000/ffffff/350×150.png?text=これはペンです！&css=%7B%22border-radius%22%3A%2215px%22%2C%22background%22%3A%22%20-webkit-gradient(linear%2C%20left%20top%2C%20left%20bottom%2C%20from(%23666666)%2C%20to(%23cccccc))%22%7D">
[/html]

管理画面に画像生成フォームや画像サイズのプリセットも付いていたりするので、なかなか使いやすいサービスです。デフォルトの出方がもう少しイケてるとさらに嬉しい気がしますが。

Cambelt

• Cambelt

最近知ったサービスですが、これはカッコいいサイトですね。。

シンプルかつ見た目も良いし、機能も前述のサービスより多くて使い勝手も良い。もう今後はこれがあれば足りるな、、という位の印象です。

基本的な使い方はCambeltも同様で、指定のURLをimgタグに設定します。

[html]
<img src="http://cambelt.co/350×150" />
[/html]

もちろん色を変えたりテキストを指定したりできます。テキストに日本語はNGのようです。

[html]
<img src="http://cambelt.co/350×150/This+is+a+pen!?color=234653,eeeeee" />
[/html]

HTTPS対応なんてこともできます。至れり尽くせりですね。

[html]
<img src="http://cambelt.co/350×150/This+is+a+secure+pen!" />
[/html]

Webフォントを指定することもできるようです。これは楽しい。

[html]
<img src="http://cambelt.co/350×150/This+is+a+secure+pen!?font=Speedway" />
[/html]

アイコンを表示するなんてことまで。

[html]
<img src="http://cambelt.co/icon/bubble/350×150" />
[/html]

2014/11/26追記

こちらの記事も合わせてご覧ください！