読み：わいやーふれーむ ／ 分野：IT・システム
ワイヤーフレームとは、Webサイトやアプリの画面上に何をどう配置するかを示す設計図です。
ワイヤーフレームとは、Webサイトやアプリの画面に、どの要素をどこに配置するかを線や箱で示した設計図です。文字の色やデザインの装飾を含まず、情報の配置と画面の構造だけを示す資料です。
意味
ワイヤーフレームは、画面を作る前の段階で、見出し・本文・画像・ボタンなどの位置関係を確認するために作成します。「どこに何があるか」を決める骨組みの資料であり、色づかいやフォント、写真の選定といった見た目の要素は基本的に含みません。この段階で画面構成を関係者全員が確認することで、デザインを作り込んだ後に「配置がおかしい」「必要な情報が抜けている」といった手戻りを防げます。ワイヤーフレームの後に、色やフォントを加えたデザインカンプ（完成イメージ）を作成し、さらにその後にプログラムを組んで実際に動く画面に仕上げる、という流れが一般的です。
使われる場面と具体例
- Web制作会社が、新しい会社サイトを作る際に、トップページの構成案としてワイヤーフレームを提示し、発注側の担当者が掲載内容の過不足を確認する。
- アプリ開発の担当者が、新機能の画面案をワイヤーフレームでまとめ、社内の関係者からボタンの配置や操作の流れについて意見を集める。
- デザイナーが、クライアントに複数案のワイヤーフレームを見せて、情報の並び順や優先度についてすり合わせを行う。
中小企業が押さえたい点
- ワイヤーフレームの段階では、色やデザインの美しさではなく、必要な情報が漏れなく配置されているかを確認します。
- 自社が伝えたい情報（商品説明、問い合わせ導線、実績紹介など）が、優先度の高い位置に置かれているかを見ます。
- この段階で修正すれば手戻りの負担が小さいため、デザインが完成してから意見を出すよりも早い確認が望まれます。
よくある誤解
- ワイヤーフレームを最終的な見た目だと誤解し、「もっと格好よく」と色やデザインの感想を伝えてしまうことがありますが、この段階で見るべきは配置と構成です。
- ワイヤーフレームがあれば要件定義（必要な機能や仕様を決める作業）が済んでいると思われがちですが、実際には画面の構成を示すものであり、裏側の処理や機能の詳細までは表しません。
よくある質問
Q. ワイヤーフレームとデザインカンプは何が違いますか。
A. ワイヤーフレームは配置と構造のみを示す骨組みの資料で、デザインカンプは色やフォント、写真などを加えた完成イメージの資料です。
Q. ワイヤーフレームの確認は誰が行うべきですか。
A. 発注側の担当者と、実際にそのページや画面を使う部署の両方が確認すると、必要な情報の抜け漏れに気づきやすくなります。
Q. ワイヤーフレームの作成にはどれくらいの時間がかかりますか。
A. ページ数や画面数、関係者の確認回数によって幅があるため、制作会社や開発会社に見積もりの際に確認することをおすすめします。
関連する用語
関連記事
ほかの用語を探す
