ダミー画像生成ツール

Web制作やデザイン確認に使えるダミー画像生成ツール

このページでは、指定したサイズ、背景色、文字、枠線、パターンを使って、ダミー画像やプレースホルダー画像をブラウザ上で生成できます。Webサイトのレイアウト確認、画像枠の検証、サンプルデータ作成、デザインモックの仮画像づくりに使えます。

画像はページ内のCanvasで生成されます。設定内容や生成画像をサーバーへ送信せず、手元のブラウザだけでプレビューと保存ができます。

使い方

1. ファイル種類をPNG、WebP、JPEG、GIF、BMP、SVGから選びます。
2. 画像の幅と高さを入力します。0.5倍、2倍、縦横入れ替えも利用できます。
3. 背景色、透過度、パターン、枠線を必要に応じて設定します。
4. 表示したいテキスト、フォント、文字色、文字サイズ、縦横位置を調整します。
5. プレビューを確認し、「画像を保存」ボタンでダウンロードします。

作成できる画像の例

使用できるキーワード

テキスト欄では、画像サイズや形式を自動で表示するキーワードを使えます。ダミー画像の中にサイズや形式を入れておくと、後から見たときに用途を判別しやすくなります。

• {width}：画像の横幅を表示します。
• {height}：画像の高さを表示します。
• {pictype}：選択中の画像形式を表示します。
• {color}：背景色のカラーコードを表示します。

活用例

• 実画像がまだ用意できていない画面のレイアウト確認に使う。
• 画像の縦横比が変わったときのカードやバナーの崩れを確認する。
• デザインレビュー用に、サイズや形式が書かれた仮画像を作る。
• 背景色、枠線、文字位置を変えて、UI上の見え方を比較する。

利用時の注意点

• 画像形式によって、透過や色の再現が異なる場合があります。透過が必要な場合はPNGやWebPを選んでください。
• ブラウザや環境によって、保存できる画像形式やCanvasの出力結果が異なる場合があります。
• 大きすぎるサイズを指定すると、ブラウザの動作が重くなることがあります。
• 生成画像は確認用のダミー画像です。公開用の最終画像として使う場合は、デザインや圧縮品質を別途確認してください。

あわせて使えるツール

画像やHTMLの確認作業では、テキストやHTML変換系のツールと組み合わせると、制作中の仮データを整えやすくなります。