プレースホルダー画像ジェネレーター
プレースホルダー画像ジェネレーター：PNG、JPG、WebP、SVG | We.Inc
好きなサイズ、色、ラベルでプレースホルダー画像を作成できます。PNG、JPG、WebPでダウンロードするか、画像のホスティングが不要なインラインSVGのデータURLをコピーしてください。
プレースホルダー画像ジェネレーター
幅、高さ、背景色、文字色、ラベルを設定すると、このジェネレーターがブラウザー内でプレースホルダーを描画します。PNG、JPG、WebPでダウンロードするか、小さなSVGのデータURLをコピーしてimgタグやCSSにそのまま貼り付けられます。これでモックアップが外部の画像サービスに依存することはありません。
プレースホルダーを使う場所に合わせた形式の選び方
- SVGのデータURL
- プロトタイプとコードのサンプル
- ファイルもリクエストも不要で、どの倍率でもくっきり
- PNG
- デザインファイル、CMSへのアップロード
- 可逆圧縮で、すべてのブラウザーが対応
- JPG
- PNGを受け付けない場所
- 非可逆圧縮で、透過なし
- WebP
- 実際のページの重さのテスト
- ここでは非可逆圧縮で、ファイルが小さい
ホスティング型のプレースホルダーサービスは便利ですが、サービスが停止したりネットワークのフィルターでブロックされたりすると、デモの灰色の箱がすべて壊れてしまいます。このツールは代わりに画像を手元で作成します。手に入るのは本物のファイルか、コード内に収まる自己完結したSVG文字列のどちらかです。
- 一覧からよく使うサイズを選ぶか、幅と高さを入力します。各辺は最大4000ピクセルまでです。
- 背景色と文字色を選びます。ラベルを空にすると寸法が表示され、「ヒーロー写真」などと入力することもできます。
- プレビューはブラウザー内でSVGとして描画されます。コードで使うには、データURLか、作成済みのimgタグをコピーします。
- 実際のファイルが必要なら、PNG、JPG、WebPのいずれかを選んでダウンロードします。ブラウザーのcanvasがエンコードするため、何もアップロードされません。
- プレースホルダーであっても、imgには必ずwidthとheightの属性を付けましょう。そうすれば本物の写真に差し替えたときにレイアウトがずれません。
- プレースホルダーには「チーム写真」や「商品の正面」など、そこに入るべきものをラベルとして書いておきましょう。コンテンツの担当者が何を用意すべきかわかります。
- 背景は中間の灰色、文字はそれより濃い色にしましょう。真っ白な箱は、白いページのセクションに溶け込んで見えなくなります。
- 公開前にすべてのプレースホルダーを差し替えましょう。コード内でdata:image/svg+xmlを検索すれば、残っているものを見つけられます。
よくある質問
これらの画像に有効期限はありますか？
ありません。ダウンロードしたファイルはあなたのものですし、SVGのデータURLはページ内の単なるテキストなので、背後に消えてしまうようなサーバーは存在しません。
JPGでダウンロードすると透過がないのはなぜですか？
JPEGにはアルファチャンネルがないためです。ここで作るプレースホルダーはどれも単色の背景ですが、後でファイルを編集して透明な部分が必要になる場合は、PNGかWebPを選んでください。
SVGのデータURLはCSSで使えますか？
はい。background-imageの中でurl("...")で囲んでください。このツールはあらかじめダブルクォートをシングルクォートに置き換え、#、<、>をエンコードしているため、CSSやHTMLの属性の中でも文字列が壊れません。
WebPを書き出せるブラウザーはどれですか？
canvasからimage/pngへの書き出しはすべてのブラウザーで必須ですが、JPEGとWebPは任意です。WebPを作れないブラウザーでは自動的にPNGが返され、その場合はここで表示されるファイル名でわかります。
問題を隠さず、役に立つプレースホルダー
- 良いプレースホルダーは、最終的な画像と同じアスペクト比を持っています。ヒーローが16:9の写真になるなら、正方形ではなく1920×1080でプロトタイプを作りましょう。そうしないと、承認したレイアウトが後でうまく切り抜かれなくなります。
- 箱には想定しているサイズを書いておきましょう。そうすればデザイナー、ライター、カメラマンは、コードを開かなくても何を納品すべきかがわかります。
データURLとファイルの使い分け
- データURLは、画像のバイト列をsrcの中に直接入れます。小さなSVGならネットワークリクエストより軽く、コード片を持ち運びやすくなります。どこに貼り付けても表示されます。
- CMSにアップロードするもの、デザインファイルに保存するもの、長く使い続けるものには、代わりに本物のファイルをダウンロードしましょう。長いデータURLは、コードレビューで読みにくくなります。
よく使うプレースホルダーのサイズ
ジェネレーターで使えるプリセット
imgタグとCSSで使うプレースホルダー
リクエスト不要のインラインSVGプレースホルダー
同じ640×360の灰色の箱を2回使っています。1回は画像のソースとして、もう1回はCSSの背景としてです。
- Open Graphカード
- ヒーロー、16:9
- ブログのサムネイル
- 正方形の投稿
- 縦長のストーリー
- アバター
- 商品写真、4:5
- リーダーボードバナー
お使いのブラウザーでcanvasを開けませんでした。
画像をエンコードできませんでした。
{name}（{n} KB）を保存しました。
プレースホルダーを作成
サイズ、色、任意のラベルを選んでください。SVGのデータURLやimgタグをコピーするか、ブラウザー内で作成したPNG、JPG、WebPをダウンロードできます。
よく使うサイズ
プリセットを選択
幅（px）
高さ（px）
背景
文字色
ラベル
プレビュー：{label}のプレースホルダー
SVGのデータURL（{n}文字）
URLをコピー
imgタグ
タグをコピー
ファイル形式
ファイルをダウンロード
SVGのマークアップをコピー
無料で始める · クレジットカード不要
関連: 無料ツール｜ビジネス向け計算・生成ツール
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る