日本のウェブサイトには「ただいま準備中」という独自の文化的慣習がある——コンテンツが未完成のページをそのまま公開し、日本語ならではの丁寧な断り書きで訪問者に待つよう伝える方式で、寸法だけを示す欧米式のプレースホルダー画像とは異なるアプローチだ。
プレースホルダーがそもそも重要な理由
正しい比率のプレースホルダーがあれば、デザイナーや写真家からの最終的なグラフィックを待たずに、意図したサイズの画像の周りにコンテンツがどう配置されるかをすぐに確認できる。これにより開発が加速し、レイアウトとコンテンツの作業を並行して進められる。
lorem ipsumと同じ役割を、画像で果たす
プレースホルダー画像がレイアウトに対して果たす役割は、lorem ipsumテキストが段落に対して果たす役割とまったく同じだ——「今はまだ内容ではなく、形を見てほしい」という合図である。どちらのツールも同じ問題を解決している。未完成の要素が本来の検証対象から目をそらさせないよう、構成要素を仮のもので埋めるという問題だ。
本物の画像なしでレスポンシブ対応をテストする
さまざまなサイズと比率のプレースホルダーは、レイアウトが異なる画面でどう動作するかを確認するのに役立つ——画像が横長ではなく正方形のときにレイアウトが崩れないか、ウィンドウのサイズ変更時にクロップが正しく機能するかなどだ。
なぜ必要なのか
- 本物のグラフィックが用意できる前に、適切なサイズの画像でレイアウトを素早く埋める。
- さまざまな比率の画像でレイアウトのレスポンシブ対応をテストする。
- 最終的なコンテンツを待たずに、クライアントやチームにページの構造を見せる。
プレースホルダーの形式：SVGとラスター画像
プレースホルダーはラスター画像(PNG、JPEG)、または品質を落とさずに拡大縮小できるベクター形式のSVGとして生成できる。SVGのプレースホルダーは、ピクセルデータではなく幾何学的図形とテキストを記述しているため、指定したサイズに関わらず通常わずか数キロバイトしかない。ラスター形式は、ページの読み込みパフォーマンスをテストするために、将来使われる実際の画像のファイルサイズを近い形でシミュレートしたい場合に役立つ。