ダミー画像プレースホルダー作成

幅・高さ・色・テキストを指定するだけで、モックアップ用のダミー画像(プレースホルダー)SVGコピーやPNG/JPGダウンロードで作れます。

×

📖 使い方・くわしい説明

使い方

  1. プリセットボタンを押すか、幅・高さ(px)を直接入力してサイズを決めます(1〜5000の範囲)。
  2. 背景色・文字色をカラーピッカーまたはHEXコードで指定します。必要に応じて「角を丸くする」をオンにします。
  3. 表示テキストを入力します(空欄のままだと「幅×高さ」が自動で入ります)。プレビューがリアルタイムで更新されます。
  4. 「SVGをコピー」でコードをクリップボードへ、「PNG / JPGをダウンロード」で指定した実寸の画像を保存できます。

こんな場面で使えます

  • Figmaやスライド、HTMLのモックアップで、写真が決まる前の仮画像を置いておきたいとき
  • OGP・バナー・サムネイルなど、決まったサイズの確認用ダミーが欲しいとき
  • レイアウト検証のために、特定サイズの色付きブロックをサッと用意したいとき
  • SVGとしてコピーして、デザインツール上で色や文字をあとから編集したいとき

よくある質問

ダミー画像(プレースホルダー)とは何ですか?
デザインのモックアップやワイヤーフレームを作るときに、まだ用意できていない写真や図版の代わりに置いておく「仮の画像」のことです。サイズや位置だけ確認したいときに便利で、後から本番の画像に差し替えます。
SVGコピーとPNG/JPGダウンロードはどう使い分けますか?
SVGは文字や色をあとから編集でき、拡大しても劣化しないため、FigmaやIllustratorに貼り付けて使う場合に向いています。PNG/JPGは指定した実寸のラスター画像として書き出されるので、そのままHTMLやスライドに貼りたいときに便利です。透過が不要ならJPGの方が軽くなります。
画像はサーバーにアップロードされますか?
いいえ。すべての処理はお使いのブラウザ内(JavaScript)で完結します。入力した値や生成した画像が外部に送信されることはありません。
テキスト欄を空にするとどうなりますか?
自動で「幅×高さ」(例:1200×630)が中央に表示されます。任意の文字(例:「メイン画像」「写真が入ります」など)を入れて表示することもできます。
シェア B!