プレースホルダー画像ジェネレーター（サンプル画像生成）
幅・高さ・背景色・文字色を指定するだけで、ダミーのサンプル画像をブラウザ内で生成しPNGとしてダウンロードできます。画像はサーバーに送信されません。
よく使うサンプル画像サイズの目安
| サイズ | 主な用途 |
|---|---|
| 300×200 | 小さめのバナー・広告枠のプレースホルダー |
| 800×600 | ブログ記事中の挿入画像・ワイヤーフレームの仮画像 |
| 1200×630 | OGP画像（Facebook・X/Twitterのシェアカード表示用） |
| 1080×1080 | Instagram等SNSの正方形投稿 |
| 1920×1080 | フルHDのヒーロー画像・スライドショー背景 |
| 640×360 | 16:9の動画サムネイル・カード型UIのサムネイル |
プレースホルダー画像とは
プレースホルダー画像は、まだ本番の写真やイラストが用意できていない段階で、その場所を埋めておくための仮の画像です。指定した寸法の無地の長方形に、そのサイズの数字などを重ねただけの単純なもので、レイアウトの検証やモックアップの作成に使います。中身が意味を持たないからこそ、画像の内容ではなく配置や余白だけに目を向けられます。
このツールは幅・高さ・背景色・文字色を指定すると、その場でプレビューを描き、PNG として保存できます。オーバーレイテキストは任意で、空欄のままにすると「幅×高さ」の数値が自動で入るため、複数のサイズを並べたときにどれがどれか一目で分かります。色はカラーピッカーでも16進数のコード直接入力でも指定でき、デザインカンプの配色にそのまま合わせられます。生成はすべてブラウザ内で行われ、画像がサーバーへ送られることはありません。
プレースホルダー画像の作り方
- 寸法を決める 幅と高さを px で入力します。300×200・800×600・1200×630（OGP）・1080×1080 のプリセットを押せば一度に入ります。
- 色を選ぶ 背景色と文字色を指定します。カラーピッカーのほか、16進数のカラーコードを直接入れることもできます。
- 必要なら文字を入れる オーバーレイテキストは任意です。空欄のままなら「幅×高さ」が自動で表示されるため、そのままでも用は足ります。
- プレビューを確かめる 設定を変えるたびに描き直されます。文字が背景に埋もれていないかをここで見てください。
- PNGをダウンロードする 「PNGをダウンロード」で手元に保存されます。ファイルは端末の中だけで作られ、どこにも送信されません。
使いこなすためのヒント
- 「1200×630（OGP）」プリセットを使うと、Facebook・X（旧Twitter）のシェアカードで切れずに表示される標準サイズの画像がすぐに用意できます。
- オーバーレイテキストを空欄のままにすると「幅×高さ」の数値が自動表示されるため、複数サイズを見比べるワイヤーフレーム作成時にどのサイズか一目で判別できます。
- 背景色・文字色はカラーピッカーでの選択のほか、16進数カラーコードの直接入力にも対応しているため、デザインカンプの配色に正確に合わせられます。
- 生成した画像はローカルにダウンロードされるだけで、このサイトのサーバーには一切送信・保存されません。
プレースホルダー画像の活用シーン
ワイヤーフレームやモックアップを組む
写真が決まる前でも、入る予定の寸法どおりの箱を置けばレイアウトの検証を先に進められます。サイズが画像に書かれているので、見比べたときの取り違えも起きません。
OGP画像の枠を先に押さえる
1200×630 はシェアカードで切れずに表示される標準的な寸法です。本番の画像ができるまでの仮置きに使えます。
画像アップロード機能を試す
任意の寸法・任意のファイルサイズの画像をすぐ用意できるため、投稿フォームの上限や表示の崩れを確かめるのに向いています。
配色の当たりを取る
背景色と文字色を変えながら並べると、文字が読める明度差になっているかを手早く確かめられます。
プレースホルダー画像に関する用語集
- プレースホルダー
- 本来入るべきものが用意できるまで、その場所を確保しておく仮の要素です。画像のほか、文章の仮置きには Lorem Ipsum が使われます。
- モックアップ
- 完成後の見た目を確かめるために作る、動かない見本です。実際の素材が揃う前でも、配置や余白の判断ができます。
- OGP画像
- SNSでページが共有されたときにカードとして表示される画像です。1200×630 が広く使われる寸法で、これに合わせておくと縁が切られにくくなります。
- 16進数カラーコード
- #RRGGBB の形で色を表す書き方です。赤・緑・青の強さをそれぞれ00〜FFの2桁で示します。
- ピクセル（px）
- 画像を構成する最小の単位です。このツールの幅・高さはこの単位で指定します。
- PNG
- 劣化のない可逆圧縮の画像形式です。単色の背景と文字だけの画像はこの形式と相性がよく、ファイルも小さく収まります。
よくある質問
余談ですが ― プレースホルダー画像という文化
Web制作の現場では、本番用の写真やイラストが用意できるまでの「仮置き画像」としてプレースホルダー画像を使う文化が古くから根付いています。印刷業界で内容の整っていない文章の代わりに使われる「lorem ipsum」のダミーテキストと同じ発想で、画像版のダミーとして機能するものです。
2014年に登場した「Lorem Picsum」というサービスは、実在の写真をランダムに配信するプレースホルダー画像サービスとして広く使われるようになりました。URLに幅・高さを指定するだけで写真が返ってくる手軽さから、多くのデザインカンプやチュートリアルで採用されています。ただし外部サービスに依存するため、オフライン環境や機密性の高いプロジェクトでは使いづらいという制約もあります。
このツールはそうした外部サービスに頼らず、ブラウザの