サイズと色を指定して、ダミー画像をブラウザ内で生成します。外部サービスに依存せず、レイアウト確認用の画像を用意できます。
外部サービスを使わない利点
- オフラインでも動作する
- 外部サービスの停止・仕様変更に影響されない
- 社内ネットワークなど、外部アクセスが制限された環境でも使える
- 画像リクエストが外部に飛ばないため、検証時のログが汚れない
使いどころ
- デザインカンプのレイアウト確認
- コーディング時の画像枠の仮置き
- 画像が入る前のプロトタイプ制作
- 読み込み速度の検証用データ
本番前に必ず差し替える
プレースホルダー画像が本番環境に残ると、そのまま公開されてしまいます。公開前に、画像のパスを検索して残っていないか確認してください。
ダミー画像の選び方
無地のプレースホルダーは、レイアウトの余白や配置を確認するのに向いています。一方で、実際の写真が入る枠では、明暗のある画像を仮置きしたほうが、文字の可読性まで含めた確認ができます。
サイズを画像の中に書き込んでおくと、コーディング中にどの枠が何pxなのかを目視で追えるため、実装の確認が速くなります。
よくある質問
Q どんなサイズでも作れますか？
幅と高さを自由に指定できます。実際の表示サイズに合わせて作成してください。
Q 文字を入れられますか？
サイズ表示など、任意のテキストを重ねられます。
Q 保存形式は？
PNG形式でダウンロードできます。
Q 外部通信は発生しますか？
しません。すべてブラウザ内で生成しています。