ディレクター・デザイナーのWF（ワイヤーフレーム）の書き方の違い！

こんにちは！ デザイナーのタリーです。
入社して半年が過ぎようとしています。

最近ではプロジェクトの初期段階から案件にアサインされ、デザイン前の工程、WF(ワイヤーフレーム)を自身で作成することも多くなってきました。

今回はディレクターとデザイナーとでWFを引く際に気をつけていることをまとめてみました。今後案件でWFを引くときのチームメンバーの意見合わせの参考にしてもらえれば幸いです。

それでいってみましょう！ おすっ！

はじめに

WF(ワイヤーフレーム)とは

Webサイトを作る上で必要になってくる情報の設計図のことです。ページの中にどんな要素を盛り込むのか、画像や文字量はどのくらいかといった点を、クライアントやチームメンバーと認識合わせするために必要となってきます。

プロジェクトによってはディレクターが引くことが多いと言われるWF。案件によりけりですが、プロジェクトの初期段階から携わる案件だと、デザイナーがWFを引くことがあります。

WF(ワイヤーフレーム)制作においてディレクター・デザイナーが大事にしていること

今回はLIGのディレクター・デザイナーにヒアリングし、WFを引くときに普段どんなことを意識しているのか？ 聞いてみました。

ディレクターの声

・ 機能、要素は抜け漏れなく書く
画面全体のイメージとは別に、細かい仕様や機能などを記載します。WFの右に説明欄を設けたり、別紙を用意することで、WFを引いたサイトの機能がわかるようにします。

・色をつけない
お客さんへの提案の際、お客さんがデザインも「この見た目のまま進む」という誤解を招かないようにするためです。
また、デザイナーがデザイン着手の段階になった際に、その色に引っ張られるのを防ぎます。特に要望がない場合は、基本的に白黒グレーで構成します。

・イメージ画像があれば白黒で貼っておく
コンセプトに合うイメージ画像(白黒)をあらかじめ入れることにより、WFの段階でも画像が入った上での見え方を再現します。

・機能ごとの動きを考え、詳細にパーツ部分を作成する
ボタンを触れた時に出る要素や、昨日ごとの一つ一つの詳細パーツをあらかじめ作成しておくようにします。

・タグを使いたい部分を、あらかじめ記載しておく ※記事ページ限定
記事詳細ページでは、<h1>~<h5>タグなど必要なところを記載しておくことで、デザイン段階でも齟齬が生まれないようにします。

・枠線やタイトル頭につける装飾は極力シンプルにする
装飾や細かなあしらいなどは、 WFの段階でこだわりすぎると混乱を招きます。デザイン段階に入った時、「装飾を反映しなくてはいけないのか」などの誤解を防ぐため、極力シンプルな構成にします。

・ファーストビューのイメージを固める
デザイン段階でファーストビューで必要な要素を擦り合わせておくことで、機能の漏れがないようにします。

・文字をコピペできるようにする
デザイン段階のことを想定したWFを制作をすることも重要です。デザイン段階に落とし込んだ時、文字情報を簡単に抽出しやすいよう、よくadobeXDなどといったWF作成ツールを使用しています。

デザイナーの声

・ デザイナーじゃない人が見てもわかるようにする
デザインに起こしたときにどうなるのか、言葉の説明も必要ですが、画面を見たときにイメージがわかるWFを作成することが大切です。

・ テキストはなるべくWF時点で確定させる
お客さんから確実に情報がもらえるように、スケジュール調整が大事です。早い段階で文字情報をFIXさせると、デザインの後々の変動も微調整で済みます。

・ 目的を明確にして、そのための流れがちゃんと意図通りになっている
か確認する
サイトの目標とゴールをしっかりと定めた上で情報の配置をしなくては、ターゲットに刺さるサイト作りにはなりません。

・ スマートフォン（SP）での見え方を考えた作りをする
昨今のWebサイトにはレスポンシブデザインが増えています。
PC、SPデザインの関係を考えてWFを引かないと、SPデザイン着手時にデザインがうまくはまらず、自分の首を締めることになります。

・ ダミー文は具体的な内容を考えて入れる
サイトのコンセプトに沿った内容のダミー文を入れておくことで、社内ミーティングでの共有や文章を考えるお客さんがイメージしやすくなります。
文章がなかなか決まらない時は、こちらから文章を提案するのも一つの手かもしれません。ダミー文章を考えたものがそのまま使用されることもあります。

・ デザインを作り込み過ぎない
どんな情報が入り、どんな画面配置になるのか確認するために必要なものなので、変にデザインを凝らないように作成します。

・ 情報設計なので、どこにどの要素が入るのかがしっかりとわかるようにする
デザイナーが気をつけていることとして、「作り込み過ぎない」という言葉をよく耳にしました。普段サイトデザインをしていると、どうしても作り込みたくなります。デザイン前の情報設計ですので、いかに情報をわかりやすくシンプルにまとめるかがポイントになってくると感じました。

まとめ

いかがでしたでしょうか？
今回は社内で聞きましたが、ほかにも意見がありましたらぜひお聞きしたいです。

僕はWFを引く際はadobeXDを使用しています。
作業をするのに軽く、共有がしやすいからです。
また、プロトタイプで導線確認できるし、フォローバックもXD上でコメントできるので大変便利です。修正反映なども素早く行えます。
今回の記事で取りまとめた意見を参考に、デザイナー・ディレクターを含めたチームメンバーと早い段階で情報を共有してWFを引くことで、いいもの作りをしてもらえたら幸いです。

それではまた！ おっす！

キャリアアップ
「Studio上野でWebクリエイターを目指す！」

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。