ダミー画像生成

1. よく使う大きさのボタンを押すか、幅と高さを直接入力します。
2. 保存する形式を選びます。透明にしたい場合は PNG・WebP・SVG を選んでください。
3. 背景色・文字色・模様を選び、必要なら中に入れる文字を入力します（空欄なら大きさが入ります）。
4. できあがりがその場で表示されます。「ダウンロード」で保存します。
5. HTML に直接貼りたい場合は「データURIをコピー」または「img タグをコピー」を使います。

ウェブサイトやアプリのデザインを進めるとき、写真やイラストがまだ用意できていないことがあります。そこに何も置かないとレイアウトが崩れて見えるため、本番と同じ大きさの仮の画像を置いて確認します。これがダミー画像（プレースホルダ画像）です。
画像の中に大きさが書かれていると、どの枠がどのサイズなのかひと目で分かるため、複数の画像枠があるページの確認がぐっと楽になります。

ダミー画像は外部のサービスから URL で読み込む方法が広く使われていますが、その方法には弱点があります。サービスが停止したり、通信が遮断された環境ではすべての画像が表示されなくなることです。社内ネットワークや、外部への通信を制限した環境ではよく起こります。
このツールは画像をお使いのブラウザの中だけで作ります。保存したファイルやデータURIはそれ自体が画像なので、外部への通信は一切発生しません。オフラインでも確実に表示されます。

PNG は透明を扱えて劣化もないので、基本はこれで問題ありません。JPEG は写真の代わりに置く場合に適していて、ファイルが小さくなります（透明は扱えません）。WebP は同じ見た目でいちばん軽くなりますが、古いブラウザでは表示できないことがあります。
SVG は少し性質が異なり、点の集まりではなく図形の指示として保存されます。そのためどれだけ拡大しても輪郭がぼやけません。またファイルの中身が短いテキストなので、データURIにしたときの長さがとても短くなります。CSS や HTML に直接埋め込むなら SVG がおすすめです。

「データURIをコピー」で得られる文字列は、画像そのものを文字に置き換えたものです。<img src="data:image/png;base64,..."> のように貼ると、画像ファイルを用意しなくても画像が表示されます。HTML のモックアップを1ファイルで完結させたいときや、メールのテンプレート確認などに便利です。
ただし文字数は元のファイルサイズのおよそ1.37倍になります。大きな画像だと HTML が読みにくくなるため、目安として10万文字を超えるようならファイルとして保存するほうが扱いやすくなります。画面に文字数を表示しているので参考にしてください。

対角線は、写真が入る枠であることを示す昔からの記法です。デザインのレビューで「ここは画像です」と伝わりやすくなります。方眼は画像の中に別の要素を重ねるときの位置合わせに使えます。市松模様は透明を表す模様として広く使われているため、切り抜き画像が入る枠の目印になります。
無地が必要な場合は「なし」を選んでください。背景色を薄いグレーにしておくと、白い背景のページでも枠がはっきり分かります。

文字の大きさを「自動」にすると、画像の短い辺と文字数の両方から計算して、はみ出さない大きさを選びます。728×90 のような細長いバナーでも、1080×1920 のような縦長でも文字が枠に収まります。
複数の画像を並べて見比べるときなど、文字の大きさをそろえたい場合は数値で指定してください。

作った画像は商用利用できますか？

できます。単色や模様と文字だけで構成された画像で、著作物の利用は含まれていません。制作物のモックアップや納品物の一部としてもご利用いただけます。

画像はサーバーに送られますか？

送られません。画像はすべてお使いのブラウザの中で作られ、保存もご自身の端末に対してのみ行われます。

透明な背景の画像は作れますか？

作れます。「背景を透明にする」にチェックを入れてください。ただし透明を扱えるのは PNG・WebP・SVG です。JPEG を選ぶとチェックは無効になり、背景が塗りつぶされます。

指定できる大きさに上限はありますか？

幅・高さともに 4000px までです。これを超える値を入れた場合は 4000px に丸められます。

データURIとimgタグのコピーはどう違いますか？

データURIは画像そのものを表す文字列です。imgタグのコピーは、そのデータURIに幅・高さ・alt属性を付けた HTML の1行をまとめてコピーします。そのまま貼るだけで表示されます。

日本語の文字も入れられますか？

入れられます。PNG・JPEG・WebP はお使いの端末のフォントで描画されます。SVG は表示する環境のフォントに依存するため、他の環境で開くと字形が変わることがあります。

このツールで作られる画像は、単色・模様・文字のみで構成された確認用の画像です。写真やイラストは含まれません。生成された画像の利用に制限はありませんが、実際の公開時には正式な素材への差し替えをお忘れなくご確認ください。画像はブラウザ内で生成され、当サイトのサーバーには送信・保存されません。