外部サービスなしでダミー画像を作る

やりたいこと

デザインモック・レイアウト確認・CMSの初期データには正確な寸法の実画像ファイルが必要です。OGカードなら1200×630、広告枠なら300×250など。外部のプレースホルダーURLはブラウザでは動きますが、オフラインのビルドで壊れ、第三者へリクエストが漏れます。

使い方

幅と高さを入力し、PNG・JPG・WebPから形式を選んで背景色と文字色を設定します。文字は空欄なら寸法が自動で入ります。生成してダウンロードします。

• 文字は自動で縮小して収まるため、長い文字列は切り捨てではなく小さく表示されます。
• 中間グレー背景＋白文字はレビュアーの目を引かないニュートラルなモックに向きます。

具体例

ランディングページのモックにヒーロー（1600×900）、サイドバーカード（400×300）、OGプレビュー（1200×630）が必要なら、3枚ともPNGで1分以内に作れます。ファイル名に寸法が入るため、マークアップへの割り当てが迷いません。

注意点

単色＋中央の1行テキストのみで、グラデーション・パターン・写真はありません。WebPのエンコードはブラウザのcanvas対応に依存するため、出力がおかしい場合はPNGを使います。サイズは各辺8〜4096pxです。