プレースホルダー画像生成ツール
任意のサイズ、背景色、ラベルテキストでプレースホルダー画像を生成し、PNG、JPEG、SVG形式でダウンロードできます。ファイルのアップロードは不要です。
プレースホルダー画像
- 寸法
- 800 x 600
- フォーマット
- PNG
- ファイルサイズ
- -
使い方
プレースホルダー画像生成ツールは、指定したサイズと色のシンプルな長方形にラベルを付けて描画します。これにより、デザイナーや開発者は実際の画像が完成するまでの代用として、プレースホルダーサービスやネットワークリクエストを必要とせずに画像を用意できます。
- サイズを設定してください
幅と高さを入力するか、OG画像やInstagram投稿などの一般的なプリセットを選択してください。
- 色とラベルの選択
入力するとプレビューが更新されます。ラベルを空欄にすると、代わりにピクセルサイズが表示されます。
- ダウンロードまたはコピー
ファイルを保存するか、データURIまたは貼り付け可能な<img>タグをコピーしてください。
PNG、JPEG、SVG
3つの形式すべてがブラウザ内でCanvas APIおよびSVG APIを使用してローカル生成されます。画像がサーバーに送信されることはありません。
- PNG：可逆圧縮で、透過なしの単色をきれいに表現でき、モックアップ用の最も安全なデフォルト形式です。
- JPEG: 写真のような画像では通常ファイルサイズが小さくなりますが、プレースホルダーの矩形はどちらの形式でも圧縮率がほぼ同じため、ここでは通常PNGの方が適しています。
- SVG：解像度に依存しないマークアップ形式で、画質低下やピクセル数の上限なく任意のサイズに拡大縮小でき、同じプレースホルダーを複数のサイズで使用する際に最適です。
データがデバイスの外に出ることはありません
画像はブラウザ内のHTMLキャンバス上に描画されるか、SVGテキストとして構築されます。ページの読み込み後、ダウンロード、データURIのコピー、<img>タグのコピーはいずれもオフラインで利用できます。
よくある質問
ワイヤーフレームやモックアップ用のプレースホルダー画像を作成するにはどうすればよいですか?
幅と高さを入力するかプリセットをクリックし、背景色、テキスト色、任意のラベルを選択してください。いずれかの項目を変更すると、プレビューとダウンロード内容がリアルタイムで更新されます。ファイルを取得するには「ダウンロード」を、プレビューの下に表示されているデータURIを取得するには「コピー」をクリックしてください。
別のファイルを用意せずにHTML内でインラインのプレースホルダー画像を使用するにはどうすればよいですか?
出力ボックスからデータURIをコピーするには「コピー」をクリックしてください。<img src="data:image/png;base64,..." width="800" height="600" alt="Placeholder">のようなすぐに貼り付け可能な要素が必要な場合は「<img>タグをコピー」をクリックしてください。どちらの形式もHTMLに直接貼り付けて使用でき、サーバーやファイルへの参照は不要です。
利用可能な一般的なサイズのプリセットは何ですか?
OG画像(1200x630)、Instagram投稿(1080x1080)、YouTubeサムネイル(1920x1080)、Twitterヘッダー(1500x500)、スマホ画面(375x812)、App Storeスクリーンショット(1290x2796)、iPad(768x1024)、Instagramストーリー(1080x1920)があります。いずれかのプリセットをクリックするとそのサイズが適用されますので、その後で色やテキストをカスタマイズしてください。
ラスター画像の代わりにSVGプレースホルダーを生成できますか?
はい。ファイル形式一覧からSVGを選択してください。出力されるのは、背景の矩形、オプションの対角ガイド線、テキストラベルを含む、適切にエスケープされた小さな<svg>要素です。PNGやJPEGとは異なり、SVGは解像度に依存せず、ピクセルサイズの上限もありません。
このツールで生成できる最大画像サイズはいくつですか?
非常に大きなキャンバスは低スペックデバイスのGPUテクスチャメモリを使い果たし、空白の出力になる可能性があるため、PNGおよびJPEGの幅と高さはそれぞれ4,096pxが上限となっています。一辺が約2,048pxを超えるプレースホルダーが必要な場合は、ピクセル解像度の制限がないSVG形式を使用してください。