Main menu

Column コラム

明日から使える!プロのワイヤーフレームテクニック

Risa Yanagita

クリエイティブディレクター
柳田 綾沙

長い残暑も終わり、急に秋めいてきた2012年9月25日、ロフトワークにて「Web担が知っておきたいプロトタイプ活用講座」を開催しました。

今回の講座は、ロフトワークの全シニアディレクター3名とloftwork.jpのWebマスターがアドバイザーを務めるという、実はロフトワークにとってもユニークな試み。プログラムの終盤では、そんなメンバーが、プロの視点で ”ワイヤーフレーム制作におけるポイント” についてそれぞれの熱い思いを語りました。

普段からWebサイトのワイヤーフレームをつくる機会が多い私、ディレクター柳田が「明日から使えるシニアテクニック」を徹底レポート!男同士の静かな戦いにも注目です。

ワイヤーフレームは、なぜ必要か?

「これまでにワイヤーフレームを制作したことがありますか?」の問いに手を挙げたのは会場の2割程度。企業のWebマスターでもワイヤーフレームを制作する機会は少なく、作るのって難しそう…と思われていた方も多いようです。そもそも、なぜワイヤーフレームが必要なのでしょうか。

左からロフトワークシニアディレクター 寺井翔茉/西本泰司/川上直記/Webマスター 山口謙之介

西本:「ワイヤーフレーム無しでWebを作るとどうなるか?Webを作る時間もかかるし、作ってみたもののそんなはずではなかったなどということが起こります。期間も予算も限られた中で作り直すことも難しいですよね。この状況を防ぐために、あらかじめ方向性を確認する。だからワイヤーフレームが必要なんです。」

ワイヤーフレームを作らずにプロジェクトを進めてしまうと、具体的な成果物として可視化されるタイミングはデザインの初稿です。もしそこで大幅な修正が入った場合、どこまで戻ればいいのか…、考えただけで胃が痛くなる話です。

寺井:「大切なのは、頭の中を可視化すること。自分が考える方向性を可視化すれば、客観的にレビューできる。そして、その上でステークホルダーに伝えることもできますよね。”見なきゃわからないよ!”という上司にも対応できるわけで。(笑)」

ワイヤーフレームという形で可視化すれば、個人でレビューしブラッシュアップしたり、メンバーとディスカッションもできる。そして、ワイヤーフレームの段階でユーザー視点からテストしておけば、漏れや整合性もチェックでき出戻りも減りそうです。ワイヤーフレームって、改めて重要なプロセスですね。

ワイヤーフレームは、誰と作る?

次に話に挙がったのは、この重要なワイヤーフレーム制作の体制です。

当日の講座の様子

寺井:「ひとりで黙々と書いてみる。組み替えたり消したり足したり一通りやってみる。こうやって具体化してから人の意見聞くのがオススメです。そうではないと、なんとなくMIXした幕の内弁当みたいな状態になってしまうんですよね。」

あぁ、あるある。。。大きな声では言えませんが、経験のある方も多いのではないでしょうか。 そんな中、笑顔で反論したのが西本です。

西本:「寺井とは、ちょっと別の視点から。ワイヤーフレームを作る上で大事なことはひとりでは作らないこと。(笑)サイトのゴールが明確になっていれば、プロトタイプを複数人で作れるので、ひとりで作るよりもグッといいものができる。実際、今日のワークショップがそうでしたね。」

確かに今回のワークショップでは、一つのストーリーを元に、チームで意見を出しあってワイヤーフレームを制作しました。自分だけでは思いつかない驚きのアイデアが出たり、活発な意見が飛び交っていたように思います。

うーん、どっちの意見も分かる!わーん、どうしたらいいの!! そんな中、穏やかに川上・山口がまとめます。

川上:「人数はケースバイケースですね。何よりもこのワイヤーフレームを作るゴールを明確にした上でみんなの意見から集合知が取れると良いでしょう。」

山口:「1時間ひとりで考えてみる。そこで、つまってしまったら、みんなで考えるといいのではないでしょうか。」

なるほど、ひとりで作る・チームで作るも目的や状況でアレンジすべきなんですね。確かに一人でずっと唸っていてもいいものは生まれません。私も詰まったら、まずは身近なディレクターに相談しています。サイトのゴールを明確に共有し、他のメンバーとディスカッションすると別の視点から気付きを得られますし、さらに素敵なアイデアが生まれたりするんですよね。

バランス良く集めるはNG!? メンバー選定のポイント

では、いざ!メンバーを集めてワイヤーフレームを作る場合、各部署からバランスよく集めたくなりますが、それではダメなのでしょうか?

西本:「各部署からバランスよくメンバーを集めるのは、実はNGなんです。それぞれの利害関係でサイト内での面積取り争いになりがちです。全体を同じバランスで見ることができ、且つユーザーの立場に一番近いメンバーに意見を聞くのが経験上良いと思っています。もちろん、○○を強化したいという方向性が明確であれば、それに関わるメンバーを集めればいいんです。」

川上:「チームでディスカッションするコツもありますよ。やはり、最終的な決定者がいたほうがスムーズです。コンセプトやゴールにあわせでは最終的にこうしようと決める人がいればコンフリクトも調整できます。」

全体俯瞰できる人・ユーザーに近い人・プロジェクトマネージャーなど決定できる人がいるとチームでのワイヤーフレーム制作が上手く進みそうです。たしかに、ロフトワークがお客様と一緒にワイヤー制作する場合も目的に応じてメンバーを集めています。プロジェクトのコアとなるワイヤーフレーム制作時に、戦略的にメンバーを集め集合知を生み出すチームを作るのも重要なTipsだと思いました。

クライアント<発注側> × ロフトワーク<制作側> の理想的な関係

最後に、実際の案件では、発注側と制作側はどのような役割分担で設計を進めていけばいいのでしょうか?

発注側の企業は、戦略とWebのゴールを明確に、制作側に伝えれば十分といいます。もし、可能なら大きなブロックレベルでいいので、”必要な要素”と”プライオリティ”を教えてもらえれば意図を汲みやすくブレも少なくなるようです。プロジェクトで実現したいことは何か、限られた制作期間やコストの中で何が一番優先なのか、発注者は目指すべきゴールを伝える。その想いを制作側がしっかりと受け止め、コミュニケーションを取りながら具現化していく。これがWebサイト制作における両者の関わり方のようです。

両社の間で具現化する手段の一つに「プロトタイプ」があり、ゴールまでのより詳細な地図が描ける。たまには寄り道しながら、たまには全力疾走で、二人三脚サイトオープンまで歩んでいけるのではないかとこのパネルディスカッションを通し改めて学びました。

執筆者

Risa Yanagita

クリエイティブディレクター柳田 綾沙

コメント

blog comments powered by Disqus