<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgNjAwIDQwMCI+CiAgPGRlZnM+CiAgICAKICA8L2RlZnM+CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2U1ZTdlYiIgcng9IjAiIC8+CiAgCiAgPHRleHQKICAgIHg9IjUwJSIKICAgIHk9IjUwJSIKICAgIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiCiAgICB0ZXh0LWFuY2hvcj0ibWlkZGxlIgogICAgZmlsbD0iIzZiNzI4MCIKICAgIGZvbnQtc2l6ZT0iNTAiCiAgICBmb250LWZhbWlseT0ic3lzdGVtLXVpLCAtYXBwbGUtc3lzdGVtLCBzYW5zLXNlcmlmIgogICAgZm9udC13ZWlnaHQ9ImJvbGQiCiAgPgogICAgNjAwIMOXIDQwMAogIDwvdGV4dD4KPC9zdmc+" />サイズ設定
外観 & カラー
テキスト & スタイル
Advertisement
プレースホルダー画像生成ツールとは?
本ツールは、Webサイトの制作やアプリのデザイン工程で必要になる「仮画像(ダミー画像)」を、自由なサイズとデザインで即座に生成できるオンラインツールです。 サーバーを介さずブラウザ上でSVG形式を生成するため、軽量で劣化がなく、かつ完全にオフラインで動作するのが特徴です。
こんなシーンで便利です
Webデザインのワイヤーフレーム制作
「ここにバナーが入る」というアタリを付けたい時に。正確なピクセルサイズを指定して、視覚的なバランスを確認できます。
開発中の読み込みテスト・表示確認
実際の画像アセットが届く前のコーディング段階で。Data URLをコピーして、HTMLにそのまま貼り付けてプレビュー可能です。
SNS投稿や記事アイキャッチの仮置き
YouTubeのサムネイル(1280x720)やTwitter(X)のヘッダーサイズなど、主要なサイズを一瞬で作成できます。
プレゼン資料の図解・スペース確保
資料内で「画像挿入予定」の場所を埋めるダミーとして。SVG形式なので、拡大して貼ってもボケません。
使い方は簡単 3ステップ
- 「サイズ設定」から必要な幅(Width)と高さ(Height)を入力します。
- 背景色やテキスト内容、グリッド・ドットなどのパターンを自由にカスタマイズします。
- 「SVGを保存」または「Data URLをコピー」をクリックして利用します。
※主要デバイスのサイズはプリセットボタンからワンクリックで適用できます。
ご利用時の注意点
- SVG形式のメリット:本ツールはSVG形式を生成します。PNGやJPGと異なり、どれだけ拡大しても境界線がぼやけず、ファイルサイズも非常に軽量です。
- テキストの自動サイズ調整:フォントサイズを「Auto」に設定すると、画像の大きさに合わせて中央のテキストサイズが自動的に最適化されます。
- Data URLの活用:コピーしたData URLは、imgタグのsrc属性にそのまま貼り付けることで、サーバーへのアップロードなしで表示可能です。
Advertisement
主要なWeb・SNS画像サイズ早見表
Web制作やSNS運用で頻繁に利用される標準的なピクセルサイズとアスペクト比の一覧です。
| カテゴリー | 標準サイズ (px) | アスペクト比 / 用途 |
|---|---|---|
| SNS・OGP | 1200 × 630 | 1.91:1 (X・FB リンク用OGP) |
| YouTube | 1280 × 720 | 16:9 (HD・サムネイル推奨) |
| 1080 × 1350 | 4:5 (フィード・縦長投稿) | |
| 1080 × 1920 | 9:16 (リール・ストーリー) | |
| Webバナー | 300 × 250 | レクタングル (中) |
| Webバナー | 728 × 90 | ビッグバナー |
| デバイス | 1920 × 1080 | 16:9 (フルHDモニター) |
| デバイス | 375 × 812 | iPhone 13/14等 (モバイル画面) |
| 黄金比 | 1618 × 1000 | 1.618:1 (美しいレイアウト用) |
【ダミー画像とSVGのメリット】
当ツールで生成されるSVG形式のプレースホルダー画像は、拡大してもエッジがぼやけません。 特に高解像度(Retina)ディスプレイの検証において、ピクセルベースのダミー画像よりも正確なレイアウト確認が可能です。
【検索意図への対応】
「プレースホルダー画像」や「ダミー画像」をお探しの際、特定のデバイスサイズ(モバイル・PC)や、SNSの推奨サイズ(OGP・ヘッダー)でアタリを付けたい場合に、上記の表を参考に数値を入力してください。 Webサイトの表示速度改善のためのLCP(最大視覚コンテンツ)の仮置きテストにも最適です。
よくある質問(FAQ)
Q.生成した画像がサーバーに保存されたり、流出したりしませんか?
A. 全く心配ありません。画像生成ロジックはすべてお客様のブラウザ上で完結しています。画像データが外部サーバーへ送信されることはありません。
Q.商用利用や、クライアントへの納品物に使っても大丈夫ですか?
A. はい、可能です。当ツールで生成された画像に著作権上の制限はなく、商用・非商用を問わず自由にご利用いただけます。
Q.日本語のテキストも画像に入れられますか?
A. はい、日本語の入力にも対応しています。フォントは閲覧環境の標準システムフォントが適用されます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。