WFからデザインに起こすまでのお話~part2~

以前同じような記事を投稿したのですが、

実際どんな思考でデザインに落としているのかかけていなかったので、

WFからデザインに起こすまでのお話~part2~！

以前の記事はこちら↓

実際の案件に関わって、

以前よりもワイヤーフレームからデザインを完成させるまで、どのような思考で進めていくのか。

なんとなくその感覚を掴んできたので、まとめていきます！

ワイヤーフレームとは

まず、ディレクターが作成してくれるワイヤーフレームはどんな役目があるのか。

ワイヤーフレームとは、一言で言うと「サイトの設計図」、

どこにどんな要素、機能が入るのかを示してくれるものです。

また実案件ではお客様と制作側の認識を視覚的に合わせるものとしても使われています。

デザインしてからお客様に見せて、「必要としている要素が入ってない！」

なんてことが起こらないようにワイヤーフレームを作成した時点で、

お客様にしっかりと確認していただきます。

実際にワイヤーに起こしてみると、これって本当に必要なのかな？

と客観視してみることもできるので、

ワイヤーはとても重要な役割を持っています。

ワイヤーフレームからデザインへ

まずワイヤーを紙に印刷してじっくりと眺めます。

紙に印刷するのは疑問に思って点などを素早く書き込めるから。

全体を眺めて疑問などがなければデザインを初めていきますが、

疑問がある場合はディレクターに確認します。

ここで疑問を持ったまま進めてしまうと、

ディレクターが思っていたアウトプットとデザイナーが作成するアウトプットが

異なるものになり、結局はお客様の求めているものと異なるものになってしまいます。

しっかりと認識を合わせて実際に手を動かしていきます。

まずは割付から。

ワイヤーの通りに要素を配置させていきます。

割付の段階でどんな感じにしようか考えながら進めていきます。

イメージが湧いていればそのままデザインを続ければいいのですが、

なかなかそういうわけにもいきません。

なので、必要な要素などがわかった上で参考になりそうなサイトなどを探していきます。

トップページなどの少し自由の効いたデザインをする際は、

サイトに限らす、グラフィックなども見たりしてイメージを固めていきます。

サイトであれば、複数のページに及んで一つのアウトプットとなるので

統一しないといけない箇所（カラー・フォント・フォントサイズなど）は統一していきます。

トンマナ（トーン＆マナー）をはじめに決めて進めると効率的に進めることができます。

そしてイメージがある程度固まった段階で作り込んでいくわけです。

ワイヤーフレームはあくまでも設計図なので、

それに引っ張られすぎないようにしなければいけません。

そこが私の苦手なところでもあります・・・（笑）

サイトのリニューアルなどの時は、今のサイトをよく見ます。

今のサイトよりよくなった！とお客様に思ってもらえなければ、意味がありません。

言い換えれば、今のサイトと大きな違いを作らないといけない。

サイト内の構成が大きく変わることもありますが、

ほとんどはビジュアル、デザインの変更をお客様は求めています。

先輩社員にデザイン説明の時に

「ワイヤーフレームがこうだったから」

「今のサイトでこうなっているから」

という説明だけはやめよう！と言われています。

デザイナーは見た目の部分にフルコミットです。

ディレクターはデザイナーの発想の幅を狭めないように、

あえてシンプルにワイヤーを描いてくれていたりもするそうです。

あくまで信頼ありきの話ですが・・！

という感じで時間の許される限り作り込んでいきます。

感想・まとめ

実案件で、ワイヤーを元にデザインをしていく機会が増え、

私がいいなあと思ったのは、デザインをしていく中で、構成などを変えたい！

となった時にきちんとした根拠があれば、ディレクターはそれを受け入れてくれるということ！

本当にいいサイトを作りたいと思っているからこそ、

いろんな視点から制作できるのがいいなあと思いました。

見た目の全責任をデザイナーがおっているということを

きちんと理解し、考え抜くということをこれからは意識してデザインしていきます！