Webサイト制作におけるワイヤーフレームの役割とポイント

サイト制作に欠かせない画面設計図（ワイヤーフレームと言います）を作ることは、Webディレクターの仕事ですが、プレゼンテーションの際にはWebプロデューサーが手がける場合もあります。ここでは、Webプロデューサーが行うワイヤーフレーム作成のポイントについて説明します。

クライアントとの意思疎通としてのワイヤーフレーム

お客様からのヒアリングを反映させる

Webサイト制作プロジェクトを開始する際、サイトマップの次につくるものがトップページのワイヤーフレームです。ここで最も大切なことは、お客様からのヒアリング内容をいかにわかりやすく伝えられるかです。

Webサイト制作の目的や、Web 担当者が良いと思って参考にしているベンチマークや競合のサイト、好みのデザインの傾向などをお客様へのヒアリングから引き出すだけでなく、競合他社のサイトの傾向もWebプロデューサーは徹底して研究する必要があります。

お客様の好みを引き出す際は、「好みを教えてください」という単純な質問では得られません。「こんなサイトはどうですか？」と色々なWebサイトを見ていただき、その反応を見ていくなどで、お客様の好みをキャッチアップしていくことが具体的な要望を引き出す良い方法です。

Webサイトの流行を反映させる

企業のWeb担当者の方々はWeb専門に仕事をしているわけではないので、Web業界全体としてのデザインのトレンド感や技術動向、話題を集めた事例などについては、Webプロデューサーが積極的にリードをして提案に盛り込みます。

デザインや見せ方に特に意見はないといった堅実な業界のWebサイトにおいても、積極的な改善提案で期待以上のものを示していきます。

Webサイトの流行については、Webプロデューサーは常日頃からたくさんのWeb サイトを見て研究することが欠かせません。さらには提案相手である企業のWeb 担当者にも、ある程度の知識を持っておいたほうが、のちの意思疎通に役立ちます。

それでもお客様の中には流行りのデザインなどイメージがつきにくいこともあるでしょう。

たとえば、次のようなテーマ別にWebサイトを集めたギャラリーサイトを閲覧してみてくださいと伝えるのもよいでしょう。どちらもWebデザイナーの間でよく知られているサイトで、業種別・業界別やサイトの種別で検索することもでき、Web の構成やデザインの最先端を知るのに役立ちます。

ムーオルグ（非営利のWEBデザインポータルサイト）

ストレートラインブックマーク（Webデザインリンク集）

Webデザイナーへの伝達のためのワイヤーフレーム

ワイヤーフレームはWebデザイナーへの指示書

ほとんどのプレゼンテーションでデザイン案の提出が求められるため、ワイヤーフレームはデザイナーに渡す指示書の役割も果たします。このためWebプロデューサーがワイヤーフレームを作る際には、デザイン制作に関する素養も必要です。

デザインは提案の判断基準として大きなウェートを占めます。およそ5割の確率で、提案時のデザインが軸になってWebサイト制作プロジェクトがスタートするため、提案時点のWebデザイナーを誰にするかを決定することもWebプロデューサーの重要な仕事です。

まれに全く違うB案をお客様に求められて、そちらに決まることもありますが、プレゼン時のデザインが契約を左右することはいうまでもありません。

デザイナーのレベルに合わせたワイヤーフレームの調整が必要

なお、Webデザイナーにもさまざまなタイプがあります。渡したワイヤーフレーム通りのデザインをきっちり正確に作るデザイナーもいれば、ワイヤーフレームを見て顧客の要望を把握し、違う発想でさら上をいくプランを出してくれるデザイナーまで、レベルはさまざまです。

たとえば渡すワイヤーフレームは静止画像ですが、コーディングの最適化やマウスオーバーアクションまで考慮した上で、優れたプランを考えてくれるWebデザイナーは一流だといえます。

渡したワイヤーフレーム通りにできあがるのは中レベルのWebデザイナー。社内スタッフならまだ新人で、これから教育していく必要があるというレベルです。

ワイヤーフレームもただ渡すだけでなく、より細かく指示を入れます。パーツ類の１つ１つにまで参考サイトを添付しながら伝えていくような、Webディレクターによる細かな指示出しが必要になります。

ちなみに中レベルのデザイナーで止まっていては、フリーランスのWebデザイナーはやっていけません。比較的安価にページデザインフィーを抑えたいといったときに依頼するのであれば、それでよいかもしれませんが。

上レベルのWebデザイナーは、日頃からWeb デザインを広く研究し、自分の中の引き出しを多く持っていて、そのなかからデザイン提案をしてくれるような人です。

そういうWebデザイナーとの打ち合わせでは、示すワイヤーフレームはシンプルなものにし、具体的なデザインの話よりも、お客様の思いやイメージを伝えることに力を入れます。このようにWebデザイナーの裁量によって、支払うデザインフィーも異なります。

デザイン料を下げてもトータルの見積額はあまり変わらない

以上のように、Webデザイナーにはある程度のレベル区分があり、指名するWebデザイナーのスキルによってデザインフィーは変化します。

しかし、中レベルのWebデザイナーにはその分、WebプロデューサーやWebディレクターの進行管理業務に大きなウェートがかかるため、トータルとしてみた場合のWeb制作コストはあまり変わりません。

お客様企業から時折、デザインフィーは安く抑えたいというご要望を受けることがありますが、デザイン部分の見積もりを安くしようとすれば、ワイヤーフレームの細かな指示づくりや進行管理のコストが高くなる傾向にあることをご理解いただければと思います。

［コラム］ WebプロデューサーとWebディレクターの違いとは？ Web制作を行う弊社の場合、Webディレクターとして制作実務の経験を積んだ後に、プロジェクト全体を統括するWebプロデューサーに昇格します。Webディレクターは制作業務を受注した後にプロジェクトを進行する人であり、一方Webプロデューサーは契約前からお客様企業と関わり、企画営業的な役割も併せ持ちます。

まとめ

ひとくちにワイヤーフレーム制作といっても、さまざまなことを考慮しなければならないということを理解していただけたでしょうか？サイト設計的な視点のみならず、お客様やデザイナーなどの視点にも立ってワイヤー作成に挑みましょう。