ワイヤーフレーム

ワイヤーフレームとは、Webページやアプリの画面に置く情報と、要素の配置を整理するための設計図です。画面の構成や導線を、見た目の細部を仕上げる前に検討するために使います。[1][2]

Wireframeとも呼ばれるWeb制作の実務用語で、単一の公式定義や技術標準によって資料の範囲が決まるものではありません。作り込む細かさは、確認したい内容に合わせて変わります。

整理するのは、画面に必要な情報、配置の優先順位、利用者が次へ進むための導線です。Figmaの解説でも、画面レイアウトやナビゲーションなどの基本的な構成を共有する設計図として扱っています。[2]

• 掲載する情報：見出し、本文、画像など、画面に必要な内容。
• 情報の配置：どの内容を上に置くか、何をまとめて見せるか。
• 操作と導線：メニュー、ボタン、リンクをどこに置き、どこへつなぐか。

たとえば、サービス紹介ページなら、説明を読んだ後に問い合わせへ進めるよう、本文とボタンの位置関係を示します。写真の選定や配色を完成させなくても、情報の並びと移動先を検討できます。

サイトマップがサイト全体のページ構成やつながりを整理するのに対し、ワイヤーフレームは画面内の情報配置を扱います。UXの調査・コンサルティングを行うNielsen Norman Group（NN/G）の用語集でも、前者はサイトのコンテンツの構成を示す図、後者は画面の構造や機能を表す骨組みとして整理されています。[1]

デザインカンプが完成時の視覚表現を具体化する資料であるのに対し、こちらは情報の配置を検討する資料です。NN/Gが設計案を試すためのものと捉えるプロトタイプとは、構成を検討することと案を試すことに重点の違いがありますが、実際の資料では役割が重なることもあります。[1]

関係者が確認するのは、画面の構成が目的に合っているかという点です。配色や写真の好みだけで評価せず、次の観点をそろえて確認します。

• 必要な情報があり、何を伝える画面かが分かるか。
• 情報の優先順位と、読む順番が整理されているか。
• ボタンやリンクの役割と、移動先が分かるか。

資料の名前だけで完成度や制作順序を決めず、何を確認するためのものかを共有します。構成を確認する資料に、仕上がったデザインと同じ細かさを求めると、確認の目的が曖昧になります。