ワイヤーフレームとは

ワイヤーフレームとはWebページのどこに何を置くかを、色や装飾を省いて線と箱で描いた設計図のことです。

ワイヤーフレームはページに載せる情報と、その並び順や大きさを決めるために作ります。見出し、文章、画像、ボタンなどを灰色の箱や線で表し、デザインの前に構成を固めます。

なぜデザインの前に作るのか

色や写真が入ったデザインを先に見せると、話し合いがどうしても見た目の好みに寄りがちです。ワイヤーフレームの段階で「何を、どの順番で伝えるか」を決めておくと、デザインに入ってからの大きな手戻りを減らせます。依頼した側も完成したページを想像しやすくなります。

似た言葉との違い

ワイヤーフレームをもとに色や画像を入れて完成に近い見た目にしたものを「デザインカンプ（モックアップ）」、実際にクリックして動きを確かめられるようにしたものを「プロトタイプ」と呼びます。