ワイヤーフレームとは

Webサイトを作成する際、情報設計の段階で必要になる「ワイヤーフレーム」について解説します。

ワイヤーフレームは「Webページの間取り図」

ワイヤーフレームとは、簡単に説明すると「Webページの間取り図」のようなものです。Webページを制作する際には、ワイヤーフレームを作って、大まかなレイアウトを決めていきます。パッと見ただけで誰もが「どこになにを配置するか」がわかるようにすることが、ワイヤーフレームの目的です。

基本的には、レイアウトの違うページの数だけ、ワイヤーフレームを作成します。デザインやコーディングをする前にワイヤーフレームを作成することで、必要項目を確実に入れ、複数人でWebサイトを作成する際も完成イメージを共有することができます。特にWebサイトの制作を外部に発注する際は、ワイヤーフレームをしっかり作ることで完成後のイメージ違いを防ぐことにもつながったり、アイデアや議論の叩き台になったりもします。

ワイヤーフレームの作り方

ワイヤーフレームを作成する際は、まずWebページに載せる情報を整理していきます。Webページに必要な情報や項目をピックアップし、すべて書き出しましょう。次に、ピックアップした情報を類似のもの同士でグルーピングします。グルーピングした情報は優先順位をつけていきます。ここまで情報が整理できたら、レイアウト作業でワイヤーフレームを作っていきます。

「ディレクトリマップ」や「デザインカンプ」との違い

ワイヤーフレームと混同されやすいものに、「ディレクトリマップ」「デザインカンプ」などがあります。ワイヤーフレームがWebサイトのページ内レイアウトを決めるのに対し、ディレクトリマップはWebサイトの全ページに対するURL構造・階層構造をまとめたものです。また、デザインカンプはデザインの完成見本のことです。