<シリーズ04>第6回 ワイヤーフレームの書き方

Webコンサルティングについて聞いてみた
ショーンくん。珍しくノートに鉛筆、消しゴムで何をやっているの??(ちらっとのぞく)
レイチェル
あっ、レイチェル先輩。実はワイヤーフレームを書いてまして・・・。うーん。うーん。こんな感じで一旦お願いしようかな
ショーン
ショーンくん・・・これじゃデザイナーさん、わからないよ・・・。
レイチェル
あ・・・お客様との間でまだコンテンツちゃんと固まっておらず、あとはもしかするとサイトマップも変更になる可能性が・・・でも実は時間もあまりなくて・・・。 デザインを先にいい感じに作ってもらいつつ、同時進行で内容は詰めていこうと思っているのでなんとなくざっくり・・・
ショーン
それ、危険なパターンだよ・・・
レイチェル
えっ、
ショーン
あ、どうもキャサリンです。
ところでショーンくんがデザイナーだったら、これもらって、作れますか??
キャサリン
・・・・・・できると思うんですけど・・・
ショーン

でもよく考えてみてくださいね。これをもらったらデザイナーさんはこんなことを考えながら作ります。

例えばメニューの文字数。最少がいくつで最大がいくつということがわからないと、デザイナーさんはこのナビゲーションをどんな幅で作ったら最適なのか判断が付かないんですよ。
ここのボックスのタイトル文字もそう。これが決まってないと、余白を何px取れば適当とか、デザイナーさんは決めきれなくなってしまうんです。その下の画像の縦横比なんかも気になりますね。

キャサリン
でも幅とかサイズなんて数値入れたら自動で全部すぐ変わるんじゃないんですか??
ショーン
ショーン君、実はね、デザイナーさんはオブジェクトひとつひとつを、計算機片手に図形で「描いて」いるんだよ。時にはちょっとした配置も画面を1000倍なんかに拡大しながら、まるでひと針ひと針縫い刺しするように丁寧に作っている。

例えば、ヘッダロゴの縦幅がちょっと大きいものを使うことになって、差し替えの指示を出したとするよね。そんな時画面上でロゴを差し替えると、自動で全体が下に下がるわけじゃないんだ。全体の画面のサイズをその分手動で縦に伸ばして、1pxが見えるまでに画面を拡大してそれぞれの余白のピクセル数を目で確認して、手動で他のオブジェクトを選んでピクセル単位で下に動かして、さらに他の箇所とのバランスを考えてまた何かを再配置したりして・・とやっている。
レイチェル
えっ。知らなかった・・。ピクセル単位で手作業してるなんて・・・結構大変なんですね・・・
ショーン
そう、ツールはPCとマウスだけど、手で描いていくんだよ。本当に絵を描いている。

例えばこのサイトの基本の文字サイズを16pxと決めたとするよね?で、ショーン君は、ナビゲーションには18pxを使いたいと思っている。でも、サイズが正確ではない描画アプリケーションや勝手に適当なサイズに文字サイズを変えてくれたりするプレゼン用アプリケーションを使ったり、紙に書いていると、実際それがどんな幅とかレイアウトになっていくか、正確にはわからないよね。だから実際出来ないことを書いてしまっていることもある。

でもデザイナーはすべてピクセル単位で正確に作る必要がある。指示を出しても、実際デザインを起こすとちょっと無理でした、とかよくある話。だからこそ、デザインの指示書であるワイヤーフレームを渡す段階で、多くのことが決まってないとまずいよね。
レイチェル
デザイナーさんは、今ある指示書(ワイヤーフレーム)で美しく使いやすいデザインを作ろうとします。
ダミー文字数でナビゲーションのデザインを起こし、実際は予定よりも入る文字数がとても長くて、さらにメニューもやっぱり1つ増えました、なんてことになったら・・・
キャサリン
ナビゲーションのデザイン作り直しだね。ロゴの右側に入れたかったけどそれは無理であることがわかった・・・とかね。他の箇所ともバランスを取ってデザインしていたら、 それに影響を受けて他の箇所のデザインも変える必要が出てくるかもね!
レイチェル
うわ・・・メニューひとつだけで手戻りだらけで大変になるんですね・・・
ショーン
で、さらに、同時進行なんかで進めていると、お客様から「このメニューやっぱり要らない」とか言われたりしてね!さらにさらに、 メインビジュアルには文字は入らない想定だったのに、「やっぱり入れたい」とかになってしまったりして。
レイチェル

(デザイナーになりきって) 「うわ~・・・文字入らないって言ってたから写真はこの位置でトリミングしたのに文字が入るなら写真の構図上文字に被って見えづらいからトリミングし直しだわ・・。でもそもそも文字入るなら他の写真の方がいい気がするんだけど、もう時間がないわよね・・どうしよう」
「さらにメニュー1個減るなんて、それなら変更前の最初のレイアウトでいけたのに、結局スカスカになっちゃった・・・」みたいなことに・・・・

キャサリン
わ~・・・
ショーン
さらに言えばね、次の工程のコーディング作業において、このデザインが大事な指示書になってくるんだよ。ここの文字が18pxでここが26pxでここの余白が20px・・と、ピクセル単位の数値や、ここの文字は画像でここはシステムフォントとか、コーダーはそういったあらゆる情報をデザインから拾って、htmlに起こすの。ここで躓いている場合じゃないよね。もしここでデザインの精度が落ちたら、htmlの精度も落ちてくるなんてことも・・・
レイチェル

工程がきちんと辿られず時間の余裕もなく、色んなフェーズで手戻りが発生すると、デザイナーさんやコーダーさんにとっては、「こんなはずではなかったのに・・・」というデザインになっていることが多いんだとか・・。

キャサリン
そして「こんなはずではない」デザインのサイトは、お客様にとってもユーザーにとっても大概「使いづらいサイトだなぁ・・」というネガティブな印象を与えてしまうよ。
レイチェル
こわい・・です・・・。・・・そう考えると、お客様とのワイヤーフレーム作成段階での摺合せって本当に大事ですね・・・あと・・・
ショーン
やはり目を養って、感覚を磨いて、ある程度のデザインの知識を持っていることも大事なんですね。よくわからないからとデザイナーに丸投げばかりしていたら…上がってきたデザインからしか良し悪しが判断できないようではだめですね。
ショーン

そういうことですね!私たちはただの伝達屋になってはいけないんです。やはりお客様とのコミュニケーションの中で、「ここはもっとこうした方が良いですよ」とか、「これは残念ながら無理そうです」、、「じゃあこうしましょう」といった具体的なことをデザイナーに卸す前に伝えられて吟味出来ると進行もスムーズになりますし、クオリティの高い成果物にもなり、お客様からの満足や信頼も得られますね!

キャサリン
だから私たちは、デザインレビューをお願いするときにも、取り返しの付かなくなる段階になる前に、設計的な不備や改善点をなるべく早期に見つけて その後ろ後ろの制作フェーズに影響を及ぼすことのないよう、厳しい目を持って双方で確認していくことを念頭にお願いをするんだよ。。お客様と一緒に作って行く気持ちを忘れずに。デザイナーはそれを可視化してくれる役割だよ。
レイチェル
制作に入ってからでは辻褄を合わせるのも大変ですもんね!なるほど、立ち居振る舞い方がわかってきました!
そしてやっぱりWEBSASに頼んで良かった、とお客様には笑顔になってほしいですしね!
ようし、デザインの勉強もちょっとしてみよう。デザイナーさんともいろいろお話してみたいな!
ショーン
ショーンくん、ちょうど来週、別の案件でのお客様とのデザインレビューがあるんだけど、行ってみる?
レイチェル
ぜひよろしくお願いします!
ショーン