サイズ・背景色・表示テキストを指定して、ダミー画像をSVGとPNGで生成できます。 Data URL・HTML・CSS・JSXのコピー、透過背景、OGPやバナーのサイズプリセットにも対応。
600 × 400 px ／ 縦横比 1.50:1
SVGサイズ 約0.4KB
コピーして貼り付ける
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgNjAwIDQwMCI+CiAgPHJlY3Qgd2lkdGg9IjYwMCIgaGVpZ2h0PSI0MDAiIGZpbGw9IiNlNWU3ZWIiIHJ4PSIwIiByeT0iMCIvPgogIDx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjNmI3MjgwIiBmb250LXNpemU9IjUwIiBmb250LWZhbWlseT0ic3lzdGVtLXVpLCAtYXBwbGUtc3lzdGVtLCAnU2Vnb2UgVUknLCBSb2JvdG8sIHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSJib2xkIj42MDAgw5cgNDAwPC90ZXh0Pgo8L3N2Zz4=<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgNjAwIDQwMCI+CiAgPHJlY3Qgd2lkdGg9IjYwMCIgaGVpZ2h0PSI0MDAiIGZpbGw9IiNlNWU3ZWIiIHJ4PSIwIiByeT0iMCIvPgogIDx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjNmI3MjgwIiBmb250LXNpemU9IjUwIiBmb250LWZhbWlseT0ic3lzdGVtLXVpLCAtYXBwbGUtc3lzdGVtLCAnU2Vnb2UgVUknLCBSb2JvdG8sIHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSJib2xkIj42MDAgw5cgNDAwPC90ZXh0Pgo8L3N2Zz4=" width="600" height="400" alt="placeholder" />background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgNjAwIDQwMCI+CiAgPHJlY3Qgd2lkdGg9IjYwMCIgaGVpZ2h0PSI0MDAiIGZpbGw9IiNlNWU3ZWIiIHJ4PSIwIiByeT0iMCIvPgogIDx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjNmI3MjgwIiBmb250LXNpemU9IjUwIiBmb250LWZhbWlseT0ic3lzdGVtLXVpLCAtYXBwbGUtc3lzdGVtLCAnU2Vnb2UgVUknLCBSb2JvdG8sIHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSJib2xkIj42MDAgw5cgNDAwPC90ZXh0Pgo8L3N2Zz4=");<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgNjAwIDQwMCI+CiAgPHJlY3Qgd2lkdGg9IjYwMCIgaGVpZ2h0PSI0MDAiIGZpbGw9IiNlNWU3ZWIiIHJ4PSIwIiByeT0iMCIvPgogIDx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjNmI3MjgwIiBmb250LXNpemU9IjUwIiBmb250LWZhbWlseT0ic3lzdGVtLXVpLCAtYXBwbGUtc3lzdGVtLCAnU2Vnb2UgVUknLCBSb2JvdG8sIHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSJib2xkIj42MDAgw5cgNDAwPC90ZXh0Pgo8L3N2Zz4=" width={600} height={400} alt="placeholder" /><svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400">
<rect width="600" height="400" fill="#e5e7eb" rx="0" ry="0"/>
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#6b7280" font-size="50" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-weight="bold">600 × 400</text>
</svg>画像の生成・変換はすべてブラウザ内で完結し、外部に送信されません。外部サービスのURLを参照しないため、オフラインやサーバー停止の影響も受けません。
サイズ設定
外観 & カラー
テキスト & スタイル
日本語・記号（& や < など）もそのまま使えます。
プレースホルダー画像（ダミー画像）とは？SVG・PNGで作る仮画像の使い方
プレースホルダー画像とは、Webサイトの制作やアプリのデザイン工程で、本番の画像が用意できるまでの「仮置き」として使うダミー画像のことです。サイズ感やレイアウトのバランスを先に確認できるため、画像素材の準備を待たずにコーディングやデザインを進められます。
本ツールは、サイズ・背景色・文字を指定するだけでダミー画像をその場で生成し、SVGとPNGの両方で保存できるオンラインツールです。拡大しても劣化しない軽量なベクター形式が必要な場面ではSVGを、画像編集ソフトやスライドに貼り付けたい場面ではPNGを選べます。
生成結果はData URL・HTMLのimgタグ・CSSのbackground-image・React（JSX）・Markdown・SVGコードの6形式でワンクリックコピーでき、貼り付けるだけで表示されます。外部サービスのURLを参照しないため、提供元のサーバー停止やオフライン環境でもリンク切れが起きません。
こんなシーンで便利です
Webデザインのワイヤーフレーム制作
「ここにバナーが入る」というアタリを付けたい時に。正確なピクセルサイズを指定して、視覚的なバランスを確認できます。斜線やクロスのパターンを重ねれば、仮画像であることが一目で伝わります。
開発中の読み込みテスト・表示確認
実際の画像アセットが届く前のコーディング段階で。Data URLやJSXのスニペットをコピーして、そのまま貼り付けるだけでプレビューできます。
SNS投稿や記事アイキャッチの仮置き
OGP（1200×630）やYouTubeサムネイル（1280×720）など、主要なサイズをプリセットから一瞬で作成できます。
アイコン・アバターの枠だけ先に用意したい時に
角丸や正方形サイズ、透過背景に対応しているため、アイコン枠やアバターの仮画像としても使えます。PNGで保存すれば透明部分もそのまま保持されます。
プレゼン資料の図解・スペース確保
資料内で「画像挿入予定」の場所を埋めるダミーとして。PowerPointやGoogleスライドに貼るならPNG、拡大しても劣化させたくないならSVGが向いています。
外部のダミー画像サービスが使えない環境で
社内ネットワークやオフライン環境、外部リソースを読み込めない検証環境でも、生成したコードを貼り付けるだけで仮画像を表示できます。
使い方は簡単 4ステップ
- 「サイズ設定」から必要な幅と高さを入力します。プリセットやアスペクト比ボタンからの指定も可能です。
- 背景色・文字色・表示テキスト・角丸・パターンを自由にカスタマイズします。透過背景も選べます。
- 「SVGで保存」または「PNGで保存」でダウンロードします。
- コードで使う場合は、Data URL・HTML・CSS・JSX・Markdown・SVGコードから用途に合う形式をコピーして貼り付けます。
※OGP・YouTube・Instagram・広告バナー・スマホ画面など、よく使うサイズは26種類のプリセットからワンタップで適用できます。
ご利用時の注意点
- SVGとPNGの使い分け：SVGはどれだけ拡大しても劣化せずファイルサイズも軽量ですが、一部の古いソフトでは扱えない場合があります。画像編集ソフトやスライドに貼るならPNGが確実です。
- テキストの自動サイズ調整：文字サイズの欄を空欄にすると、画像の短辺の約1/8を基準に文字サイズが自動計算されます。
- Data URLの活用：コピーしたData URLは、imgタグのsrc属性やCSSのurl()にそのまま貼り付けることで、サーバーへのアップロードなしで表示できます。ただし大きなサイズではコードが長くなるため、本番環境では通常の画像ファイルの利用を推奨します。
- PNG書き出しの仕組み：PNGへの変換はブラウザのCanvas機能を使ってローカルで行っています。画像が外部へ送信されることはありません。
- 入力できるサイズは1px〜8000pxの範囲です。範囲外の値は自動的に丸めて計算します。
ホームページ制作・SNSで使う画像サイズ早見表
Web制作やSNS運用で頻繁に利用される標準的なピクセルサイズとアスペクト比の一覧です。数値をそのままツールに入力すれば、同じサイズのダミー画像を生成できます。
| カテゴリー | 標準サイズ (px) | アスペクト比 / 用途 |
|---|---|---|
| SNS・OGP | 1200 × 630 | 1.91:1（X・Facebook リンク用OGP） |
| YouTube | 1280 × 720 | 16:9（HD・サムネイル推奨） |
| X（旧Twitter） | 1500 × 500 | 3:1（プロフィールヘッダー） |
| 1080 × 1080 | 1:1（フィード・正方形投稿） | |
| 1080 × 1350 | 4:5（フィード・縦長投稿） | |
| 1080 × 1920 | 9:16（リール・ストーリー） | |
| Webバナー | 300 × 250 | レクタングル（中） |
| Webバナー | 336 × 280 | レクタングル（大） |
| Webバナー | 728 × 90 | ビッグバナー |
| Webバナー | 320 × 100 | モバイルバナー |
| Webバナー | 160 × 600 | スカイスクレイパー |
| デバイス | 1920 × 1080 | 16:9（フルHDモニター） |
| デバイス | 1440 × 900 | 16:10（ノートPC） |
| デバイス | 393 × 852 | iPhone 15/16（論理解像度） |
| デバイス | 768 × 1024 | iPad（縦持ち） |
| アイコン | 512 × 512 | 1:1（アプリアイコン・PWA） |
| 黄金比 | 1618 × 1000 | 1.618:1（美しいレイアウト用） |
【表示サイズと書き出しサイズの違いに注意】
スマートフォンの「393×852」などはCSSピクセル（論理解像度）であり、実際の端末は2倍・3倍の画素密度を持ちます。写真などのラスター画像を用意する場合は表示サイズの2倍程度で書き出すのが一般的です。一方、本ツールが生成するSVGはベクター形式のため、何倍に拡大しても劣化せず、高解像度ディスプレイでの検証にもそのまま使えます。
【SVG・PNG・Data URLの使い分け】
レイアウト確認やコーディング中の仮置きにはData URL＋SVGが最適です。外部リクエストが発生しないため表示速度の検証を妨げず、リンク切れも起きません。デザインカンプへの貼り付けや、SVGを扱えないツールで使う場合はPNGを選んでください。なお本番環境では、Data URLはHTMLやCSSのファイルサイズを増やすため、通常の画像ファイルへの差し替えを推奨します。
※各SNSの推奨サイズは仕様変更により更新される場合があります。最新の公式情報も併せてご確認ください。
モダンフロントエンド開発と画面設計を効率化するダミー画像の運用テクニック
静的な仮置き画像を、実務レベルのコーディングやデザインシステム運用に組み込むための実践的なアプローチを解説します。
外部のプレースホルダーURLサービスに依存しないという選択
外部サービスのURLを直接HTMLに書く方法は手軽ですが、提供元の停止・仕様変更・オフライン環境で一斉にリンク切れになるリスクを抱えます。
本ツールのData URLは画像データそのものを文字列にしたものなので、コードに貼り付けた時点で外部への依存がなくなります。社内ネットワークや外部通信が制限された検証環境でも、同じ見た目を再現できます。
ReactやNext.jsにおけるコンポーネント単位のUIスタブ
コンポーネント駆動開発（CDD）やStorybookを用いたUI設計では、個別のUI要素がアセットの有無に依存しない独立性を持つことが理想です。
本ツールで生成したData URLをPropsのデフォルト値（fallback）としてコンポーネント内に持たせておくことで、カタログ表示や単体テスト実行時にも壊れないコンポーネントを設計できます。JSX形式のスニペットをそのままコピーして使えます。
CSSグリッドやFlexboxのレスポンシブ崩れを事前に検証する
ビューポートに応じて要素の幅や高さが可変する流動レイアウトの検証には、実寸のダミー画像が欠かせません。
生成した軽量SVGをCSSのaspect-ratioやobject-fitと組み合わせることで、画像アセットがまだ存在しない段階からブレイクポイントごとの挙動を再現し、テキストの回り込みや親要素のはみ出しといった表示崩れを未然に防げます。
レイアウトシフト（CLS）を防ぐために幅と高さを明示する
画像の読み込み前後で要素の高さが変わると、レイアウトシフト（CLS）が発生してCore Web Vitalsのスコアが悪化します。
本ツールのHTML・JSXスニペットにはwidthとheight属性が自動で付与されるため、貼り付けるだけで寸法が明示された状態になります。仮画像の段階からこの習慣をつけておくと、本番画像への差し替え後もレイアウトが安定します。
ワイヤーフレームでは「仮画像だと一目で分かる」ことが重要
レビューの場で仮画像が本番素材と誤解されると、指摘や意思決定がずれる原因になります。
斜線やクロスのパターンを重ねる、テキストに「画像差し替え予定」「推奨 1200×630」といった指示を入れるなど、見た瞬間に仮置きだと伝わる表現にしておくと、デザイナーとエンジニアの認識合わせがスムーズになります。
透過背景のダミーでアイコン・ロゴ枠を先に確保する
ロゴやアイコンは背景色が確定していない段階で配置することが多く、白背景のダミーを置くと周囲と馴染まずレイアウト判断を誤ります。
背景を透過にしたPNGを仮置きすれば、ヘッダーの背景色を変えても違和感なく検証でき、余白やサイズ感の確認に集中できます。
よくある失敗と対策
外部のダミー画像URLサービスを利用中に、サーバー停止やオフライン環境で画像が非表示になる
外部APIの画像URLをHTMLに直書きして開発していると、テスト環境がオフラインになった際や、提供元サーバーが停止した瞬間にすべての仮画像がリンク切れになり、UIの実装作業がストップします。
💡 対策・解決策を見る▼
ダミー画像のファイルサイズが肥大化し、表示速度（LCP）の検証が正確にできない
仮置き段階でPNGやJPEGの重いダミー画像を大量に使用すると、ファーストビューの読み込みが遅延し、Core Web Vitalsのスコアを正確に測定できなくなります。
💡 対策・解決策を見る▼
高解像度（Retina）ディスプレイの検証でダミー画像がぼやけ、正確なレイアウト確認ができない
ピクセルベースのダミー画像をそのままレスポンシブ検証に流用すると、高画素密度環境で画像のエッジが不鮮明になり、テキストの視認性や余白バランスの判断を誤る原因になります。
💡 対策・解決策を見る▼
ダミー画像のテキストサイズが枠からはみ出す、または小さすぎて判別できない
異なるアスペクト比の画像を複数作る際に文字サイズを固定値で指定していると、サイズ変更の拍子にテキストが枠外にはみ出したり、読めないほど縮小してしまいます。
💡 対策・解決策を見る▼
画像内のテキストに記号を入れたら画像が真っ白になって表示されない
「A & B」「<商品名>」のようにアンパサンドや不等号を含むテキストを入れると、SVGの構文として不正になり画像が壊れてしまうケースです。
💡 対策・解決策を見る▼
仮画像のまま本番公開してしまい、Data URLがHTMLを肥大化させる
差し替えを忘れたままリリースしてしまい、長大なData URLがHTMLやCSSに残ってファイルサイズを押し上げてしまう失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.PNG形式でダミー画像を保存することはできますか
A. できます。「PNGで保存」ボタンを押すと、指定したピクセルサイズそのままのPNGファイルとしてダウンロードされます。変換はブラウザ内のCanvasで行うため、画像が外部サーバーへ送信されることはありません。拡大しても劣化しないベクター形式が必要な場合は「SVGで保存」をお使いください。
Q.背景を透明（透過）にしたプレースホルダー画像は作れますか
A. 作れます。「背景を透過にする」にチェックを入れると、背景の塗りがない状態で生成され、PNGで保存した場合も透明部分が保持されます。プレビュー上では市松模様で透明部分を表示します。アイコンやロゴの仮置きなど、背景色を後から変えたい場面に便利です。
Q.placehold.jpのようなURL指定型のサービスとは何が違いますか
A. URL指定型のサービスは外部サーバーへ画像を取りにいくため、提供元の停止やオフライン環境ではすべての仮画像がリンク切れになります。本ツールは生成した画像をData URL（画像そのものを文字列にしたもの）として出力するため、そのままimgタグのsrc属性やCSSに貼り付ければ外部通信が一切発生しません。URLと同じ感覚で使えて、サーバー障害や回線状況の影響を受けないのが違いです。
Q.生成したData URLはどこに貼り付ければよいですか
A. 用途に応じて5つの形式をワンクリックでコピーできます。HTMLのimgタグ、CSSのbackground-image、React（JSX）、Markdown、そしてSVGのソースコードそのものです。たとえばHTML形式をコピーすれば、そのままエディタに貼り付けるだけで画像が表示されます。
Q.テキストに「&」や「<」などの記号を入れても画像は壊れませんか
A. 壊れません。入力されたテキストはXMLとして安全な形に自動変換したうえでSVGに埋め込まれるため、アンパサンドや不等号、引用符を含む文字列でも正しく表示されます。日本語や絵文字もそのまま利用できます。
Q.アスペクト比を固定したまま片方のサイズだけ変えられますか
A. できます。1:1・4:3・3:2・16:9・1.91:1・9:16の比率ボタンを選ぶと縦横比が固定され、横幅を変えると高さが自動で追従します。「自由」に戻せば個別に指定できます。「縦横を入れ替え」ボタンで、横長と縦長を一度に切り替えることも可能です。
Q.OGPやバナーなど、よく使う画像サイズはプリセットにありますか
A. SNS・OGP、Web・PC、Web広告バナー、モバイル・タブレット、アイコンの5カテゴリに分けて、合計26種類のプリセットを用意しています。OGP（1200×630）、YouTubeサムネイル（1280×720）、Instagram各種、レクタングル広告（300×250）、iPhone・Androidの画面サイズなどをワンタップで適用できます。
Q.作成した画像のサイズを変更したときに文字がはみ出ることはありませんか
A. ありません。文字サイズの欄を空欄（Auto）にしておくと、入力した幅と高さの短い方を基準に文字サイズが自動計算されます。縦長のモバイルサイズから横長のバナーサイズまで、文字が枠外にはみ出る心配はありません。任意の数値を入れて固定することもできます。
Q.このツールで生成したダミー画像は商用利用しても問題ありませんか
A. はい。生成されたプレースホルダー画像は、商用・非商用を問わず完全無料で自由にご利用いただけます。Webサイトの制作、アプリの開発、プレゼン資料への仮置きなど、幅広いデザイン業務やコーディング作業に役立ててください。
Q.インターネットに接続していないオフライン環境でも画像の生成は機能しますか
A. はい、機能します。当ツールは完全ローカル処理型の設計を採用しており、外部のサーバーと一切通信を行うことなくダミー画像を生成します。そのため、ネットワークが繋がらない環境であっても動作が止まることはありません。
Q.入力したサイズやカラーなどのデータが外部に漏洩するリスクはありませんか
A. 一切ありません。入力およびカスタマイズされた設定内容は、すべてお使いのブラウザ内（メモリ上）でのみ処理され、外部のデータベース等に送信・保存されることはありません。ページを閉じればデータは即座に完全消去されるため安全です。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。