ワイヤーフレーム（wireframe）とは、画面の骨組みだけを描いた設計図である。どこに何を置くか、どこが押せるかを示す。色、写真、文字の装飾は入れない。
たとえば、商品ページを作るとする。ワイヤーフレームでは、写真の場所に、バツ印の入った四角を置く。商品名、値段、「かごに入れる」ボタンも、四角と文字だけで描く。見た目は地味である。しかし、「ボタンは写真の右下でよいか」「値段はレビューの前か後か」を、色や写真に気を取られずに話し合える。
何を描くのか
NN/g の「UX Deliverables: Glossary」（Huei-Hsin Wang、2024年）は、ワイヤーフレームを、見た目を加える前の、構造と機能を示す骨組みと説明している。
描くのは、配置、部品（ボタン、入力欄、メニュー）、ナビゲーション、情報の優先順位である。描かないのは、色、書体、画像などの見た目である。ウィキペディアの項目も、同じ範囲を示している。
ワイヤーフレームで確かめられること
NN/g の記事「UX Prototypes: Low Fidelity vs. High Fidelity」（カラ・パーニス、2016年）では、試作の「忠実度」（完成品にどれだけ近いか）が論じられている。見た目の面で、忠実度が低い例は、白黒のスケッチと、ワイヤーフレームである。忠実度が低い試作には、次の利点がある。
- 準備に、時間がかからない。
- テストの途中でも、直しやすい。
- 未完成に見えるので、設計者も関係者も、変更を受け入れやすい。
一方で、文字の読みやすさや、画像の見え方は、完成度の高い試作のほうが、確かめやすい。
使うときの注意
- 見た目の議論を持ち込まない。色や写真は、あとで決める。ここで話すのは、配置と流れである。
- 仮の文章に気をつける。仮の文章は、実際の長さと違うことがある。本物の文章で、崩れないかを確かめる。
- 早く、何度も直す。ワイヤーフレームは、完成させるものではない。利用者に見せて、直す。ペーパープロトタイプのように、紙でもよい。
語源・位置づけ
ウィキペディアによると、「ワイヤーフレーム」は、立体の形や量を、骨組みで表す分野から来た言葉である。ウェブサイトでは、「ページ概要図（page schematic）」「画面の設計図（screen blueprint）」とも呼ばれる。
ウィキペディアによると、作る順番は、フローチャートやサイトマップのあと、詳しい画面デザインの前が多い。NN/g の用語集は、完成度の高い対のものを、モックアップとしている。
出典
- Nielsen Norman Group「UX Deliverables: Glossary」（Huei-Hsin Wang、2024年8月9日）
- Nielsen Norman Group「UX Prototypes: Low Fidelity vs. High Fidelity」（Kara Pernice、2016年12月18日）
- Wikipedia「Website wireframe」
- UX DAYS TOKYO「ワイヤーフレームは具体的要素とその配置を確認するもの」
