プレースホルダー画像生成器 - ダミー画像作成 オンライン
テキスト、色、サイズを指定したプレースホルダー画像を生成。PNG、SVG、WebPでエクスポート — Webデザインモックアップ用。
よくある質問
プレースホルダー画像ジェネレーターとは？
プレースホルダー画像ジェネレーターは、Web開発、UIデザイン、プロトタイピングで使用するために、カスタムサイズ、色、テキストの一時的な画像を作成するオンラインツールです。開発の初期段階で実際の写真やグラフィックの代わりに、実際のコンテンツが最終的に表示される場所を示す視覚的な代替物として機能します。
このツールの使い方は？
1. 幅と高さの入力欄を使用するか、一般的なプリセットから希望の画像サイズを設定します。 2. カラーピッカーまたはHEX値で背景色とテキスト色を選択します。 3. オプションでカスタムテキストを入力します。 4. フォントサイズを調整します。 5. キャンバスでリアルタイムプレビューします。 6. エクスポート形式を選択してダウンロードまたはコピーします。
データは安全ですか？サーバーに送信されますか？
データは100%安全で、ブラウザから外部に送信されることはありません。このツールはHTML5 Canvas APIを使用して完全にクライアントサイドで画像をレンダリングします。
PNG、JPEG、SVG、WebP形式の違いは？
PNGはロスレス圧縮で鮮明なテキストを提供します。JPEGはファイルサイズが小さいですが非可逆圧縮です。SVGはサイズに関係なく最小ファイルサイズの無限にスケーラブルなベクター画像を生成します。WebPはPNGとJPEGの両方よりも優れた圧縮を提供します。
Data URIとは？
Data URIは、外部ファイルにリンクする代わりに、base64エンコードされた文字列として画像データをHTMLやCSSに直接埋め込む方法です。プロトタイピングに便利です。
placehold.coの代わりにこれを使うべき理由は？
URLベースのサービスはインターネット接続と外部サーバーが必要です。このツールはブラウザ内でローカルに画像を生成します：オフラインで動作し、外部依存がなく、ネットワーク遅延もありません。
高解像度（Retina）画像を生成できますか？
はい。エクスポート設定で「Retina (2x)」トグルを有効にしてください。指定されたサイズの2倍で内部的にレンダリングされ、高DPIディスプレイで鮮明に表示されます。
コード例
// Placeholder Image Generator
function generatePlaceholder({ width = 300, height = 200, bgColor = '#CCCCCC', textColor = '#969696', text = '' } = {}) {
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
// Draw background
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, width, height);
// Draw centered text
const displayText = text || `${width} × ${height}`;
const fontSize = Math.max(12, Math.min(width * 0.8 / (displayText.length * 0.6), height * 0.4, 200));
ctx.fillStyle = textColor;
ctx.font = `${fontSize}px Arial`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(displayText, width / 2, height / 2);
return canvas;
}
// Download as PNG
const canvas = generatePlaceholder({ width: 800, height: 600, text: 'Hero Image' });
canvas.toBlob(blob => {
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'placeholder-800x600.png';
a.click();
}, 'image/png');
// Get as data URI
console.log(canvas.toDataURL('image/png'));