🖼️
無料プレースホルダー画像ジェネレーター
カスタムの寸法、テキスト、色を使用して、色付きのプレースホルダー画像を生成します。ソーシャルメディア、モックアップ、デザインカンプ用の標準サイズ。
プリセットサイズ
カラーテーマ
💡 HTMLモックアップ向け：「data URLとしてコピー」を使い、<img src="..."> に貼り付けてインラインプレースホルダーとして使用。Figma / Sketchデザインの場合はPNGをダウンロードしてドラッグ＆ドロップ。
主な用途
- デザインモックアップ用のプレースホルダー画像実際の画像の準備ができるまで、Figma、Sketch、またはウェブデザインモックアップで使用するサイズ設定されたカラーボックスを生成します。
- HTMLプロトタイプ用のインラインプレースホルダー「データURLとしてコピー」を使用して、迅速なプロトタイプ用にプレースホルダー画像をHTMLに直接埋め込みます。
- CMSコンテンツスロット用のプレースホルダーCMSテンプレートをデモンストレーションする際は、機密プレビュー用に実際のコンテンツの代わりにプレースホルダー画像を使用します。
- ソーシャルメディア画像テンプレートInstagram、Facebook、Twitter、LinkedInの投稿テンプレート用に正しいサイズのプレースホルダーを生成します。
- CSSレイアウトテスト画像レスポンシブCSSレイアウトをストレステストするために、極端なアスペクト比で画像を生成します。
使い方
すべてHTML Canvas APIと手書きのSVGマークアップを使ってブラウザ内で行われます — サーバー、アップロード、サードパーティサービスは不要です。寸法、色、ラベルテキストを設定すると、ツールがリアルタイムでキャンバス要素に直接画像を描画し、必要に応じてPNG、JPEG、SVGにシリアライズします。
- 1寸法と色を設定する幅と高さ（それぞれ1〜4000px）を入力するか、一般的なソーシャルメディアやデザインサイズをカバーする11のプリセットから選びます。内蔵テーマから背景と文字色を選ぶか、任意の16進数値を直接入力します。ネイティブのカラーピッカーと検証済みのテキストフィールドは同期されます。
- 2Canvas APIがプレビューを即座に描画するReact effectが変更のたびにdrawPlaceholder()を呼び出します。この関数はCanvasRenderingContext2Dを使って矩形を背景色で塗りつぶし、任意で15%の不透明度で薄い対角の十字線を描き、その後ラベルテキストを測定して中央揃えします — キャンバス幅の90%に収まるようフォントを自動的に縮小します。
- 3PNG、JPEG、SVGとしてエクスポートPNGとJPEGのダウンロードはcanvas.toDataURL()を呼び出し、base64の結果をメモリ内でBlobに変換してダウンロードをトリガーします — iOS Safariのダウンロードルールを満たすため、すべてユーザー操作内で同期的に行われます。SVGエクスポートは、対応するrect、任意の対角線、text要素を持つ自己完結型のSVG文字列を構築し、.svgファイルとして保存します。
- 4バッチエクスポートとコピーのショートカット「すべてのプリセットをダウンロード」ボタンはJSZipを動的にインポートし、同じ描画関数を使って11のプリセットサイズそれぞれをオフスクリーンキャンバスに再描画し、すべてのPNGを単一のZIPにパッケージします。コピーボタンは、コードにすぐ貼り付けられるPNGデータURL、インラインSVGのimgタグ、CSSのbackground-image宣言のいずれかを生成します。