開発用ダミー画像の作り方｜適切なサイズとプレースホルダー
Web制作 デザイン フロントエンド
結論
**「画像サイズがひと目で分かること」**がダミー画像の役割。グレー背景にサイズ（例: 800x600）が印字された画像を使うと、コーディング中のレイアウト確認が捗ります。
なぜダミー画像が必要なのか
- レイアウトの検証 — 画像がない状態だと、要素の高さや幅がゼロになり、デザインが崩れて見えます。
- 読み込み速度のテスト — 適切なファイルサイズのダミーを置くことで、実際の挙動に近いテストが可能です。
- クライアントへの配慮 — 著作権の怪しい画像を仮置きするよりも、専用のプレースホルダーを使う方がプロフェッショナルな印象を与えます。
🖼️ この場でダミー画像を生成する
おすすめのダミー画像サービス
外部のURLを指定するだけで画像を表示できる便利なサービスもあります。
- via.placeholder.com — もっともシンプル。
- Lorem Picsum — おしゃれな風景画像などが必要な時に。
- placekitten — 猫の画像。癒やしが必要なプロジェクトに。
注意点
ダミー画像はあくまで「仮」のものです。納品前には必ず実データに差し替える必要がありますが、その際に**「Alt属性（代替テキスト）」**の入れ忘れが多発します。ダミーを入れる段階で、Alt属性も適切にマークアップしておく習慣をつけましょう。