ワイヤーフレームって何？

会社の連絡上で、

「まだ情報は整理中ですが、ワイヤーフレームをひとまずご連絡しておきますので、ちらっと見ておいてください。」

と言われた。

――――ワイヤーフレーム？？

もうこの時点で、私の頭はこんな感じ↓↓

なのですがｗｗｗ

ワイヤーフレームとは、簡単に言えば『サイト設計図』といったところですね。

サイトを構成する要素や機能などの情報を設計図のように配置しておき、クライアントと制作者側に認識を合せるためのものです。

▼具体的にいえばこんなのです。

このワイヤーフレームが

具体的であればあるほど制作側とクライアント側のイメージがわかれずに、

スムーズに作業を行うことができます。

上記のワイヤーフレームでは、構成はよくわかるのですが、

デザインの情報がまるでわかりません。

なので、これではクライアントの希望するサイトの構成がわかっても、

デザインを制作するのにとても時間がかかってしまいます。

Web制作をしていると思うのですが、

具体性のないワイヤーフレームは、

（例えばクライアント側が『お任せっ！』としている部分も含めて）

やはり一人ひとり考え方の違いがあるので、

その分修正も増えてしまうことが多い傾向にあると思います。

たぶんこうかな？

っとふわふわしたイメージで制作したら、

実は全然違うデザインをご希望だったということが多々あります。

例）和風といっても、

古風なのか、和風モダンかで

全然違うデザインになるように。

この認識の違いについて、どんどんすり合わせする必要があります。

デザインはある程度仕方がないと妥協できますが、

HTMLやCSSコーディングになると、

一度組んだものに構成を組みなおすのは、

かなりの手間になってしまいます。

▼ワイヤーフレームの良い例と悪い例

 デザインの参考サイトやある程度の色合いなどもわかると、

制作側としてもイメージしやすく、

クライアント側のイメージにもそったものがつくれるようになります。

左のワイヤーフレームは、

ポップ調で、色合いもかなりカラフルだとわかりますが、

右だと大きさのみで、

どんなものを制作したらいいのかがわかりません。

このように形にしてしまえば、

依頼をしたクライアント側としても、

ある程度どんなものが仕上がるのか予測ができて、

両者の認識のずれがなくなります。

とはいえ、ワイヤーフレームは、

制作者とクライアントの間を埋めるもの。

両者によくわかるようなつくりにして、

スムーズな作業を行いたいものです。