ダミー画像（プレースホルダー画像）の生成と HTML モックでの使い方

Placeholder 画像 モック フロントエンド
結論：30秒でダミー画像を埋め込む
  • 生成ツール: 下の埋め込みコンポーネントで任意のサイズ・色・文字列を即作成
  • ネットワーク不要: SVG Data URI を生成すれば完全オフラインで動作
  • レイアウト崩れ対策: 必ず width, height, aspect-ratio を明記

1. ダミー画像即時生成ツール

幅（Width）・高さ（Height）・背景色・テキスト文字列を指定して、PNG/SVG 画像を作成・コピーできます（ブラウザ内処理）。

🖼️ この場でダミー画像を生成する

2. ネットワーク依存ゼロ：インライン SVG Data URI コード

外部のプレースホルダーサービスが落ちている場合や、オフライン開発環境で役立つ純粋な SVG Data URI テクニックです。

<!-- 600x400px のグレープレースホルダー画像 -->
<img 
  src="data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22400%22%20viewBox%3D%220%200%20600%20400%22%3E%3Crect%20fill%3D%22%23cccccc%22%20width%3D%22600%22%20height%3D%22400%22%2F%3E%3Ctext%20fill%3D%22%23333333%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%20dy%3D%22.3em%22%3E600x400%3C%2Ftext%3E%3C%2Fsvg%3E" 
  alt="600x400 Placeholder" 
  width="600" 
  height="400" 
/>

3. UI モック開発でのレイアウトシフト（CLS）防止策

プレースホルダー画像を <img> タグで配置する際は、必ず width と height 属性、または CSS aspect-ratio を設定してください。

<!-- CSS aspect-ratio を組み合わせてアスペクト比を維持 -->
<img 
  src="data:image/svg+xml;..." 
  alt="Placeholder"
  style="width: 100%; height: auto; aspect-ratio: 600 / 400;" 
/>

4. 注意点（ハマりどころ）

  1. 本番ビルドへのダミー URL 残留
    • 外部プレースホルダー URL（https://placehold.co/...）を載せたまま本番公開すると、外部サービス障害時に画像が全滅します。正式素材への差し替え漏れがないか確認してください。