ワイヤーフレームを作成してリニューアル後のホームページのイメージを共有する

ワイヤーフレームとは？

ワイヤーフレームとはWEBサイトの各ページにどのような情報や機能が必要かを記した資料になります。

基本的には全ページ分つくられ、それぞれ以下のような情報が記されます。

• どのような情報が必要か
• 情報をどのようにグルーピングするか
• 情報ごとの強弱（場合によっては順列）
• どこからリンクされどこにリンクするか（別途、画面遷移図を作る場合もあり）
• どのような機能、動きが必要か
• どのようなエラーが考えられるか
• なんらかのステータスによって変わる部分があるか
• PCとスマホなど、デバイスの違いによる違いはあるか

大まかにこういった内容を各ページごとに書いて行きます。

例えば会社情報ページであれば以下のようなことを記します。

• 「会社情報」というタイトル見出しが欲しい
• 「会社名」「住所」「電話」「代表名」・・・・などの情報が欲しい
• 「アクセスマップ」の図版が欲しい
• 「沿革」の情報が欲しい
• 同カテゴリの次ページである「代表挨拶ページ」へのリンクが欲しい

どのようなフォーマットにどのように書くかの決まりはありません。

ワイヤーフレームを作成するためのツールやソフトウェアは数多く出ていますが、エクセルで作成するのもまだまだ一般的に行われています。

ワイヤーフレームの役割

ワイヤーフレームの役割は一つに集約されます。

それはそのページがどのような情報・機能を持ったページになり、ユーザーにどんな情報をどのような順列を持って伝えるものなのかをプロジェクトメンバー全員が理解できるようになるという役割です。

発注側はそれを見て良し悪しや整合性を判断し、デザイナーはどのようにデザインすべきかがわかるようになります。

細かいことを言えば、どこにどのような原稿や写真を用意すべきかなどもわかるようになるので、ワイヤーフレームがあって初めてそれらの準備に取り掛かれるようにもなるでしょう。

作り込まれたワイヤーフレームの功罪

昨今ではツールが優秀になったため、リニューアル後のページがそのままイメージできるくらい詳細に作り込まれたワイヤーフレームも少なくありません。

作り込まれたワイヤーフレームが悪い訳ではありませんが、本来、レイアウトなどを行うのはデザイナーやIA（情報アーキテクチャ）の領域であることは知っておいた方がいいでしょう。

どのような知識を持った人なのかにもよりますが、WEBディレクターやましてやその卵であるアシスタントディレクターがそこまでの作り込みをしてしまうのは避けるべきです。

もしもそのような人が作成したワイヤーフレームを提出された場合は、どのような意図でそのレイアウトになったのかなどを確認するようにしましょう。

ワイヤーフレームはなぜそのようになったのかを全て論理的に説明できる必要があります。

「なんとなく」や「他のサイトを参考にして」などといった理由ではリニューアルの目的達成は遠のいてしまうでしょう。

ワイヤーフレームを見てどのようなページになるのかの想像力をつける

作り込まれたワイヤーフレームが重宝されるのは、全員のイメージを一致させやすく、デザイン工程後の手戻りを少なくすることができるからです。

しかしながら前述したような問題もあれば、ワイヤーフレームを作り込むための余計な工数（費用）がかかっていることもあります。

また、作り込まれたワイヤーフレームを欲する人ほどデザインが出来た際に「ワイヤーフレームにそのまま色がついただけ」という的外れな指摘をしてしまいます。

せっかく作り込まれたワイヤーフレームを大きく崩してデザインすることに何の意味があるのかを考える必要があるでしょう。

これらを解消するには発注側がシンプルなワイヤーフレームからどのようなページになるのかを想像し、何か足りていない情報は無いかなどを確認するだけの能力が必要になります。

シンプルなワイヤーフレームでプロジェクトを進めることができればとてもスムーズに進み、レイアウトデザインはWEBデザイナーが自由な発想で実力を発揮することが可能になります。

もしも実現したいページの参考イメージがあるのであれば、事前に伝えておくことで理想のページに近づけることができるでしょう。

ワイヤーフレームはサイトの設計図

デザインされたページを確認するのとは違い、ワイヤーフレームを確認するのは少し骨が折れますがサボらないようにしましょう。

サイトは設計図であるワイヤーフレームの通りに作られて行きます。

マイホームを建てる時に図面を確認せずに、どこにトイレやお風呂、キッチンが設置されるかもわからないまま建築をお願いする人はいないと思います。

それと同じと考えましょう。

WEBサイトの特性上、家を建てるのとは違い、後からの修正も多少であれば可能ですが基本的には追加費用やスケジュールが必要になるものと考えましょう。

また、場合によっては直せない箇所も出てきます。

口出しをするのは可能な限りこのワイヤーフレーム制作の工程の時に集約できるとスムーズに後工程が進みます。

まとめ

設計図を確認せずに家を建ててもらうことはないのと同じように、ホームページのリニューアルにもワイヤーフレームという設計図が必要になります。

ワイヤーフレームにはそのサイトのすべてが詰まっています。

「リニューアルだから」と既存ページのイメージをそのままワイヤーフレーム代わりにするのは失敗の元でしょう。

もしもワイヤーフレームの内容などに不安などがございましたら、是非、ホームページリニューアルカウンセリングをご検討いただき、お気軽にお問い合わせください。