ダミー画像（プレースホルダー）生成器

Webサイトの構築やデザイン設計において、「ここに横800px、縦600pxの画像が入る予定」という仮の空間を用意すべき瞬間が幾度となく訪れます。その際、適当なフリー素材を探すために時間を浪費したり、Photoshopを起動する重労働に耐えたりする必要はもうありません。
このツールは、幅・高さ・色を指定するだけで、数式のように正確な寸法が刻印された幾何学的な「ダミー画像（プレースホルダー）」をブラウザの空間に現出させます。未完成のレイアウトが物理的に崩壊するのを食い止める、強固な仮設建築を提供します。

目次を開く

ツールを使う 利用シーン 機能・仕様 早見表 よくある質問 (FAQ)

🖼️ ダミー画像（プレースホルダー）生成器

ツールを全画面で使う ↗

空白の恐怖を埋め尽くす利用シーン

デザインの初期段階において、本番用の写真素材が存在しないことは宿命です。以下のような場面で、レイアウトの秩序を維持します。

コーディングの枠組み構築	HTML/CSSを記述する際、imgタグに指定された寸法のダミー画像を流し込むことで、画像読み込み前後のレイアウトシフト（ガタつき）を視覚的に検証します。
ワイヤーフレームへの配置	FigmaやXDなどのプロトタイピングツールにおいて、「ここにバナーが入る」という意思表示を、色彩と寸法の印字によって明確に主張させます。
CMSのテーマテスト	ブログのサムネイルやアイキャッチ画像が想定外のアスペクト比でアップロードされた場合の、トリミング挙動をテストするための生贄として投入します。

機能・仕様：ブラウザが生み出す純粋な色彩

外部サーバーへのリクエストに頼らない、完全なスタンドアロン生成システムです。

• リアルタイムのキャンバス描画
  入力された寸法と色情報をトリガーとし、HTML5のCanvas APIがあなたの端末のメモリ内で瞬時に画像を錬成します。待ち時間はゼロです。
• 柔軟なフォーマット出力
  標準的なPNG形式はもちろん、用途に合わせてJPEG、または次世代の軽量フォーマットであるWebPでの出力・ダウンロードにも対応しています。
• 自動最適化フォントサイズ
  画像の中心に鎮座するテキスト（サイズ表記や任意の文字列）は、画像の縦横比から最も美しく収まるスケールを数学的に計算し、自動でリサイズされます。

早見表：Webデザインで頻出する画像サイズ

生成する寸法の参考となる、現代のWebプラットフォームにおける標準的なアスペクト比とピクセル数です。

用途	推奨サイズ (幅 × 高さ)	比率
OGP画像（SNSシェア用）	1200 × 630	約 1.91 : 1
YouTube サムネイル	1280 × 720	16 : 9
Instagram フィード（正方形）	1080 × 1080	1 : 1

よくある質問 (FAQ)

Q どれくらい巨大な画像まで生成できますか？

A. 安全装置として、幅および高さの最大値をそれぞれ「5000px」に制限しています。これ以上の寸法をブラウザ上で描画しようとすると、端末のグラフィックメモリを異常消費し、容赦なくブラウザがクラッシュするためです。

Q 透過（アルファチャンネル）の背景にすることは可能ですか？

A. 現在のカラーピッカーは不透明なHEXカラーに特化しているため、完全な透過画像は生成できません。ダミー画像は「そこに領域が存在する」ことを視覚的に主張する役割を持つため、何らかの色で塗りつぶされることを前提として設計しています。

開発者のひとりごと

👨‍💻

「とりあえず、ここに画像が入る体で進めておいて」。
ディレクターからの無慈悲な指示を受けた時、かつての私はネットの海を彷徨い、適当な猫の写真を拾い集めてはサイズを調整するという虚無の作業に時間を捧げていました。

しかし、猫の写真は危険です。クライアントの視線はレイアウトではなく猫の愛らしさに奪われ、デザインの本質的な議論が猫の種類に関する雑談へと崩壊していくからです。プロフェッショナルなモックアップに感情は不要です。

必要なのは、冷徹なまでに正確な寸法が印字された、灰色の幾何学模様だけなのです。このツールは、あなたの貴重なデザインプロセスを、猫の誘惑から物理的に防衛するために生み出されました。

関連ツール

• ツール一覧へ戻る