プレースホルダー画像ジェネレーター

プレースホルダー画像ジェネレーターは、Webデザイン、ワイヤーフレーミング、プロトタイピング、開発ワークフロー向けの無料ブラウザベースツールです。オフラインになったりレイテンシが発生する可能性のある外部プレースホルダーサービスに依存する代わりに、必要な画像を数秒で生成して直接ダウンロードできます。

すべての処理はCanvas APIとSVG生成を使用してブラウザ内で完結します。データがサーバーに送信されたり、画像がアップロード・保存されたりすることはありません。デザインはお使いのマシン内でプライバシーが保たれます。

生成される画像のあらゆる要素をカスタマイズできます。最大4096ピクセルまでのカスタム幅と高さを設定し、ブランドやデザインシステムに合わせた背景色とテキスト色を選択し、カスタムテキストラベルを追加し、フォントサイズを調整できます。OG画像（1200×630）、アバター（150×150）、HDスクリーン（1920×1080）、広告バナー（300×250）などの一般的なユースケース向けのプリセットサイズも用意されています。

出力は3つのフォーマットで利用可能です。PNGはロスレス品質と透明度サポートを提供し、ほとんどのWeb用途に最適です。JPEGは写真のようなプレースホルダーに小さいファイルサイズを提供します。SVGは任意のサイズで鮮明なスケーラブルベクター出力を生成し、レスポンシブレイアウトや高DPIディスプレイに最適です。

ボーダーラジアスオプションにより、追加のCSSなしで角丸や円形のプレースホルダー画像を作成できます。正確な色選択にはカラーコンバーター、既存画像の調整には画像リサイズと組み合わせて、あらゆるフロントエンド開発ワークフローに自然に組み込めます。

また、生成した画像をデータURIとしてコピーし、HTML、CSS、JavaScriptに直接埋め込むこともできます。これはプロトタイピングやインラインスタイリングに特に便利です。

1. ドロップダウンからプリセットサイズを選択（アバター、OG画像、HDなど）するか、カスタムの幅と高さを入力します。
2. カラーピッカーまたは16進数値の入力で背景色とテキスト色を選択します。
3. オプションで画像に表示するカスタムテキストを入力します。空白の場合、ディメンション（例：「800×600」）が自動的に表示されます。
4. フォントサイズスライダーでテキストサイズを調整し、ボーダーラジアスで角丸を設定します。
5. 出力フォーマットを選択：PNG、JPEG、またはSVG。
6. ダウンロードをクリックして画像ファイルを保存するか、データURIをコピーをクリックしてインラインデータURIをクリップボードにコピーします。
7. Ctrl+Enterでダウンロード、Ctrl+Shift+CでデータURIをコピーできます。