webディレクターのワイヤーフレーム作成とは

webディレクターの作るワイヤーフレームにはどんなことが求められているのか、3週間の実務の中でなんとなく分かってきたので、現時点での考えや注意点をまとめておこうと思います。

デザインしない

自分の前職がデザイナーだったこともあり、ディレクターになって初めてのワイヤーフレーム作成では、デザインを意識しすぎてしまい、極端に作業時間がかかっていました。

自分の次にデザイナーさんが作業するんだと思うと、少しでもワイヤーの意図を汲んでもらおうとしてしまい、文字の大きさを1pt単位で気にしたり配置する画像の切り取り方を1px単位で気にしたりしていました。

会社の方針や案件の規模によってワイヤーの精度は様々だと思いますが、個人的には、仕様書を図に落とし込んでデザイナーに説明するという考え方で作成するのがやりやすいと思いました。

フォントサイズに規定があり、1pxの違いが重要になるのであればそういった細かい部分も気にしてあげる必要があるかもしれませんが、大抵の場合はそこまで細かく考える必要はなく、ぱっと見の見た目でこのくらいかな程度で良いんだなと気付きました。

ここ強調したいんだろうな、ここは統一したいんだな、余白はこのくらい取りたいんだなみたいな、ざっくりとした意図がデザイナーに伝わるワイヤーになっていれば良さそうです。

デザイナーやコーダーに意見を聞く

これは私がまだ作業に慣れていないからかもしれませんが、ワイヤーフレームがある程度出来上がった段階でデザイナーやコーダーに軽くフィードバックをもらうとスムーズに作業できる感じがしました。

案件がアサインされた段階で、先方からの資料を確認してくれているデザイナーが多く、ざっくりとしたデザインイメージが頭の中にできてる場合もあるので、ワイヤーがある程度できたら自分から「ワイヤーこんな感じで作ってみたんですけどどうでしょうか？」と声を掛けると「ここはこのサイトを参考に作ろうと思ってる」などの雑談が生まれるので、お互いの意識が自ずと整頓されていく気がしました。

自分のワイヤーで何か納得が行ってない時も、デザイナーに第三者目線で見てもらうことで新しいアイデアをもらえたりしました。

また、レイアウト以外の部分ではコーダーに先に確認しておくことも重要に思いました。
ワイヤーの段階でアニメーションイメージをなんとなく考えている場合は、そのアニメーションが本当に実装可能なのか？実装できない場合、他にどんな手段があるのか？などあらゆる方法を事前にすり合わせておくと、デザイナーやコーダーの実装時に揉めることがなくスムーズに作業できると思うので、ワイヤー時点で自分の考えは色んな人に話しておいた方が良いのかなと思いました。