プレースホルダー画像ジェネレーター
拡大縮小しても劣化しないSVGのプレースホルダー画像を生成します。単色またはグラデーションの背景に、寸法または任意のテキストを中央に配置でき、枠線も追加できます。
入力
背景
テキスト
枠線
出力
ここにプレースホルダー画像が表示されます。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/image-placeholder-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"width": "800",
"height": "600",
"bgType": "solid",
"bgColor": "#cccccc",
"gradientStart": "#667eea",
"gradientEnd": "#764ba2",
"gradientAngle": "135",
"customText": "",
"text": "",
"textColor": "#666666",
"fontSize": "48",
"showBorder": "",
"borderColor": "#999999",
"borderWidth": "4"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `image-placeholder-generator` tool (Image Placeholder Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/image-placeholder-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="プレースホルダー画像ジェネレーター — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
このツールでできること
単色またはグラデーションの背景の中央にラベルを配置したプレースホルダー画像を、SVG 形式で生成します。本物の画像がまだ用意できていない間も、モックアップやワイヤーフレーム、CMSのエントリー、<img> タグにそのまま使えます。初期状態ではラベルに画像の寸法（800 × 600）が表示されるので、プレースホルダーだらけのページでも、どのボックスがどのサイズかひと目で分かります。出力はラスター画像ではなくSVGなので、どの拡大率でも鮮明に表示され、単色のボックスなら幅と高さをどれだけ大きくしても数百バイト程度の小さなファイルになります。
使い方
- 幅と高さをピクセル単位で指定します（それぞれ最大4000px）。
- 背景を選びます。単色にするか、開始色・終了色・角度を指定できる線形グラデーションにします。
- テキストは初期値の寸法のままにするか、カスタムテキストをオンにして好きなラベル（クライアント名、「メイン画像」、「近日公開」など）を入力します。
- 文字色とフォントサイズを調整します。必要に応じて枠線をオンにし、色と太さを設定します。
- SVGのソースをコピーするか、
.svgファイルとしてダウンロードします。設定を変更するたびにプレビューも更新されます。
なぜPNGやJPGではなくSVGなのか
プレースホルダーの役割は、本物のコンテンツが届くまでボックスの形と大きさを保つことです。その用途ではSVGがラスター画像より優れています。同じ数バイトのまま100pxでも10,000pxでも鮮明に描画され、通常のマークアップとしてコピー＆ペーストできるため（ファイルを置かずにHTML/CSSへ直接埋め込めます）、ブラウザ、デザインツール、静的サイトジェネレーターなど画像を扱う多くのツールがSVGをそのまま受け付けます。どうしてもラスターファイルが必要な場合は、ダウンロードしたSVGを画像エディタに読み込むか、<img> からキャンバスに描画する方法で書き出してください。どちらの場合も、正本はSVGです。
実際のレイアウトにも使えますか
使えます。ダウンロードしたファイルを <img src="placeholder.svg"> で指定するか、SVGのマークアップをHTMLに直接埋め込むと、ほかの画像と同じように動作します。width/height やCSSに合わせて拡大縮小され、ブラウザは通常の静的アセットと同様にキャッシュします。外部への依存がないため（サードパーティのプレースホルダーサービスがダウンしたり、リクエストを制限したりすることはありません）、ローカル開発だけでなく、本番環境の代替表示としても安心して使えます。
データは非公開ですか
はい。すべての処理はお使いのブラウザ内で行われます。選択した設定から SVG をローカルで生成するため、アップロードも、アカウントも、サーバーとの通信も発生しません。カスタムテキストを含め、入力した内容が端末の外に送信されることはありません。
テキストはボックスに合わせて自動調整されますか
いいえ。フォントサイズは自動で調整されず、ご自身で直接設定します。小さなプレースホルダーや細長いプレースホルダーに非常に長いカスタムテキストを入れる場合は、読みやすくなるまでフォントサイズを下げてください。初期の 800 × 600 のラベルは桁数が少ないことが多いため、小さなサムネイルより大きい画像であれば、初期値の48pxでほぼ問題なく収まります。