茶鏡のブログ

駆け出しのWebデザイナーが文句ばっかりぐちぐちぐちぐち言う日記です。

Webサイトが立ち上がるワイヤーフレームと、コミュニケーションと。

地ら……コホン、大型案件でしんどい日々はまだまだ続いております。
それはそうとぼっちじゃなくなりました!やった!Gitのリモートリポジトリでコラボレーションなど、独りでできない試みも取り入れつつ、たくさん力になっていただいております!ありがたや!

例の大型案件ですが、当初わたしは、時間短縮のためにワイヤーフレーム(以下WF)を作って、カンプをつくらず、いきなりコーディングしてしまおうという作戦をとっていました。しかし、これ結局のところ失敗。最終的に一部のコーディングを外部の方にお願いすることになったので、慌ててカンプを作るという事態に陥ってしまいました。

いきなりコーディングは、デザインスタイルガイドがきっちりと設計されていてはじめて使えるのと、身にしみたことは、テキトーに書くWFでは、だれにも意図が伝わらないことです。

いや本人は真面目なんですけど、なんちゃってが書くWFなんてこんなもんすわ。諸事情でお見せできませんが。

この件で、すごくわくわくした動画があるのでご紹介します。

UI Stencils という、海外のWeb制作グッズショップの動画です。PC&モバイルスケッチパッドからテンプレートやピクセル定規(?!)といった、便利道具がそろってます。道具についてここでは言及しません。UI Stencilsさんのサイトを見て下さいね。

この動画を見てわくわくした点は、 手書きなのに、ウェブサイトがちゃんと立ち上がっていることです。

デザインががまだわからなくても、どこにどんな情報があり、どんなバランスで、配置される、どんなサイトであるか概略をイメージしてもらうことができ、口頭でだらだら説明を聞かせる必要もなければ、ディスカッションもできるかもしれません。この密度が、すべてのケースで必要かどうかはわかりませんが、ワイヤーフレームは、コミュニケーションのために使うものなのだと認識させられます。

ある前職のエピソードも思い出したので。
サイト制作の打ち合わせで同席頂いた、実装のブレーンの方がトークでサイトの骨格をイメージさせてくれたことです。実装に必要なことを、なんとなく作られたカンプに当てはめつつ足しつつと、モノ見んとわからんなぁ…とか言いがちな打ち合わせのテーブルの上で、サイトが組み上がってくる体験はしびれたものでした。

Web制作はもしかしなくても実装ありきになっていて、まずは単位から多くの情報を共有するには、どうすればよいか?は悩ましいですが、コミュニケーションで相手に作るものをイメージさせることが大事と痛感。

当たり前のことですが、あとあとで、デザインだけでもこれだけのことを考えなアカンのや!ということになっちゃうものなのです。

ですので、これからは、打ち合わせのテーブルの上でサイトを立ち上げる!

と気持ちでやっていきたいっす。押忍。

さすがにコミュ障のわたしにトークだけでそれをするのは無理ですが。だからあの密度のWFがきっといるし書けるようになるぞーという…。

ここで、もう今までどおり最初っからカンプ作ればええやん!とお思いの方もいらっしゃるでしょう。インブラウザデザインはちょっと憧れますがカンプを作るワークフローはアカンとは思いません。が1つ思うところが。