Webディレクターの重要な仕事である「ワイヤーフレーム」作成。いざデザイナーに渡すと「よくわからない」と言われ頭を抱えた経験がある人も多いのではないでしょうか？ プロジェクトをスムーズに進めるためにも、上手なワイヤーフレームの作り方はぜひ覚えておきたいですよね。そこで今回は、ワイヤーフレームを作成する際に、Webディレクターが気をつけておきたいポイントについて解説していきます。
目次
■ワイヤーフレームの目的は「デザインではない」
ワイヤーフレームを作る時に誰しもが1度は陥ってしまうと思われるのが『デザインを考え始めてしまい、ワイヤーフレーム作成が進まない』ということ。
ワイヤーフレームを作る目的として、サイト制作に必要な情報を整理し、Webページ上での必要な構成要素、コンテンツの優先順位やナビゲーションの有無などを決めることにあります。
サイトに含めることができる情報は膨大にあり無限大です。その情報をサイトの目的に合わせて取捨選択し優先順位をつけ、グルーピングしてラベルをつけるところまで整理したものをワイヤーフレームで表現しなければなりません。
さらに、どのような機能をつけるのか、どのようなボタンを設置するのかといったことも表現する必要があります。
つまり、『ワイヤーフレーム』とは、デザインを決めることではなく「どうすればユーザーがわかりやすく求める情報にたどり着けるか。サイトの制作目的を果たせるのか」を考えることにあるのです。
■ワイヤーフレームを作るときのポイント
1.「アナログ」で大ラフやアイデアを出してみる
多くの人は「PowerPoint」や「オンラインツール」などデジタルツールを使い、ワイヤーフレームを作成するかと思います。しかし、きれいなデータにするのは一番最後の作業で大丈夫。
まずは、紙とペンと言ったようなアナログ仕様で、アイデアを自由に書き出してみましょう。思いつくまま、考えたことなどをすぐにアウトプットでき、手を動かすことでさらにアイデアが広がる可能性も高くなります。
作り慣れていない人は「どのテンプレートを使おう」、「どの図形を使おう」と「きれいに整えること」に意識が集中してしまいがち。
ワイヤーフレームの本質はきれいに仕上げることではなく、サイトの『情報設計』をすることです。まずはしっかりとアイデア出しをし、情報も整理しましょう。
2.重要なページはもれなく作成する
TOPページだけではなく、その他の重要なページや特殊なページについてもワイヤーフレームを作成する必要があります。
一例として、次のようなページはワイヤーフレームを作成しておかなければいけないページになります。
・他のページと比べてコンテンツ内容が「大きく異なる」ページ
・そのサイト特有の「レイアウト」で作られるページ
・サイトにおいて重要な意味をもつページ（例：申込みページなど）
すべてのページのワイヤーフレームを作成する余裕がないときでも、重要なページや特殊なページに関してはもれなくワイヤーフレームを作成しましょう。
3.色や凝ったデザインを入れない
ワイヤーフレームに色や凝ったデザインを入れ込んでしまうのは、よく起こりがちな事例です。デザインまで作り込むとクライアントやデザイナーにイメージの先入観を与えてしまうだけではなく、『サイトの設計図』という本来の目的から逸脱してしまいます。
Web知識に乏しいクライアントには、「デザイン案」のように捉えられてしまいますし、デザイナーにおいてもワイヤーフレームのデザインに引っ張られたデザインをしがちになってしまいます。余計なイメージを与えないようにするべく、モノクロのごくシンプルなデザインで作成するのがオススメです。
4.どのような根拠で作成したのか明確にする
ワイヤーフレームはサイトの必要な情報を視覚的に表現するものであると同時に、クライアントやデザイナーに情報をどのように見せれば、サイトの目的を果たすことができるかを伝えるものでもあります。ですから、なぜこの構成にしたのかを明確に説明し、理解してもらう必要があります。
例えば、
Aと言う情報をBより上に置いている場合、なぜ、上に置いているかを説明する必要があります。仮に「優先順位が高い」と言う理由であれば、なぜ優先順位が高いのかと言う判断根拠までを深堀りして説明できるようにしておかなければならないのです。
他にも機能やボタンについても、なぜ必要なのか、なぜこの位置にしたのかまでも明確に説明できる必要があります。従って、ワイヤーフレームに入れたすべての要素について、どのような根拠でその構成にしたのかをきちんと説明できて、理解をしてもらうところまでがワイヤーフレームの目的と言えるでしょう。
5.スマホ用のワイヤーフレームは別に作る
スマホ用のページはPC用に比べて横幅が狭いので、レイアウトを変更する必要があります。できれば、スマホ用のワイヤーフレームは別に作成するのが望ましいでしょう。ただし、すべてのページを作る余裕がない時などは、重要ページや特殊ページに関してだけでもワイヤーフレームを作成すると良いかと思います。
6.テキストや画像を入れるところにはダミーを入れておく
テキストが入るところには、最大文字数と最小文字数を想定し、「ダミーテキスト」を入れておきます。実際にどれくらいテキストが入るのかをある程度考慮しておかないと、デザイン崩れが起きてしまう可能性もあります。
画像の場所にもダミーの画像を入れておきましょう。
7.他のサイトも参考にする
必要なコンテンツやレイアウトに悩む時は、やはり、他の競合サイトをチェックするのがとても効果的で効率的と言えます。たくさんのサイトをカテゴリー別に集めているサイトもあるので、それらを参考にうまく活用して効率的な比較や作業を進めましょう。
また、ワイヤーフレームが公開されているサイトがあり、実際のサイトを見ながら、どのように表現すればいいかの参考にもなります。
▼参考サイト
MUUUUU.ORG（ムーオルグ）
Wireframe Showcase（ワイヤーフレーム ショーケース）
■まとめ
ワイヤーフレームを作成する目的は、「サイトの制作目的に合わせて情報や機能を整理して設計すること」です。デザインはあくまでもデザイナーの仕事であり、ある程度のイメージのみ伝えて任せておけば大丈夫です。
ディレクターの役割は必要な情報を整理すること、そしてクライアントからの要望も含めて必要な情報をチームに伝えることです。誰もが見てわかりやすいWebサイトを作るために、自分自身がやらなければいけない仕事を正しく理解して、お互いの仕事を尊重することも非常に大事であり、それもディレクターの仕事の一つなのです。
