指定サイズのダミー画像URLを生成。Webデザインのモックアップ作成に。
指定したサイズ・色・テキストのプレースホルダー画像を生成する無料ツールです。Webデザインのモックアップ、開発中のダミー画像、ワイヤーフレームの画像枠に使います。
画像サイズ（幅×高さ）、背景色、テキスト色、表示するテキスト（デフォルトはサイズ表示）をカスタマイズできます。生成された画像はPNG形式でダウンロードできます。
フロントエンド開発中に、サーバーから配信される画像の代わりにプレースホルダー画像を使うことで、レイアウトの確認やレスポンシブデザインのテストができます。
プレースホルダー画像とは、Webサイトやアプリ、デザインのモックアップを作る段階で、まだ本番用の写真やイラストが用意できていないときに、その場所に仮置きしておく画像のことです。「ここに画像が入る」という枠だけを先に確保しておくことで、レイアウト全体の見た目やバランスを早い段階から確認できます。本番素材の準備とデザイン作業を並行して進められるため、制作のスピードと効率が大きく向上します。
主な用途としては、ワイヤーフレームでの画像枠の表現、ページ全体のレイアウト確認、CMSやテンプレートに差し込むダミー画像などがあります。とくにレスポンシブデザインでは、画面幅に応じて画像がどのように伸縮・トリミングされるかを検証する際に、指定サイズのプレースホルダー画像が役立ちます。このツールでは幅・高さ・背景色・文字色・表示テキストを自由に設定でき、入力に応じてその場で画像が描画されます。テキストを空欄にすると「幅×高さ」のサイズ表記が自動で表示されるため、どの枠がどのサイズなのかひと目で把握できます。
用途ごとに一般的によく使われる代表的なサイズをまとめました。プレースホルダー画像を作る際の目安としてご利用ください。
| 用途 | 代表サイズ（px） | アスペクト比 |
|---|---|---|
| YouTubeサムネイル | 1280×720 | 16:9 |
| OGP画像（SNSシェア） | 1200×630 | 1.91:1 |
| ヒーロー画像（横長バナー） | 1920×1080 | 16:9 |
| 正方形アイコン | 512×512 | 1:1 |
| Instagram正方形投稿 | 1080×1080 | 1:1 |
| ブログ記事サムネイル | 800×450 | 16:9 |
| バナー広告（レクタングル） | 300×250 | 6:5 |