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

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

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

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

▼目次

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

はじめに

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

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

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

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

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

ディレクターの声

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

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

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

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

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

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

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

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

デザイナーの声

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

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

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

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

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

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

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

まとめ

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

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

それではまた！ おっす！