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

モックアップやワイヤーフレーム用の仮画像(プレースホルダー)を、その場でサッと作れるツールです。
幅・高さ・色・テキストを指定して、SVGをコピーするか、PNG / JPGでダウンロードできます。
OGPや16:9などの比率プリセットも用意。すべてブラウザ内で処理し、画像はサーバーに送信されません。

×

使い方

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

こんな場面で使えます

よくある質問

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