プレースホルダー画像ジェネレーター

最大 4000×4000 の好きなサイズで、色とラベルを指定したプレースホルダー画像を作成。PNG、JPEG、WebP、SVG でダウンロードでき、データ URI のコピーも可能。外部サービス不要です。

幅（px）

高さ（px）

背景色

文字色

ラベル

空欄にするとサイズを表示します。

整形

プレースホルダー画像ジェネレーターとは？

1 〜 4000 ピクセルの好きなサイズで、寸法（640×360 など）または独自のラベルを表示するシンプルなプレースホルダー画像を作ります。背景色と文字色を選び、PNG、JPEG、WebP、SVG として書き出せます。画像はローカルで描画されるため、プレースホルダー用の Web サービスに依存しません。

プレースホルダー画像ジェネレーターの使い方

幅と高さをピクセルで入力します。
背景色 と 文字色 を選び、ラベル を入力します。空のままにするとサイズが表示されます。
形式を選びます。
画像をダウンロードするか、SVG コードやデータ URI をコピーします。

例

入力

Width 300, Height 150, Background #cccccc, Text color #555555, Format SVG

出力

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150" viewBox="0 0 300 150"><rect width="100%" height="100%" fill="#cccccc"/><text x="50%" y="50%" fill="#555555" font-family="Arial, Helvetica, sans-serif" font-size="30" text-anchor="middle" dominant-baseline="central">300×150</text></svg>

プレースホルダー画像ジェネレーターを使うべき場面

ワイヤーフレーム、デザインのモックアップ、レスポンシブレイアウトや画像コンポーネントのテスト、CMS や EC のデモのデータ投入に使います。現実的なプレビューには実際の写真やストックフォトを、ぼかしのロード用プレースホルダーには、実際の画像の低解像度版を使ってください。

プレースホルダー画像ジェネレーターの仕組み

PNG、JPEG、WebP では、指定サイズの HTML キャンバスに画像を描画します。塗りつぶした長方形と、Arial で中央に置いたラベルで、フォントサイズは短い辺の 5 分の 1 です（長いラベルは収まるよう縮小されます）。それを canvas.toDataURL で書き出します。SVG では、<rect> と中央揃えの <text> 要素を持つ小さなベクターファイルを書き出し、どんな拡大率でも鮮明で、通常は 400 バイト未満です。