🖌️ ダミー画像ジェネレーター
1. サイズ
1200×630 OGP
1920×1080 FHD
1080×1080 正方形
375×667 スマホ
728×90 バナー
300×250 レクタングル
px
px
2. 見た目
3. スタイルオプション
対角線を表示プレースホルダーらしいクロス線
枠線を表示
市松模様の背景背景色の代わりに透過風の市松模様にします
4. プレビュー
5. 出力形式
PNG
JPEG
WebP
外部のプレースホルダーサービスとの違い
ダミー画像を出すだけなら、画像のURLを書くだけで済む外部サービスもあります。 手軽ですが、そのURLが本番に残ると2つ問題が起きます。
- 表示のたびに外部へ通信が出ます。 閲覧者のIPアドレスが相手先に渡り、社内向けの画面では規程に触れることがあります
- 相手のサービスが止まった日に画像が消えます。 差し替え忘れた箇所が、ある日いっせいに壊れます
このツールは画像をファイルとして書き出します。自分のリポジトリに置けるので外部への依存が残らず、社外への通信が制限された環境でも作れます。 生成はブラウザの中だけで行っており、弊社サーバーにも送信されません。
どのサイズで作るか
差し替える予定の本番画像と同じ寸法にしてください。 ダミーの寸法が違うと、本物を入れた瞬間にレイアウトが崩れます。 仮置きの目的は「あとで差し替えても何も起きない」状態を作ることです。
| プリセット | 使いどころ |
|---|---|
| 1200×630 OGP | SNSでシェアされたときのカード画像。この比率が崩れると上下が切れる |
| 1920×1080 FHD | スライドの背景、ヒーロー画像、動画のサムネイル |
| 1080×1080 正方形 | アイコン、一覧に並ぶサムネイル、ECの商品画像 |
| 375×667 スマホ | スマホ1画面ぶん。縦の収まりを確認する用 |
| 728×90 バナー | 記事上部や下部に入る横長の広告枠 |
| 300×250 レクタングル | サイドバーや記事中に入る広告枠 |
画面に並べたときの見え方を先に確かめたいなら、対角線や市松模様を入れておくと本物と混ざりません。差し替え忘れがそのまま公開されるのを防げます。 縦横比だけ先に決めたい場合はアスペクト比計算、 本文の仮置きにはダミーテキスト生成が使えます。
※ 幅・高さは1〜4000pxの範囲で指定できます。
画像はすべてブラウザ内で生成しており、弊社サーバーへ送信・保存することは一切ありません。
幅・高さと見た目を指定するだけで、コーディングやモックアップ確認に使えるダミー画像（プレースホルダー画像）を作成できます。よく使うサイズはプリセットから選べます。
こんなツールをこれからも作っていきます。もしこれは！と思っていただけましたら、シェア・応援していただけると嬉しいです！😀