Webディレクターの最大の仕事とも言える、“構成案の作成”。
最近は各ディレクターによって使うツールも様々で、一番その人らしさが出る箇所にもなっています。
今回は、“私的おすすめワイヤーの引き方ポイント”を6点にまとめました。
デザイナーやクライアントによって作り込み度を変える
基本的に、ワイヤーフレームとは“構成案をクライアントと、アサインされたデザイナーに伝える”ことが一番の目的となります。
そのため、伝えるべき情報は優先順位が高い順に
・位置
・大きさ
・付随する機能
となります。
※機能が3番目なのは、構成案上では表しにくい箇所も多く、別途仕様書を作成する必要性があるためです。
これらをわかりやすく伝えることは勿論ですが、ディレクターはスムーズな進行のため、後に続くデザイナー、そしてクライアントがこの時点でどの情報を必要としているのかを判断し、案件によって構成の作り込みを変えていく必要があります。
例えば、サイトメインビューの構成を作る際、
ある程度Webの構成に明るいクライアントならばメインビューに長方形を配置し、“写真が入る予定です”と説明を入れます。
逆に、“メインビュー”と聞いてもなかなかイメージいただけない場合は、実際のサイズでダミーの写真を入れ込みます。
前者であれば作り込む工数を浮かせることができ、後者であれば後々の認識のズレを防ぐことができます。
ただし、後者の場合はあくまでイメージ写真のため、変更すると大きく雰囲気が変わることは必ず伝えましょう。
デザインをイメージしながら引く
色味や装飾はデザイナーに一任するのが一番ですが、ディレクターがあらかじめある程度イメージを決めておくと後の修正が少なくなります。
（構成案をFIXさせる期間で、ある程度サイトの完成イメージが出来上がるクライアントが多いためです）
少なくともベースフォント、ベースカラー数案、参考サイト等は揃えておきましょう。
また、TOPページ等初回のデザイン依頼時には、アサインされたデザイナーと直接会話しターゲットやコンセプト、目的等を共有します。
色は付けない
認識のズレを防止するためであっても、構成案に色を付けることはあまりオススメできません。
この時点で色を付けてしまうことによって、ディレクター自身、デザイナー、クライアントの全員がその色の持つイメージに引っ張られることになるからです。
（構成案上で色味を決めた結果、クライアントが構成をデザインだと思っていた、なんてこともよくあります）
色味をFIXさせるのはデザインフェーズに入ってからが最善です。
共通パーツを先に作成する
共通ヘッダー、フッター、CVセクション等、サイト内には必ず複数ページで使われるパーツが存在します。
必ずここから手を付けるようにしましょう。
急ぎの場合はここからデザインにまわすこともできるので、効率的に進めることができます。
ワイヤーに機能を書き込む
スライドになる箇所、ポップアップが出る箇所、各ボタンのリンク先等はあらかじめワイヤーフレームに書き込んでおきましょう。
実際の仕様は社内用に仕様書を作成するため、あくまで“何がおこるのか”がわかる程度で十分です。
コーディング後に“写真が切り替わると思っていたら一枚だった”“ポップアップだと思っていたらページ遷移だった”とならないために、構成の段階でクライアントと目線合わせをしましょう。
サイトマップを付ける
ワイヤーフレームは1つのファイルで一括管理し、その先頭にサイトマップを置いておくと進捗を表示することもできるため、更にわかりやすくなります。
（ex:エクセルのシート管理やXD等）
サイトマップ上ではワイヤーのFIXしたページにマークを付ける等、どの程度形になっているのかを一目でわかるようにしましょう。
まとめ
・デザイナーやクライアントによって作り込み度を変える
・デザインをイメージしながら引く
・色は付けない
・共通パーツを先に作成する
・ワイヤーに機能を書き込む
・サイトマップを付ける
使用ツールは何でもかまいません。必要な情報を漏れなく入れ、不必要な情報は入れすぎないワイヤーフレームがベストです。
