プレースホルダー画像の使い方 — デザイン・開発でダミー画像を活用する
プレースホルダー画像はWebデザインや開発の初期段階で、実際の画像が用意できていない箇所に配置するダミー画像です。サイズ・色・テキストを指定して即座に生成でき、プロトタイプ制作からコードのテストまで幅広く活用されます。
プレースホルダー画像の用途
Wireframe・プロトタイプの段階では実際の画像がまだ用意できていないことが多く、サイズだけ決まっているスペースを埋めるためにプレースホルダーを使います。開発段階では本番画像の代わりにダミーを使うことでAPI依存なしにUIを確認できます。レイアウト確認・コンポーネントの汎用テスト・スクリーンショットの代替などに使われます。
Data URLとimgタグの使い方
Placeholder Image GeneratorはData URL（base64エンコードされたインライン画像）としても出力できます。Data URLを<img src="...">に直接貼り付けることで外部ファイルなしに表示できます。HTMLのimgタグごとコピーする機能もあり、そのままソースコードに貼り付けて使えます。Data URLの形式はdata:image/png;base64,{base64文字列}で、画像サイズが大きいほど文字列も長くなります。CSS backgroundに使う場合はbackground-image: url("data:image/png;base64,...")の形式です。CDN・外部サーバーなしで完全にオフラインで動作するため、テスト・プロトタイプ・コードペンなどで重宝します。
サイズ・色・テキストのカスタマイズ
幅・高さをpxで指定（例: 1200×630でOGP画像サイズ）し、背景色・テキスト色・表示テキストをカスタマイズできます。テキストを空にするとサイズ情報（例: 1200×630）が自動で表示されます。OGP画像・サムネイル・アバター・カード画像など用途ごとのサイズプリセットから選ぶことも可能です。
オンラインプレースホルダーサービスとの違い
placehold.jpなどのオンラインサービスはネット接続が必要で外部依存が発生します。Placeholder Image GeneratorはブラウザのCanvas APIで完全にローカル生成するため、オフラインでも動作します。生成された画像はPNGとして保存することも、Data URLとしてそのまま使うこともできます。