ワイヤーフレーム

はじめに

ワイヤーフレームとはなんぞやってことで気分転換に書きたいと思います。

概要

ワイヤーフレームは、ホームページを制作する過程において、詳細なデザインの制作に入る前に、あらかじめ情報ブロックの配置を決めるために制作されます。
フレームがあることによって、クライアントも制作者たちも、全員が完成イメージを共有できるようになります。

作成方法

ワイヤーフレームの作成方法は、おおまかに下記手順ですすめていきます。

１. Webサイトに掲載する情報を書き出す
２. １で書き出した情報に優先順位をつける
３. ページレイアウトを決める
４. 手書き、もしくはソフトを使って整理した情報を配置する

１〜４に関してさらに詳しく説明していきます。

１.Webサイトに掲載する情報を書き出す
どんな画像・情報をサイトに掲載するかを書き出します。
例えば、お店のロゴ、メニューの項目数・項目名、電話番号、住所などをきちんと書き出します。

２. １で書き出した情報に優先順位をつける
１で書き出した項目に優先順位をつけます。人はWebサイトを見るとき、左から右に視線を動かします。一番初めに注目されるのは左上ということになります。

項目の優先順位をつけることによって、一番効果的な場所に重要な項目を置くことができます。

サイトの左上によく配置されるのはお店等のロゴが多いと思います。どの人から見ても、お店のロゴは重要度が高いからです。

しかし、お店の電話番号などはどうでしょうか？　ヘッダーに配置することもありますし、クライアントにとって、営業中に電話をかけられるのは困るからフッターに記載して欲しいなどの要望もあり、フッターに置くこともあるでしょう。

このように人によって項目の優先順位が違うこともあるので、クライアントやディレクターからきちんと情報を得ておくことも重要です。

３. ページレイアウトを決める
これまで整理した情報をもとに、サイト目的に応じてどのページレイアウトが一番適切かを決めます。

４. 手書き、もしくはソフトを使って整理した情報を配置する
ここでようやく決定したレイアウトに、優先順位を加味した項目を配置して、ワイヤーフレームを書いていきます。
ここからは、個人の好みやプロジェクトの規模によって変わってきますが、下書きとして手で書いてからツールで清書する方法、もしくは手書きのみ、ツールのみといった方法があります。