ワイヤーフレーム【wireframe】

概要

ワイヤーフレーム（wireframe）とは、3次元コンピュータグラフィックス(3DCG)で、立体を頂点と輪郭線のみの「骨組み」で表したもの。転じて、制作物の概要を示すために簡易な線画で構成された設計図面のこと。特に、Webサイトやスマートフォンアプリの画面設計図。

3DCGのワイヤーフレームモデル

“wire” は針金や電線、“frame” は枠組み、骨組みなどを意味し、3DCGで立体物を表現する際に頂点と頂点間を結ぶ線分のみを描画する手法を指す。面の情報を持たず、すべての線が見えるように描画する方式と、面についての情報を持ち、視点から見えない線は描画しない（隠線消去）方式がある。

最も基本的で簡易な3D描画手法で、コンピュータの性能が低い頃のCG表現によく見られた。現代では面を描画するサーフェスモデルが一般的だが、3DCG制作ソフトや3D CADの設計画面などでは立体の形状を編集する際にワイヤーフレーム表示を用いることが多い。

Webサイトのワイヤーフレーム

Webサイトやスマートフォンアプリのデザインを検討する初期段階で、表示画面の中でどこにどのくらいの大きさや形状でどのようなコンテンツや操作要素が入るのかを示した線画の図面をワイヤーフレームという。

詳細なデザインや装飾などはせず、画像を矩形で表したり、未確定な文章は横線やでたらめな文字列で表すなど、形状や大きさ、配置といったレイアウトに関連する要素以外は極力省略する。各要素には「ロゴ画像」といった要素名や「季節ごとに差し替え」といった注釈などを付記する。

関係者間でコンセンサスが得られるまで何度も繰り返し書き直しや修正を行う前提で作られるため、紙に鉛筆やペンで手書きすることが多い。画像編集ソフトや文書編集ソフト、プレゼンテーションソフトなどでデータとして作成する場合もある。近年ではWebサイトやアプリのワイヤーフレームを作成するためのツールやネットサービスなどもあり、それらを利用することも多い。

(2022.9.13更新)