プレースホルダー画像ジェネレーター

カスタムカラーとテキスト付きの任意サイズのプレースホルダー画像を生成します — モックアップやプロトタイプに便利です。

スタジオ · ニュートラル環境

定番サイズ

サイズ（px）

背景 / 文字

カスタムテキスト（空欄ならサイズを表示）

フォント px

機能

幅と高さを指定

色をカスタマイズ

テキストを自由に指定

PNG・SVG でダウンロード

使い方

1. 定番サイズ（OG 画像、アバター、HD など）を選ぶか、ピクセル値を直接入力します。

2. 背景色と文字色を設定します — 配置先の背景が不明な場合は市松の下地が役立ちます。

3. PNG をダウンロードするか、data URL としてコピーして src 属性にそのまま貼り付けられます。

このツールについて

レイアウトを作っている段階では本物の写真がまだそろっていないことが多く、画像が壊れたアイコンのままでは余白を判断しにくくなります。このジェネレーターは、指定したピクセルサイズ、背景色、文字色で単色のプレースホルダー画像を作り、サイズか任意のテキストを表示するので、最終的に必要な素材の大きさが誰にでも分かります。プリセットには、1200 × 630 の Open Graph 画像、1600 × 900 の Twitter カード、1080 × 1080 の正方形投稿、1920 × 1080 の HD、4:3、1500 × 500 のバナー、400 × 400 のアバターがあり、任意の幅と高さも入力できます。結果は PNG でダウンロードするか、data URL としてコピーしてプロトタイプ、メールテンプレート、テスト用データの img src にそのまま貼り付けられます。

よくある質問

data URL とは何で、なぜコピーするのですか？

data URL は画像全体を data:image/png;base64 から始まるテキストにしたものです。ファイルを保存したりホストしたりせずに <img src> や CSS の背景に貼り付けられるので、手早いプロトタイプに便利です。

プレースホルダー画像は最終的なサイズと合わせるべきですか？

はい。最終的なサイズと縦横比をそのまま使うと、レイアウトのずれ、トリミング、文字の折り返しに早い段階で気づけるので、本物の画像を差し込むときに困りません。

Open Graph 画像はどのサイズにすべきですか？

Facebook、LinkedIn、多くのメッセージアプリのリンクプレビューでは 1200 × 630 ピクセルが広く推奨されています。正方形に切り取るプラットフォームもあるので、重要な文字は端に寄せないでください。

チェック柄やニュートラルな背景を選ぶのはなぜですか？

ニュートラルなグレーやチェック柄ならプレースホルダーだとすぐ分かり、どんな背景に置かれても見え方を確認しやすいので、完成品と間違えられにくくなります。

これらの画像を本番で使ってもよいですか？

モックアップや開発用です。公開サイトにプレースホルダーが残っていると未完成に見え、検索エンジンにも有用な画像内容が伝わらないので、公開前に本物の画像と alt テキストに差し替えてください。

プレースホルダー画像ジェネレーター

機能

使い方

このツールについて

よくある質問

関連ツール