プレースホルダー画像ジェネレーター(サンプル画像生成)

幅・高さ・背景色・文字色を指定するだけで、ダミーのサンプル画像をブラウザ内で生成しPNGとしてダウンロードできます。画像はサーバーに送信されません。

よく使うサンプル画像サイズの目安

サイズ 主な用途
300×200 小さめのバナー・広告枠のプレースホルダー
800×600 ブログ記事中の挿入画像・ワイヤーフレームの仮画像
1200×630 OGP画像(Facebook・X/Twitterのシェアカード表示用)
1080×1080 Instagram等SNSの正方形投稿
1920×1080 フルHDのヒーロー画像・スライドショー背景
640×360 16:9の動画サムネイル・カード型UIのサムネイル

使い方のヒント

  • 「1200×630(OGP)」プリセットを使うと、Facebook・X(旧Twitter)のシェアカードで切れずに表示される標準サイズの画像がすぐに用意できます。
  • オーバーレイテキストを空欄のままにすると「幅×高さ」の数値が自動表示されるため、複数サイズを見比べるワイヤーフレーム作成時にどのサイズか一目で判別できます。
  • 背景色・文字色はカラーピッカーでの選択のほか、16進数カラーコードの直接入力にも対応しているため、デザインカンプの配色に正確に合わせられます。
  • 生成した画像はローカルにダウンロードされるだけで、このサイトのサーバーには一切送信・保存されません。

よくある質問

Webサイトやアプリのデザインカンプ・ワイヤーフレームで、まだ本番の画像素材が用意できていない箇所に仮置きする「ダミー画像」として使われます。レイアウト確認やコーディング作業を、実際の写真やイラストの完成を待たずに進められるのが利点です。

いいえ、保存されません。このツールは要素を使ってブラウザ内だけで画像を描画・PNG化しており、画像データがサーバーにアップロードされることは一切ありません。ダウンロードボタンを押すとお使いの端末に直接保存されます。

Facebook・X(旧Twitter)等の主要SNSでは1200×630px(アスペクト比 約1.91:1)が推奨サイズとされています。このサイズより極端に小さいと画質が粗くなり、比率が異なるとトリミングされて意図しない位置で切れて表示される場合があります。

このツールでは1px〜4000pxの範囲で指定できます。ブラウザの要素にはブラウザごとに実装上の上限があるため、極端に大きいサイズ(数万px四方など)は避けることをおすすめします。
ツールくん

余談ですが ― プレースホルダー画像という文化

Web制作の現場では、本番用の写真やイラストが用意できるまでの「仮置き画像」としてプレースホルダー画像を使う文化が古くから根付いています。印刷業界で内容の整っていない文章の代わりに使われる「lorem ipsum」のダミーテキストと同じ発想で、画像版のダミーとして機能するものです。

2014年に登場した「Lorem Picsum」というサービスは、実在の写真をランダムに配信するプレースホルダー画像サービスとして広く使われるようになりました。URLに幅・高さを指定するだけで写真が返ってくる手軽さから、多くのデザインカンプやチュートリアルで採用されています。ただし外部サービスに依存するため、オフライン環境や機密性の高いプロジェクトでは使いづらいという制約もあります。

このツールはそうした外部サービスに頼らず、ブラウザのだけで単色背景とテキストラベルの画像を即座に生成する方式を採っています。写真のようなリアルさはありませんが、サイズやアスペクト比の確認、SNSシェア画像のレイアウトテストなど「とりあえず正しい寸法の画像が1枚欲しい」という場面には十分な用途を果たします。