用語解説

ワイヤーフレームとは

Time 2021年8月4日

 

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

 

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

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

 

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

 

 

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

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

 

 

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

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

 

マムズラボについて

マムズラボは、実務経験3年以上を有するプロフェッショナルが集まるクリエイティブ・マーケティングチームです。生活者目線と確かな経験・スキル、そして1,000名以上の圧倒的なリソースで貴社の課題解決を実現します。

プロジェクト実績

お問い合わせ先

仕事のご依頼・ご相談はこちらから