プレースホルダー画像生成ツール

プレースホルダー画像生成ツールとは？

プレースホルダー画像生成ツールは、レイアウトやモックアップ、コンポーネントライブラリを作るときに手早く仮の画像が欲しいデザイナーやフロントエンド開発者向けの無料ブラウザツールです。正確なピクセル寸法を指定し、背景色と文字色を（HEX 値で入力するかカラーピッカーで）選び、サイズ・比率・メモなどの短いラベルを加えます。ラベルを空にすると、幅と高さ（例：600×400）が自動的に描画されます。結果はライブプレビューで即座に更新され、ビットマップの PNG・JPG・WebP、または鮮明で無限に拡大できる SVG として書き出せます。SVG はマークアップをコピーすることもできます。プロトタイプの画像枠を埋めたり、レスポンシブグリッドを試したり、統一感のあるダミーのサムネイルを作ったりするのに使えます。

プレースホルダー画像生成ツールの使い方

1. 画像の幅と高さをピクセルで入力します。
2. 背景色と文字色を、HEX 値の入力かカラーチップのピッカーで選びます。
3. 任意のラベルを入力します。空にすると寸法（例：600×400）が自動的に表示されます。
4. 出力形式を選びます：PNG・JPG・WebP・SVG。
5. ライブプレビューを確認し、「ダウンロード」をクリックして画像を保存します（SVG ではマークアップのコピーもできます）。

使用例

よくある質問

書き出せる形式は？

4 種類です。PNG・JPG・WebP は canvas に描画したビットマップ画像、SVG はマークアップとして生成するベクター画像です。「形式」ドロップダウンで切り替えます。SVG ではマークアップのテキストを直接コピーすることもできます。

ラベルを空にするとどうなりますか？

画像に自身の寸法（例：600×400）が中央に自動で描画されます。独自のラベルを入力すれば、好きなテキストに置き換えられます。

色はどう設定しますか？

背景または文字のフィールドに #e2e8f0 のような HEX 値を入力するか、小さなカラーチップをクリックしてブラウザ標準のカラーピッカーを開きます。CSS の名前付き色も使えます。変更に合わせてプレビューが更新されます。

透明にしたいのに JPG で背景が塗りつぶされるのはなぜ？

JPG 形式は透明をサポートしないため、黒い領域を避けるよう常に不透明な背景が塗られます。透明な背景が必要な場合は PNG・WebP、または透明な色値を指定した SVG を使ってください。

画像や文字はどこかにアップロードされますか？

いいえ。プレースホルダーは canvas と SVG の API を使ってブラウザ内で完結して描画され、ダウンロードもローカルで行われます。入力・生成した内容がサーバーに送信されることは一切ないため、オフラインでも動作し、作業内容のプライバシーが保たれます。