プレースホルダー画像ジェネレーター
任意のサイズのダミー画像をSVG、PNG、貼り付けられるdata URIで作成します。
プレースホルダー画像ジェネレーターは完全にブラウザ内で動作します。SVGは端末上で生成・変換され、何も送信されません。
Open Graphジェネレーターを開く
プレースホルダー画像生成 について
プレースホルダーの外部サービスは、まだ設計中のレイアウトの真ん中に通信を差し込みます。それが並んだページは遅く、オフラインでは使えず、他社の障害ひとつで壊れます。同じ灰色の四角をローカルで作れば、その依存はなくなります。結果はSVGなので、保存しても、PNGに変換しても、通信ゼロのdata URIとして貼り付けても構いません。サイズは実際に使うもの、つまりSNSカード、広告枠、アバター、ヒーロー画像を揃え、ラベルは既定で寸法を表示します。
機能
- 任意の幅と高さ、SNS・広告・汎用のプリセット
- 背景色と文字色を指定でき、既定値は読みやすい配色
- ラベルは寸法または任意のテキスト
- 角丸と、ワイヤーフレームでおなじみの対角線
- SVGで保存、または実寸でPNGに変換
- オフラインでも動き通信を使わないdata URI
プレースホルダー画像生成 の使い方
- 幅と高さを入力するか、プリセットを選びます
- 色とラベルを決めます。寸法のままでも構いません
- data URIをコピーするか、SVGかPNGを保存します
- HTML、CSS、JSXのコード片をレイアウトに貼り付けます
例
入力
1200 × 630 · #e5e7eb background
出力
<img src="data:image/svg+xml,%3Csvg…" width="1200" height="630" alt="" />
Open Graphカードのプレースホルダーをdata URIで。通信も障害もなく、オフラインでも同じ見た目です。
よくあるエラーとトラブルシューティング
- data URIでCSSが壊れる。 — url()の中で二重引用符で囲んでください。ここのCSSコード片はそうしています。
- RetinaディスプレイでPNGがぼやける。 — 表示サイズの2倍で生成してください。入力した画素数どおりに変換されます。
よくある質問
- 指定サイズのプレースホルダー画像を作るには。
- 上で幅と高さを入力すればすぐ生成されます。SVGやPNGで保存するか、data URIをコピーしてください。
- 外部サービスではなくdata URIを使う理由は。
- 画像ごとの通信が減り、オフラインでも動き、外部サービスの停止や制限で壊れることもないからです。
- プレースホルダーはSVGとPNGのどちらが良いですか。
- 画面表示ならSVGです。数百バイトでどんなサイズでも鮮明です。ラスター画像を要求するツールにはPNGを使います。
- Open Graph画像のサイズは。
- 1200×630ピクセルで、プリセットにも入っています。Facebook、LinkedInなど多くのプレビューがこの比率で切り抜きます。
関連ツール
すべての ArrayKit ツール