DESIGN

プレースホルダー画像生成器 — モックアップ用仮画像

UIをデザインする際、実際のコンテンツが用意できる前にレイアウトをテストするためプレースホルダー画像は不可欠です。生成器は必要なサイズで正確に作成します。

プレースホルダー画像を使う場面

画像配置を視覚化するためのワイヤーフレームとモックアップ。様々な画像サイズでのレスポンシブレイアウトのテスト。本番画像なしにクライアントへのコンテンツ構造のデモンストレーション。

SVG vs. PNG プレースホルダー

SVGプレースホルダーは非常に小さく(数百バイト)、無限にスケールします。PNGプレースホルダーは互換性が高いが大きいです。ネットワークリクエストなしのインラインプレースホルダーにはデータURLを使用:<img src="data:image/svg+xml;..."/>。

Lorem PicsumとAlternatives

Lorem Picsum(picsum.photos)、Unsplash Sourceなどはダイナミックなプレースホルダー画像をURLで提供します。リアリスティックなコンテンツプロトタイプに便利ですが、インターネット接続が必要です。