🖼️ プレースホルダー画像生成

幅・高さ・背景色・文字色・表示テキストを指定して、モック作成やレイアウト確認に使うダミー画像(プレースホルダー画像)を作れます。プレビューを見ながらPNGとSVGでダウンロードでき、data URIもコピー可能。外部サービスに頼らず、すべてブラウザ内で生成します。

設定

プリセット比率

1〜4000pxの範囲で指定できます。範囲外は自動で丸めます。

空欄のままにすると、寸法(例: 640×360)を自動で表示します。

自動調整は、テキストが画像内に収まるようにサイズを決めます。

プレビュー

SVGコード

下記のSVGコードをHTMLに貼り付けても使えます。文字が選択可能でファイルサイズも小さく、拡大しても劣化しません。

解説

プレースホルダー画像(ダミー画像)は、Webデザインや資料づくりの途中で「まだ用意できていない本番画像の代わり」に置く仮の画像です。写真やイラストが完成していない段階でも、指定サイズの色付き四角と寸法テキストを置いておけば、レイアウトの見た目や余白、段組みの崩れを先に確認できます。本ツールは、幅・高さ・背景色・文字色・表示テキストを指定するだけで、その場でダミー画像を生成します。

出力はPNGとSVGの2種類です。PNGはピクセルの点で構成されるビットマップ画像で、写真編集ソフトや多くのアプリにそのまま読み込めます。SVGは図形を数式(テキスト)で表すベクター画像で、拡大しても輪郭がぼやけず、ファイルサイズが小さく、コード内の色や文字をあとから書き換えられるのが利点です。用途に合わせて、モックに貼るならPNG、HTMLに直接埋め込むならSVG、と使い分けられます。

生成したSVGは「data URI」としてもコピーできます。data URIは画像データを文字列に埋め込む書き方で、img要素の src や CSS の background-image に貼ると、外部ファイルを用意しなくても画像を表示できます。HTTPリクエストが1つ減るため、ごく小さなダミー画像を手早く差し込みたいときに便利です。プリセット比率(16:9・4:3・1:1・OGP・バナー等)のボタンも用意しています。

よく知られたオンラインのプレースホルダー画像サービスは手軽ですが、外部サーバーへ都度リクエストが飛ぶため、サービス停止・速度低下・通信できない環境では画像が表示されなくなります。本ツールはすべての生成をブラウザ内(あなたの端末)で行い、外部への通信は一切ありません。オフラインでも動作し、社内資料や機密性のあるモックでも安心して使えます。

よくある質問

プレースホルダー画像は何に使うのですか?

本番の写真やイラストが未完成の段階で、レイアウトや余白、段組みを先に確認するための仮画像として使います。指定サイズの枠と寸法が一目で分かるので、デザインのモックやワイヤーフレーム、資料の差し込み枠に向いています。

PNGとSVGはどう使い分けますか?

PNGはビットマップ画像で、画像編集ソフトやスライド資料などに貼るのに向きます。SVGはベクター画像で、拡大しても劣化せずファイルが小さく、HTMLに直接埋め込んで色や文字をあとから編集できます。Webページに埋め込むならSVG、汎用的に画像ファイルとして扱うならPNGがおすすめです。

data URIはどう使えばよいですか?

コピーした文字列を img 要素の src 属性へ入れるだけで、外部ファイルなしに画像を表示できます。CSSの background-image: url("...") にも使えます。小さなダミー画像を手早く埋め込みたいときに便利です。

外部のプレースホルダーサービスと何が違いますか?

オンラインサービスは外部サーバーへ都度アクセスするため、サービス停止や通信不可の環境では画像が表示されません。本ツールは生成をすべてブラウザ内で行い外部通信がないため、オフラインでも動き、機密性のあるモックでも情報が外に出ません。

フォントサイズの自動調整とは何ですか?

テキストが画像の枠内に収まるよう、幅と高さから最適な文字サイズを自動計算する機能です。細長いバナーや正方形など、比率が変わっても文字がはみ出しにくくなります。手動で決めたい場合はチェックを外して数値を指定してください。

画像の最大サイズはどのくらいですか?

幅・高さともに1〜4000pxの範囲で指定できます。範囲外の値は自動的にこの範囲へ丸めます。極端に大きいサイズはブラウザの描画に時間がかかる場合があるため、必要な大きさに合わせて指定してください。

日本語のテキストは表示できますか?

できます。表示テキスト欄に日本語を入力すればそのまま描画されます。ただしSVGを別の環境で開くと、その端末に入っているフォントで表示されるため、見え方が多少変わることがあります。見た目を固定したい場合はPNGを利用してください。

入力した内容はサーバーに送られますか?

送られません。サイズや色、テキストの処理と画像の生成はすべてブラウザ内で完結し、入力内容はどこにも送信されません。オフラインでも利用できます。