無料ツールで効率化。ディレクターが制作前に準備すべきこと。

WEBディレクターの頭の中をうまく整理できないと「助けて」と土下座することになる風刺画
4月ももう中盤ですね。そろそろ新人WEBディレクターさんたちも案件をぽーんと投げられだす時期になってくるのではないでしょうか。

大きな制作会社ではディレクターはコードを書いたりしないようですが、小さい制作会社だとディレクターがほぼ全部、実作業含めて網羅する必要があったりもします。大規模案件であれば作業は複数人で分担するにしても、分担を決めるのはディレクターのお仕事。私も昨年、個人比大規模案件でテンパった半人前ですが、その時にまず準備したこと、しておけば良かったこと、役に立ったWEBサービスなどちょっとご紹介します。新人ディレクターさんやSOHOの方のお役に立てれば幸いです。

期限を決めるにも予算を決めるにも、まずはサイトの規模を把握しなくては何もできません。WEBサイトを作れる人ならば20ページくらいのサイトだったら瞬時にディレクトリ構成も決められると思いますが、それでは「頭の中」だけで資料化されません。これだと情報共有もできず、後々苦しむハメになります。

Step1:まずサイトマップを作る

とにかく手書きに限ります。複数人が関わる案件の場合はホワイトボードや方眼紙に付箋をペタペタ貼っていきます。これ、地味にいいですよ、ページの移動が楽です。ちなみに自分の人生に迷った時にも使えますが、実例は控えさせていただきます(笑)

Step2:ワイヤーフレームを作る

これもとにかく手書きです。ぐちゃぐちゃとアイデアを書き込んでいきます。ヘッダー・フッターが先に決まった場合は、作らなければいけないページ分コピーして、とにかく書き込んでいきます。

Step3:いよいよ資料化。カオスな手書きを清書します。

この時私が使うのはCacoo(無料/有料で機能追加)というWEBサービスです。
cacooの紹介
PowerPointに共有の機能がついてる、と思っていただければ分かりやすいかもしれません。多くのステンシルが用意されているので、ハイレベルサイトマップやワイヤーフレームを作る時には、とってもお役立ちです。作ったものは共有し、見せる事も共同編集する事も可能です。
 
cacooのエクスポートの紹介WEBデザインをする時、PhotshopやFireworksを使う方が多いと思うのですが、アクロスの場合はIllustrarorの場合が多いので、SVG形式でエクスポートして、ちょこちょこっと直してデザイナーにそのまま渡したりもします。自分でデザイン・コーディングまでする場合は、用意してるグリッドガイドに正確に配置し直して、コーディングの効率化を図っています。

ここから先はいよいよ楽しくありませんが、メインのお仕事です。 

これ、本当に大事です。私が大規模案件でテンパった最大の理由は、このフォーマットを先に用意していなかったことでした。いざ動き出してから作ると、脳内&精神が崩壊しかけるだけでなく、関わるすべての方にご迷惑をおかけする事になります。

その痛すぎる経験を元に現在私はGoogle APPSのスプレットシート(有料/無料のgoogleアカウントでもある程度は使えます)を使って、作業を始める前に素材管理表などを作っています。APPSならば共同同時編集も可能ですから、Excelで作るよりも便利です。管理表に1人でコツコツ情報をまとめて入力するっていう手間は、できる限り失くしたいですもんね。
appsの素材管理表の紹介

10ページ程度のサイトならば必要ないと思われがちですが、納品時の事を考えると作っておくのが無難です。急遽、納品資料の提出を求められた時など、制作作業を前倒しして作らなければいけないなんて事にもなりかねませんから。(こういう事態そのものを未然に防がなければならないのは当然ですが)

サイトの全体像がわかり、必要になる素材や作業工程が明確になったら、進行予定を決めます。気合いを入れてガントチャート(工程管理表)を作っていきましょう!
 
いつまでに、誰が、なにを作るか。
 
これを明確にしていないと、いつまでもダラダラと仕事をする事になってしまったり、余裕があるのに気持ちだけ焦って中途半端なものを作ってしまったり、作業が中断してしまったり。これらすべてWEBディレクターの責任になります。自分は悪くないのに・・・は通用しません。保身の為にも、ガッツリ作ります。
 
だって、小さい制作会社の場合、納品日ギリギリになって、間に合わないかも!ってなった時、徹夜して突っ込むことができるのは、WEBサイトのすべてを把握しているWEBディレクターのあなただけです。
もはや特権です!が、人に泣きついても「がんばって」としか言ってもらえない絶望感もセットで提供されます。

Excelで作ることもできますが、日々管理するには専用ツールの方が断然効率的です。私はGantter(無料)というWEBサービスを利用しています。
ガントチャートの例

APPSと連動させることもできますので、とっても便利。また直感的に操作できます。期間を0日にするとマイルストーンを作ることもできます。こんな便利ツールが無料でしかもネットがあればどこでも使えるなんて、本当に良いご時世です。

大きな制作会社では専用のツールやシステムができていたりしますが、無料でもこれだけの事ができちゃいます。

ツールを上手に使って、目指せ!残業0!!