プレースホルダー画像の作り方｜PNG・SVG・data URIの使い分け
公開日：2026年10月16日 更新日：2026年9月15日 運営：シルギア（アナライズギア株式会社） 対象ツール：プレースホルダー画像生成
プレースホルダー画像（ダミー画像）は、本番の写真やイラストがまだ用意できていない段階で、その場所に仮置きする画像です。指定したサイズの色付き四角に寸法テキストを載せただけの単純な画像ですが、これがあるだけでレイアウトの余白・段組み・崩れを先に確認できます。この記事では、ダミー画像の役割、PNGとSVGの違い、data URIの使い方、外部サービスに頼らない利点、サイズと比率の決め方までを、シルギアの生成ツールに沿って解説します。
プレースホルダー画像は何のために使うのか
Web制作や資料づくりでは、文章・写真・図版が同時にそろうことはまれです。写真の撮影や差し替えを待っていると、レイアウトの検討そのものが止まってしまいます。そこで、正しい寸法の枠だけを先に置くのがプレースホルダー画像です。主な使いどころは次のとおりです。
- デザインのモック・ワイヤーフレーム：本番画像の代わりに枠を置き、全体の構図や視線の流れを確認する。
- レイアウト確認：カラム落ちや余白の詰まり、画像とテキストの間隔を早い段階で発見する。
- 記事の仮画像：本文を先に組み、あとから正式な図版へ差し替える前提で枠だけ確保する。
- 動作テスト：一覧やスライダーに複数枚を流し込み、並びや読み込みの挙動を試す。
枠に「640×360」のように寸法が入っていると、後から見ても何のサイズの枠かが一目で分かり、差し替え作業の目印になります。
PNGとSVGの違いと使い分け
本ツールはPNGとSVGの2形式で出力できます。PNGはピクセルの点で絵を表すビットマップ画像です。写真編集ソフトやスライド資料、多くのアプリにそのまま読み込め、どの環境でも見た目が変わらないのが強みです。反面、拡大すると輪郭がぼやけ、大きな画像ほどファイルが重くなります。
SVGは図形を数式（テキスト）で表すベクター画像です。四角と文字の位置・色を文字列で記述しているため、どれだけ拡大しても輪郭が鋭いまま、しかもファイルサイズは小さく収まります。中身がテキストなので、あとからコードの色コードや文字を書き換えられるのも利点です。おおまかな使い分けは、資料やソフトに貼るなら汎用性の高いPNG、Webページに直接埋め込んで編集したいならSVG、と考えると迷いません。
data URI（base64）の仕組みと使い方
data URIは、画像などのデータを外部ファイルにせず、文字列そのものとしてページに埋め込む書き方です。通常は「img要素のsrcにファイルのURLを書く→ブラウザが別途そのファイルを取りに行く」流れですが、data URIならデータ自体がその文字列に入っているため、追加の通信（HTTPリクエスト）が発生しません。ごく小さなダミー画像を手早く差し込みたいときに向いています。
PNGのような二進数の画像はbase64という方式で文字に変換して埋め込みます。base64は3バイトを4文字で表すため、元データより約33%長くなる点は覚えておきましょう。たとえば約900バイトの画像なら、文字列はおよそ1200文字前後になります。一方SVGは中身がテキストなので、本ツールではURLエンコード方式で短く読みやすい形のdata URIを生成します。コピーした文字列をsrc属性に貼るか、CSSのbackground-imageのurl()に入れれば、外部ファイルなしで画像を表示できます。
外部サービスに頼らない利点
オンラインのプレースホルダー画像サービスは手軽ですが、画像を表示するたびに外部サーバーへリクエストが飛びます。つまりサービスが停止したり、通信の遅い・つながらない環境だったりすると、その瞬間に画像が表示されなくなります。本ツールは生成をすべて自分の端末（ブラウザ内）で行い、外部への通信は一切ありません。ここから次の利点が生まれます。
- オフラインで動く：ネット接続がなくても生成できる。
- プライバシーが守られる：入力したサイズ・色・テキストがどこにも送信されないので、社内資料や機密性のあるモックでも安心。
- 恒久性がある：外部サービスの終了に左右されず、生成した画像やSVGコードは手元に残り続ける。
サイズと比率の決め方
サイズは幅・高さを1〜4000pxの範囲で指定でき、範囲外の値は自動でこの範囲に丸められます。まず決めたいのは比率（アスペクト比）です。よく使う比率はプリセットボタンから選べます。
- 16:9（640×360、FullHDは1920×1080）：動画のサムネイルやヒーロー画像に。
- 4:3（640×480）：資料やや旧来の写真枠に。
- 1:1（600×600）：SNSアイコンや正方形カードに。
- OGP（1200×630）：SNSシェア時のサムネイル。比率は約1.9:1です。
- バナー（728×90）・レクタングル（300×250）：広告枠の定番サイズ。
比率を保ったまま寸法を変えたいときは計算で求めます。16:9なら高さ＝幅×9÷16なので、幅1280pxなら高さは1280×9÷16＝720pxです。空欄にすると「幅×高さ」が自動表示され、フォントサイズも枠に収まるよう自動調整されるため、細長いバナーでも文字がはみ出しにくくなっています。
使いこなしのコツと注意点
最後に実務での注意点をまとめます。仮画像だと一目で分かるよう、背景色はグレー系（例：#dddddd）に寸法テキストを載せる王道が扱いやすく、本番画像との取り違えを防げます。SVGを別の端末で開くと、その端末にあるフォントで文字が描かれるため見え方が多少変わります。見た目を固定したい場合はPNGを使いましょう。data URIは便利ですが、大きな画像で使うとHTMLやCSSが長大になり、かえって読み込みや編集の妨げになります。data URIは小さなダミー向け、大きい画像はファイルとして扱う、と切り分けるのが安全です。差し替え忘れを防ぐため、仮画像には分かりやすいテキスト（例：「仮」「差替」）を入れておくのも有効です。