作業の進め方
Wireframe Specは、色や視覚的な仕上げの前に、画面の構造上の意図を定めます。コンテンツブロック、配置、優先度、挙動の注記を扱い、レスポンシブ時の違いやデータ駆動のコンテンツにも対応します。実際のナビゲーションやボタンのラベルを使うと、低忠実度でも構造が理解しやすくなります。
ソースは単なる枠の配置にとどまらず、見出しの階層、テキスト長の想定、画像の縦横比、必須と任意の要素、コンテンツの情報源も求めています。さらに、空、読み込み中、データ表示、エラーの各状態も求めるため、ワイヤーフレームが理想的な画面だけに偏りません。
想定される成果物
- コンテンツの優先度を示した、注釈付きの画面構造。
- 見出し、文字数、画像、情報源などを含むコンテンツ要件。
- レスポンシブレイアウトと、空・読み込み中・エラーの各状態に関する注記。
ブリーフからレビューまで
- 01忠実度とブロックを選ぶ
スケッチ、低、中、注釈付きのいずれかの忠実度を選び、主要なコンテンツ領域を定めます。
- 02コンテンツと挙動を指定する
各ブロックに、実際のラベル、優先度、データソース、インタラクションの注記を付けます。
- 03バリエーションを網羅する
ブレークポイントごとの変化と、空・読み込み中・データ表示・エラーの各バージョンを記述します。