プレースホルダー画像の作り方
「解像度で作る」モードで幅・高さと文字を入力すれば、その場で作れます。会員登録不要・完全無料です。
文字サイズは画像に合わせて自動調整され、文字色は背景の明るさから自動で反転します。日本語もそのまま使えます。
プレースホルダー画像とは？
本番の画像がまだ無い段階で、そこに画像が入ることを示すために仮置きする画像のことです。 「placeholder」は「場所を確保しておくもの」という意味で、日本語では「ダミー画像」「仮画像」とも呼ばれます。
単なる単色の四角でも役目は果たせますが、実務では「1920×1080」のようなサイズ表記や「SAMPLE」といった文字を入れるのが一般的です。 枠のサイズが一目で分かり、本番画像と取り違えたまま公開してしまう事故も防げるためです。
- ワイヤーフレーム／デザインカンプ…どこにどのサイズの画像が入るかを示す
- コーディング中の仮画像…レイアウト崩れを確認しつつ、差し替え忘れを防ぐ
- No Image 表示…画像が登録されていないときの代替画像として使う
- テストデータ…一覧やカルーセルに複数枚並べて、順序や表示件数を検証する
文字入りのダミー画像はどう作る？（3ステップ）
-
1
「解像度で作る」を選ぶ
トップのタブで「解像度で作る」に切り替えます。文字を入れられるのはこのモードだけです。
-
2
幅×高さと文字を入力
幅と高さ（px）を入れ、「画像に入れる文字」に表示したい文字を入力します。「サイズを入れる」ボタンを押すと、入力中の幅×高さがそのまま文字になります。
-
3
生成してダウンロード
背景色を選んでボタンを押すと、その場で生成してダウンロードできます。文字サイズは自動調整されるので、サイズ指定は不要です。
画像に何を書けばいい？（用途別）
迷ったらサイズ表記（例：1920×1080）が無難です。枠のサイズが一目で分かり、あとから見返しても意図が伝わります。
| 入れる文字 | 使う場面 | 理由 |
|---|---|---|
1920×1080 |
ワイヤーフレーム・レイアウト検討 | どのサイズの枠かが一目で分かる。差し替え漏れにも気づきやすい |
SAMPLE / DUMMY |
開発中の仮画像 | 本番画像と取り違えたまま公開する事故を防ぐ |
No Image |
画像が無いときの代替表示 | 「画像なし」を明示する定番。空白より意図が伝わる |
メインビジュアル |
デザインカンプ・提案資料 | その枠に何が入る予定かを関係者に伝える |
商品画像 1 / 2 / 3 |
一覧・カルーセルの検証 | 同じ見た目の画像が並ぶと順序の不具合に気づけない |
文字を入れるとファイル容量はどれだけ増える？（実測）
どの形式でも増えますが、増え方は形式によって桁違いです。 1920×1080・背景 #DDDDDD の画像に「1920×1080」と焼き込み、文字なしと比較した実測値がこちらです。 GIF は 2,595 → 68,435 バイトと 26 倍になり、文字を入れた瞬間に最軽量から最重量級へ逆転します。
文字数で文字の大きさはどう変わる？（実測）
文字サイズは画像の幅の約78%・高さの約42%に収まる最大サイズが自動で選ばれます。 小さい方の制約が効くため、短い文字は高さで頭打ち、長い文字は幅で頭打ちになります。 同じ 1920×1080 の PNG に文字数だけ変えて焼き込み、描画された文字の外接矩形を実測した結果です。
| 文字数 | 例 | 文字の実寸 | 画像に対する幅 | 画像に対する高さ | 効いた制約 |
|---|---|---|---|---|---|
| 4文字 | TEST |
1134 × 449 px |
59% | 42% | 高さ |
| 9文字 | 1920×1080 |
1495 × 231 px |
78% | 21% | 幅 |
| 17文字 | プレースホルダー画像のサンプルです |
1464 × 81 px |
76% | 8% | 幅 |
| 40文字 | あいうえお…（40文字） |
1471 × 33 px |
77% | 3% | 幅 |
文字色はどうやって決まる？
既定では背景色の明るさ（相対輝度）から自動で決まります。暗い背景に暗い文字を置いて読めなくなる、という失敗が起きないようにするためです。
| 背景の相対輝度 | 自動で選ばれる文字色 | 背景色の例 |
|---|---|---|
| 140 より大きい（明るい） | #1F2933（濃いグレー） | #FFFFFF / #DDDDDD / #F77F00 |
| 140 以下（暗い） | #FFFFFF（白） | #1F2933 / #2563EB / #8C8C8C |
よく使うサイズは？（そのまま作れます）
クリックすると幅・高さとサイズ表記の文字が入力済みの状態でツールが開きます。各規格の意味は 画像解像度の一覧・早見表 で解説しています。
よくある質問
プレースホルダー画像とは何ですか？
本番の画像が用意できていない段階で、その場所に画像が入ることを示すために仮置きする画像のことです。「プレースホルダー（placeholder）」は「場所を確保しておくもの」という意味で、多くの場合はサイズや用途が分かるように「1920×1080」「SAMPLE」といった文字を入れて使います。
文字入りのダミー画像は無料で作れますか？
無料で作れます。会員登録も不要です。「解像度で作る」モードで幅・高さと文字を入力してダウンロードするだけです。
日本語の文字も入れられますか？
入れられます。ひらがな・カタカナ・漢字をそのまま入力できます。1回あたり40文字までです。
文字のサイズは指定できますか？
手動指定はできません。画像の幅の約78%、高さの約42%に収まる最大サイズが自動で選ばれます。短い文字ほど大きく、長い文字ほど小さくなるため、どのサイズの画像でも文字がはみ出したり極端に小さくなったりしません。
文字色は変えられますか？
変えられます。既定では背景色の明るさから自動で決まり、明るい背景には濃い文字（#1F2933）、暗い背景には白い文字（#FFFFFF）が使われます。「文字色は背景から自動」のチェックを外すと任意の色を指定できます。
文字は画像のどこに入りますか？
常に中央です。位置の指定はできません。プレースホルダー用途では中央固定が最も読み取りやすく、どのサイズでも見え方が安定するためです。
容量を指定したうえで文字も入れられますか？
できません。容量モードは32×32ピクセルの小さな画像を指定バイト数までパディングして作る仕組みのため、文字を描いても判読できないからです。文字が必要な場合は「解像度で作る」モードを使ってください。
文字を入れるとファイルサイズは変わりますか？
大きくなります。1920×1080に「1920×1080」と入れた場合の実測では、PNGが10,602→45,278バイト（+327%）、GIFは2,595→68,435バイト（+2,537%）でした。GIFは256色しか扱えず、なめらかな文字の輪郭を表現するために画像全体へディザリングがかかるため、極端に増えます。文字入りにGIFは向きません。
生成した画像は商用利用できますか？
利用できます。単色の背景に指定した文字を描画しただけの画像なので、用途の制限はありません。詳細は利用規約をご確認ください。