ブラウザ内でプレースホルダー画像を生成

プレースホルダー画像生成

色、スタイル、テキストを自由に設定して、任意サイズのプレースホルダー画像を作成。リアルタイムプレビュー、PNG/JPG/WebP/SVG のダウンロード、Next BConvert・Lorem Picsum・Placehold.co・DummyImage のホットリンク URL と貼り付け可能なスニペットに対応。

モックアップやワイヤーフレーム、フロントエンド開発のためのプレースホルダー画像

単色・グラデーション・チェッカー背景と、自分で選んだ色やテキストを使って、一辺最大 4000px のプレースホルダー画像を作成。プレビューは即時更新され、PNG・JPG・WebP・SVG でダウンロードできるほか、Next BConvert・Lorem Picsum・Placehold.co・DummyImage のホットリンク URL と貼り付け可能なコードもコピーできます。

プレースホルダー画像の作成方法

  1. 1.幅と高さをピクセルで入力するか、Avatar・Card・Hero・Twitter Card・YouTube サムネイルなどのプリセットを選択します。
  2. 2.単色・グラデーション・チェッカーの背景を選び、色を設定し、必要に応じてテキストを入力します（空欄にすると自動でサイズを表示）。
  3. 3.変更のたびにプレビューがリアルタイム更新されます。アップロードは一切なく、画像はローカルの canvas で描画されます。
  4. 4.PNG・JPG・WebP・SVG でダウンロードするか、Next BConvert・Lorem Picsum・Placehold.co・DummyImage のホットリンク URL と、貼り付け可能な HTML・Markdown・JSX・CSS・BBCode スニペットをコピーします。
  5. 5.Retina 1×/2×/3× をクリックすると、高 DPI 画面の srcset 用に同じプレースホルダーを 3 サイズでダウンロードできます。

このプレースホルダー生成の対応内容

1×1 から 4000×4000 ピクセルまで生成可能。カード、ヒーロー、SNS、端末サイズのワンクリックプリセット付き。

単色、2 色グラデーション、チェッカー背景から選択でき、背景色と文字色はそれぞれ独立して設定できます。

canvas プレビューは入力のたびに再描画されるため、ダウンロードやコピー前に正確な結果を確認できます。

PNG・JPG・WebP・SVG でダウンロードできるほか、画像を base64 データ URL としてコピーできます。

設定した正確なサイズのホットリンク URL を 4 つのサービスから生成:Next BConvert は自社ドメインで配信、Lorem Picsum はランダムな実写写真、Placehold.co と DummyImage は外部の単色プレースホルダーを提供します。

設定した正確な寸法を含む、貼り付け可能な HTML・Markdown・JSX・CSS・BBCode スニペットをコピーできます。

すべてブラウザ内で完結。サイズ、色、テキストは端末の外に出ません。

プレースホルダー画像生成のよくある質問

どのサイズを生成できますか?

一辺あたり 1×1 から 4000×4000 ピクセルまで生成できます。幅と高さの欄で正確な寸法を指定するか、Avatar(200×200)、Card(400×300)、Hero 16:9(1920×1080)、Twitter Card(1200×630)、Instagram(1080×1080) などのプリセットを選択してください。

縦横比の固定は何に使いますか?

「縦横比を固定」をオンにすると幅と高さの比率が一定に保たれ、一方を変更すると他方も連動します。srcset 用の 1×・2×・3× のように、同じ切り出しのレスポンシブセットを作るときに便利です。

使える背景スタイルは?

単色は 1 色で塗りつぶします。グラデーションは背景色とサブカラーを斜めに混ぜます。チェッカーは 2 色の市松模様を描き、画像を重ねるデザインでの透明部分の見え方を確認しやすくします。

プレースホルダーにテキストを追加できますか?

はい。最大 80 文字まで入力でき、中央に描画され、幅に収まるよう自動で縮小されます。空欄にするとサイズ(例:600 × 400)が表示されます。

ダウンロードできる形式は?

PNG は透明を保持、JPG と WebP は Web 向けにファイルが小さくなり、SVG はどんな表示サイズでもシャープです。画像を base64 データ URL としてコピーし、HTML や CSS に直接貼り付けることもできます。

Retina 1×/2×/3× ボタンは何をしますか?

現在のプレースホルダーを 1×・2×・3× の 3 スケールで PNG としてダウンロードします。ファイル名は placeholder-600x400.png や placeholder-600x400@2x.png のようになり、高 DPI 画面の srcset にそのまま使えます。

Next BConvert、Lorem Picsum、Placehold.co、DummyImage の違いは?

Next BConvert は nextbconvert.com の /api/placeholder エンドポイントから配信するため、プレビューと完全に一致し、自分のドメイン内で完結します。Lorem Picsum は指定サイズのランダムな実写写真を返し、リアルなモックアップに向きます。Placehold.co と DummyImage は中央に寸法が印刷された外部の単色矩形を提供し、ワイヤーフレームに向きます。画像を使う場所に合わせて選択してください。

プレースホルダーのデータはアップロードされますか?

いいえ。画像はブラウザ内の canvas で完全に描画されます。アップロードの工程はなく、サイズ・色・テキストがサーバーに送信されることはありません。