開発用ダミー画像の作り方｜適切なサイズとプレースホルダー

Web制作 デザイン フロントエンド
結論

「画像サイズがひと目で分かること」がダミー画像の役割。グレー背景にサイズ（例: 800x600）が印字された画像を使うと、コーディング中のレイアウト確認が捗ります。

なぜダミー画像が必要なのか

  • レイアウトの検証 — 画像がない状態だと、要素の高さや幅がゼロになり、デザインが崩れて見えます。
  • 読み込み速度のテスト — 適切なファイルサイズのダミーを置くことで、実際の挙動に近いテストが可能です。
  • クライアントへの配慮 — 著作権の怪しい画像を仮置きするよりも、専用のプレースホルダーを使う方がプロフェッショナルな印象を与えます。

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

おすすめのダミー画像サービス

外部のURLを指定するだけで画像を表示できる便利なサービスもあります。

  • via.placeholder.com — もっともシンプル。
  • Lorem Picsum — おしゃれな風景画像などが必要な時に。
  • placekitten — 猫の画像。癒やしが必要なプロジェクトに。

注意点

ダミー画像はあくまで「仮」のものです。納品前には必ず実データに差し替える必要がありますが、その際に「Alt属性（代替テキスト）」の入れ忘れが多発します。ダミーを入れる段階で、Alt属性も適切にマークアップしておく習慣をつけましょう。

関連記事

あわせて読むと理解が深まる関連記事をまとめました。

トピック記事
1フレームは何秒・何ms？ 60fpsと120fpsの計算方法1フレームは何秒・何ms？ 60fpsと120fpsの計算方法
AIクローラー対応 robots.txt・llms.txt 設定ガイド 2026AIクローラー対応 robots.txt・llms.txt 設定ガイド 2026｜GPTBot・ClaudeBot・Google-Extended・GEO戦略
APIキャッシュ設計ガイドAPIキャッシュ設計ガイド｜ETag・Cache-Control・304・CDNキャッシュキーの実務
Web APIのエラーハンドリング設計Web APIのエラーハンドリング設計｜RFC 9457・error_code・400/422/409の使い分け
Web APIのべき等性（Idempotency）設計Web APIのべき等性（Idempotency）設計｜二重決済を防ぐ実装ガイド
API設計におけるページネーションの使い分け：オフセット型とカーソル型の比較API設計におけるページネーションの使い分け：オフセット型とカーソル型の比較
APIのレート制限（Rate Limiting）実装ガイドAPIのレート制限（Rate Limiting）実装ガイド｜アルゴリズム選定と429エラーの適切なハンドリング
APIデバッグで使うツールの使い分けAPIデバッグで使うツールの使い分け｜JSON整形・JWT・Base64のワークフロー
Aspect Ratio 計算Aspect Ratio 計算｜16:9・4:3 解像度一覧
Astro Content Collections でブログを構築するAstro Content Collections でブログを構築する
Base64 Encode DecodeBase64 Encode Decode｜Data URI と API 認証
Base64とは？仕組みから使い方まで解説Base64とは？仕組みから使い方まで解説