ワイヤーフレーム

ワイヤーフレームは、Webページやアプリ画面の情報、操作部品、ナビゲーションの配置と優先順位を、色や装飾を抑えて示す低詳細度の設計図です。

■ 試験で押さえるポイント

• 見出し、画像領域、入力欄、ボタン、メニューなどの位置と画面間のつながりを早い段階で確認します。

• 低コストで修正できるため、関係者との要件確認や利用者による初期評価に向きます。

• 色、書体、写真など雰囲気を共有するムードボードや、実際に操作できるプロトタイプとは目的・詳細度が異なります。

• ダミー要素だけでなく、実際に必要な情報量、エラー状態、狭い画面での順序も考えると後工程の手戻りを減らせます。

■ 選択肢での判断ポイント

ムードボード、モックアップ、プロトタイプとの違い、UX五段階モデルの骨格段階との対応が問われます。

例: 商品詳細画面で、商品名、画像、価格、説明、購入ボタンの配置を灰色の枠で示した図がワイヤーフレームです。