ワイヤーフレーム用プレースホルダー画像
ワイヤーフレーミングとプロトタイピングに効果的なプレースホルダー画像の作成方法を解説。ニュートラルカラー、ラベル規則、一般的なワイヤーフレーム画像サイズをカバー。
Use Cases
詳細な説明
ワイヤーフレーム用プレースホルダー画像
ワイヤーフレームは、ビジュアルデザインではなくレイアウト、コンテンツ階層、機能性に焦点を当てたUIのロー・フィデリティ表現です。ワイヤーフレームのプレースホルダー画像は、写真やイラスト、グラフィックが配置される場所を示す代替として機能します。
ワイヤーフレームプレースホルダーの規則
画像プレースホルダーの業界標準規則：
- ライトグレー背景（
#E5E7EBまたは#D1D5DB）とやや暗いテキストカラー - サイズを示す寸法ラベル（例：「800×600」）またはコンテンツ説明（例：「Hero Image」、「Product Photo」）
- ほとんどのワイヤーフレーム要素にボーダーラジアスなし
ワイヤーフレーム画像の推奨サイズ
| コンポーネント | 一般的なサイズ | ラベル提案 |
|---|---|---|
| ヒーローバナー | 1200×400 or 1200×600 | "Hero Image" |
| カードサムネイル | 300×200 or 400×300 | "Thumbnail" |
| プロフィールアバター | 80×80 or 150×150 | "Avatar" |
| 商品画像 | 400×400 or 600×600 | "Product Photo" |
効果的なワイヤーフレームプレースホルダーのコツ
- 一貫性を保つ — ワイヤーフレーム内のすべてのプレースホルダー画像で同じグレーシェードとフォントサイズを使用
- 意味のあるラベルを付ける — 寸法だけでなく、「User Photo」や「Banner Ad」のような説明テキストを追加して意図を伝える
- 本番のアスペクト比に合わせる — 最終画像と同じアスペクト比を使用して、プレースホルダーを実際のコンテンツに置き換える際のレイアウトの問題を防ぐ
ユースケース
UXデザイナーは、Figma、Sketch、Balsamiqなどのツールでロー・フィデリティモックアップにプレースホルダーを配置するためにワイヤーフレームプレースホルダーを作成します。プロダクトチームは、写真家やイラストレーターにコンテンツ要件を伝えるためにプロトタイプでラベル付きプレースホルダーを使用します。