サイズ・背景色・表示テキストを指定して、ダミー画像（SVG）をワンクリックで生成できます。 Web制作やデザイン作業に最適です。
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgNjAwIDQwMCI+CiAgPGRlZnM+CiAgICAKICA8L2RlZnM+CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2U1ZTdlYiIgcng9IjAiIC8+CiAgCiAgPHRleHQKICAgIHg9IjUwJSIKICAgIHk9IjUwJSIKICAgIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiCiAgICB0ZXh0LWFuY2hvcj0ibWlkZGxlIgogICAgZmlsbD0iIzZiNzI4MCIKICAgIGZvbnQtc2l6ZT0iNTAiCiAgICBmb250LWZhbWlseT0ic3lzdGVtLXVpLCAtYXBwbGUtc3lzdGVtLCBzYW5zLXNlcmlmIgogICAgZm9udC13ZWlnaHQ9ImJvbGQiCiAgPgogICAgNjAwIMOXIDQwMAogIDwvdGV4dD4KPC9zdmc+" />サイズ設定
外観 & カラー
テキスト & スタイル
プレースホルダー画像生成ツールとは？
本ツールは、Webサイトの制作やアプリのデザイン工程で必要になる「仮画像（ダミー画像）」を、自由なサイズとデザインで即座に生成できるオンラインツールです。 サーバーを介さずブラウザ上でSVG形式を生成するため、軽量で劣化がなく、かつ完全にオフラインで動作するのが特徴です。
こんなシーンで便利です
Webデザインのワイヤーフレーム制作
「ここにバナーが入る」というアタリを付けたい時に。正確なピクセルサイズを指定して、視覚的なバランスを確認できます。
開発中の読み込みテスト・表示確認
実際の画像アセットが届く前のコーディング段階で。Data URLをコピーして、HTMLにそのまま貼り付けてプレビュー可能です。
SNS投稿や記事アイキャッチの仮置き
YouTubeのサムネイル（1280x720）やTwitter（X）のヘッダーサイズなど、主要なサイズを一瞬で作成できます。
プレゼン資料の図解・スペース確保
資料内で「画像挿入予定」の場所を埋めるダミーとして。SVG形式なので、拡大して貼ってもボケません。
使い方は簡単 3ステップ
- 「サイズ設定」から必要な幅（Width）と高さ（Height）を入力します。
- 背景色やテキスト内容、グリッド・ドットなどのパターンを自由にカスタマイズします。
- 「SVGを保存」または「Data URLをコピー」をクリックして利用します。
※主要デバイスのサイズはプリセットボタンからワンクリックで適用できます。
ご利用時の注意点
- SVG形式のメリット：本ツールはSVG形式を生成します。PNGやJPGと異なり、どれだけ拡大しても境界線がぼやけず、ファイルサイズも非常に軽量です。
- テキストの自動サイズ調整：フォントサイズを「Auto」に設定すると、画像の大きさに合わせて中央のテキストサイズが自動的に最適化されます。
- Data URLの活用：コピーしたData URLは、imgタグのsrc属性にそのまま貼り付けることで、サーバーへのアップロードなしで表示可能です。
主要なWeb・SNS画像サイズ早見表
Web制作やSNS運用で頻繁に利用される標準的なピクセルサイズとアスペクト比の一覧です。
| カテゴリー | 標準サイズ (px) | アスペクト比 / 用途 |
|---|---|---|
| SNS・OGP | 1200 × 630 | 1.91:1 (X・FB リンク用OGP) |
| YouTube | 1280 × 720 | 16:9 (HD・サムネイル推奨) |
| 1080 × 1350 | 4:5 (フィード・縦長投稿) | |
| 1080 × 1920 | 9:16 (リール・ストーリー) | |
| Webバナー | 300 × 250 | レクタングル (中) |
| Webバナー | 728 × 90 | ビッグバナー |
| デバイス | 1920 × 1080 | 16:9 (フルHDモニター) |
| デバイス | 375 × 812 | iPhone 13/14等 (モバイル画面) |
| 黄金比 | 1618 × 1000 | 1.618:1 (美しいレイアウト用) |
【ダミー画像とSVGのメリット】
当ツールで生成されるSVG形式のプレースホルダー画像は、拡大してもエッジがぼやけません。 特に高解像度（Retina）ディスプレイの検証において、ピクセルベースのダミー画像よりも正確なレイアウト確認が可能です。
【検索意図への対応】
「プレースホルダー画像」や「ダミー画像」をお探しの際、特定のデバイスサイズ（モバイル・PC）や、SNSの推奨サイズ（OGP・ヘッダー）でアタリを付けたい場合に、上記の表を参考に数値を入力してください。 Webサイトの表示速度改善のためのLCP（最大視覚コンテンツ）の仮置きテストにも最適です。
モダンフロントエンド開発と画面設計を効率化するコンポーネント指向のダミー画像運用テクニック
モックアップ作成やコンポーネント駆動開発において、静的な仮置き画像を一歩進んだ実務レベルのコーディングやシステム設計に組み込むための実践的なアプローチを解説します。
ReactやNext.jsにおけるコンポーネント単位のUIスタブとプレースホルダーのカプセル化
コンポーネント駆動開発（CDD）やStorybookを用いたUI設計では、個別のUI要素がアセットの有無に依存しない独立性を持つことが理想です。
本ツールで生成したData URLをダミーアセットのPropsデフォルト値（fallback）としてコンポーネント内にカプセル化しておくことで、Storybook上でのカタログ表示や単体テスト実行時に壊れない強固なコンポーネントを設計できます。
CSSグリッドやFlexboxのレスポンシブ崩れを防ぐアスペクト比固定と流動レイアウトのシミュレーション
現代のWeb制作における画面設計では、ビューポートに応じて要素の幅や高さが可変する流動レイアウト（Fluid Layout）の検証が必須です。
生成した軽量SVGコードをCSSのaspect-ratioプロパティやobject-fitと組み合わせることで、画像アセットがまだ存在しない段階からブレイクポイントごとのレイアウトの挙動を厳密にエミュレートし、テキストの回り込みや親要素のはみ出しといった表示崩れを未然に防ぎます。
UIデザインツールとの連携によるデザインシステム（Figma）上のスペース確保とエンジニアへの指示
FigmaやAdobe XD等でワイヤーフレームやコンポーネントを作成する際、開発側へ受け渡す仕様書に正確な制約を明記する必要があります。
バナー枠やアバターアイコン予定地に本ツールで生成したカスタマイズテキスト（例：「推奨 1200x630 OGP」）を中央配置したSVGをコンポーネントとして埋め込んでおくことで、デザインシステム内での情報伝達スピードが向上し、開発段階でのサイズ実装ミスを根絶できます。
よくある失敗と対策
ダミー画像のファイルサイズが肥大化し、表示速度（LCP）検証やPageSpeed Insightsのスコアが低下する
Web制作のコーディングや仮置き段階でPNGやJPEGの重いダミー画像（プレースホルダー画像）を大量に使用すると、ファーストビューの読み込み（LCP）が遅延し、SEO評価やCore Web Vitalsのスコアを正確に測定できなくなります。
💡 対策・解決策を見る▼
高解像度（Retina）ディスプレイの検証でプレースホルダー画像がぼやけ、正確なレイアウト確認ができない
サイズ（横幅・高さ）を固定したピクセルベースのダミー画像（.png / .jpg）をレスポンシブWebデザインの構築に流用すると、4Kモニターやスマホなどの高画素密度環境で画像のエッジが不鮮明になり、テキストの視認性や余白バランスの検証を誤る原因になります。
💡 対策・解決策を見る▼
外部のオンラインダミー画像生成URLサービスを利用中に、サーバーダウンやオフライン環境で画像が非表示になる
「https://via.placeholder.com/」などの外部APIの画像URLをHTMLに直書きして開発していると、テスト環境がオフライン（機内や回線障害時）になった際や、提供元サーバーがメンテナンスで停止した瞬間にすべての仮置き画像がリンク切れになり、UIの実装作業がストップします。
💡 対策・解決策を見る▼
ダミー画像のテキストサイズが枠からはみ出す、または文字が小さすぎてワイヤーフレーム作成時に判別不能になる
異なるアスペクト比（縦長バナーや横長ヘッダーなど）のプレースホルダー画像を複数作る際、フォントサイズ（font-size）を固定値で指定していると、画像サイズを変更した拍子に表示テキストが枠外にはみ出したり、読めないほど縮小して画面設計の邪魔になります。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.このツールで生成したダミー画像は商用利用しても問題ありませんか
A. はい。生成されたプレースホルダー画像は、商用・非商用を問わず完全無料で自由にご利用いただけます。Webサイトの制作、アプリの開発、プレゼン資料への仮置きなど、幅広いデザイン業務やコーディング作業に役立ててください。
Q.作成した画像のサイズを変更したときに文字がはみ出ることはありませんか
A. ありません。フォントサイズの設定をオートに指定しておくことで、入力した幅や高さの比率に合わせて中央のテキストサイズが自動的に最適化されます。縦長のモバイルサイズから横長のバナーサイズまで、文字が枠外にはみ出る心配はありません。
Q.デザインツールのフィグマやコーディング環境へ直接貼り付ける方法はありますか
A. あります。生成後にデータURLをコピーボタンをクリックすると、クリップボードにBase64形式のコードが保存されます。これをHTMLのイメージタグのソース属性に直接貼り付けることで、サーバーへアップロードすることなく即座に表示可能です。
Q.インターネットに接続していないオフライン環境でも画像の生成は機能しますか
A. はい、機能します。当ツールサイトは完全ローカル処理型の安全設計を採用しており、外部のサーバーと一切通信を行うことなくダミー画像を生成します。そのため、ネットワークが繋がらない環境であっても動作が止まることはありません。
Q.入力したサイズやカラーなどのテキストデータが外部に漏洩するリスクはありませんか
A. 一切ありません。入力およびカスタマイズされた設定内容は、すべてお使いのブラウザ内（メモリ上）でのみ処理され、外部のデータベース等に送信・保存されることはありません。ページを閉じればデータは即座に完全消去されるため安全です。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。