この記事は、Web制作の仕事に興味がある未経験の方に向けた「制作の進め方」の3本目です。前回、企画で目的とターゲットを決めました。今回はその次、設計の話です。読み終わる頃には、ワイヤーフレームが何を決めるための紙なのかを説明でき、自分でも1枚描けるようになります。

先に結論から。ワイヤーフレームとは、色も写真も入れずに「どこに、何を、どの順番で置くか」だけを決めた下書きです。デザインの下書きではありません。訪問者が読む順番を決めるための紙だと考えてください。

模様替えの前に、紙へ家具を描くのと同じです

部屋の模様替えを想像してください。ソファを実際に持ち上げて動かしてから「やっぱり窓側だった」となると、腰も時間も持っていかれます。ところが紙に部屋の形を描いて、長方形をソファに見立てて動かすなら、5分で10通り試せます。

ワイヤーフレームは、その紙です。実際に組み立てる前に、置き方を何度でも試せる。いちばん軽い状態で、いちばん多く迷っておくための道具です。

ワイヤーフレームは「グレーの箱」でできています

図の左が、実際に私たちが描くワイヤーフレームです。文字は入っていても、色はグレー1色。写真の場所には、四角にバツ印を書くだけ。ここから色と写真をのせていくと、右の完成形になります。

決めることと、決めないこと

ワイヤーフレームで決めること	ここでは決めないこと
ページに何を載せるか	色や配色
上から何番目に置くか	実際の写真
どのくらいの大きさで見せるか	書体や飾り
どこを押すと、次に何が起きるか	細かい言い回し

色をあえて入れないのには、はっきりした理由があります。色が入ると、人は色の話をしてしまうからです。「このボタン、青がきれいですね」と言われた瞬間、「そもそもこのボタンは必要か」「押す前に知りたいことが書けているか」という議論は消えてしまいます。グレーのままにしておくのは、中身の話だけを集中してするための工夫です。

直すのが早いほど、手間は小さくなります

図のとおり、同じ「1か所の変更」でも、気づく段階が遅いほど直す範囲が広がります。組み立てたあとで「この情報、順番が逆でした」となれば、デザインも文章も画像も一緒に動きます。私たちが紙の段階でしつこく確認をお願いするのは、ここで直すのがいちばん軽いからです。

CCの現場では、ワイヤーを紙に印刷して机に置きます

私たちがワイヤーフレームを依頼主にお見せするとき、画面ではなくA4に印刷して机に並べます。そして「上から指でなぞりながら読んでみてください」とお願いします。紙はスクロールできないぶん、順番の違和感がはっきり出るからです。

以前、ある企業サイトで、私たちは1画面目に「会社の想い」を置いた案を出しました。指でなぞってもらったところ、社長ご本人が途中で手を止めて「私がお客様なら、ここで自分の知りたいことがなくて閉じます」とおっしゃいました。そこで1画面目を「対応エリアと料金の目安」に差し替え、想いは2画面目へ移しました。この差し替えは、私たちのセンスではなく、指がどこで止まったかで決めています。

訪問者は、上から順にしか読みません

ここがワイヤーフレームの核心です。並び順は、作り手の見栄えの都合ではなく、訪問者が知りたい順で決めます。設計とは、その人が探しものにたどり着くまでの道順を、あらかじめ引いておく作業です。きれいに並べることが目的ではなく、迷わせないことが目的です。

ワイヤーフレームは、チーム全員の共通言語になります

もう1つ、この1枚には大きな役目があります。デザインを描く人、ページを組み立てる人、文章を書く人、そして依頼主。立場の違う全員が、同じ紙を指しながら話せるようになることです。

口約束だけで進めると、「もう少し目立たせてください」という一言が、人によって別のものに変わります。ある人は文字を大きくすると受け取り、ある人は色を変えると受け取る。ワイヤーフレームがあれば、その一言は「この四角を1段上へ」という、誰が読んでも同じ意味の指示になります。

未経験でも、今日から描けます

専用のソフトは必要ありません。A4の紙を横向きに置き、上から順に四角を並べて、それぞれに「見出し」「本文」「写真」「ボタン」と書き込むだけ。私たちの現場でも、最初の1枚は手描きで出てくることがよくあります。うまく描くことより、順番を決め切ることのほうが大事だからです。

今日からできる、たった1つのこと

まとめ

ワイヤーフレームは、色を入れずに「何を、どの順番で置くか」だけを決める紙です。決める基準は見た目の好みではなく、訪問者が知りたい順。そして紙の段階で迷っておくほど、あとの作り直しは軽くなります。私たちCCコミュニケーションズは、紙を机に広げて一緒に指でなぞってくれる仲間を探しています。