2016年02月

9

火曜日の投稿

中川 隼人
投稿者:中川 隼人
(Webディレクター)

2016年02月09日

元コーダーのディレクターは考えた
パーツ集からみるスケジューリング

Webディレクター.docx

中川 隼人
投稿者:中川 隼人(Webディレクター)

こんにちは、ディレクターの中川です。

前回の記事「スプレッドシートを使った、ディレクターのための課題管理表」では、実際に記事を読んでいただいた方から、スプレッドシートの共有リクエストを頂いたり、「大変使いやすく、社内で使用しています。」とのお声も頂き、非常に嬉しく感じています。
この場を借りてお礼申し上げます。
ありがとうございます。

さて、前回も書かせて頂きましたが、以前はコーディングファクトリーでコーダーとして制作側におりましたが、現在はディレクターとして業務に携わっています。
コーダー時代は数百ページ・数千ページ以上の案件に悩んだり苦労したりしましたが、その時の経験が今のディレクター業務に行かされていることがあります。今回はそんな事例をひとつご紹介したいと思います。
全体のページ数が工数の全てではない
コーダー時代に案件の依頼があった時、まず心配だったのは全体のページ数でした。
少しでも規模の大きい案件があると「大丈夫かな…本当に終えられるだろうか。」と頭を悩ませていた記憶があります。
また、当時は制作メンバーも少なく、現在ほど各コーダーのスキルも高くなかったため、ページ数に対して短い納期に対しても心配になりました。

そんなある日、「全ページのパーツ集を作れば、各ページを少ない工数で量産できるので、スケジュールを圧縮できるのではないか」と先輩からアドバイスをもらい、その形で進めていった結果、短いスケジュールの中で、無事に納品することができました。

その時から、パーツ集を作成することの重要性に気づき、自分がディレクションを行う案件では出来る限りパーツ集を作る工程を組み込むようにすることで、短いスケジュールの案件に対応出来るようにしたり、逆にそれほどスケジュールが短くない案件に対しても、余裕を持った工数が確保できるようにしています。

ここからは、そもそもパーツ集とはどんなもので、どのようにして作ればいいのかをご紹介したいと思います。

ページ毎の難易度(工数)に対してランク分けを行う

まず、パーツ集を作成するためには、全体のページ数とページ毎の「コーディングのランク(難易度=工数)」を洗い出すことが必要です。
全ページのコーディングのランクを洗い出すことにより、案件のスケジュールを作成したり、コーディングの工数を算出する上でも非常に重要になります。

例えば、デザインリニューアルのプロジェクトの場合でも、以下のようなランク分けをすることで、サイト本来のボリュームが見えてきます。

Aランク:完全なデザインデータからの制作が必要で、ボリュームや構成も複雑なページ。
Bランク:完全、もしくは一部のデザインデータから制作し、Aランクよりは工数がかからないページ。
Cランク:上記A・Bランクを元に、テキストの流しこみや画像の差し替えなどの、量産が可能なページ。

ある程度経験を積んだコーダーであれば、
Aランクページは1日に2〜3ページ程度しか制作が進まない可能性が高いですが、
Bランクページは1日に5〜10ページ程度、
Cランクページであれば1日に15〜20ページ以上の制作が可能になります。

Aランクのページが多いプロジェクトであれば、スケジュールを長めに確保したり、アサインするコーダーの人数を多めに調整する必要がありますが、B・Cランクのページが多いプロジェクトであれば、Aランクページさえ作ってしまえば、短期間での量産が可能です。

そのため、出来る限りB・Cランクのページをを増やすことが
重要になってくるのですが、そのためにはパーツ集を作成することが必要になってきます。

では、どのようにパーツ集を作成すればいいのか、ご紹介したいと思います。
パーツ集を使用したサイト設計を行う

パーツ集とは、サイト全体で使用するパーツ(モジュール)を洗い出して、1ページにまとめたものです。

例えば、以下のようなものをパーツ化することが可能です。

  • 各見出し
  • テキスト、画像レイアウト
  • リスト組み、表組み、テキストリンク、ボタンリンク
  • 2〜4カラムレイアウト
  • その他サイト固有のパーツ化できるレイアウト

20160209_01.jpg
パーツ例

洗い出し方としては、現行サイトの全てのページを確認したり新規ページのワイヤーフレームから洗い出しを行い、これらをデザイナーと相談して、予めパーツ集として作成することが可能です。

洗いだしたパーツ集は、パーツ集のみで使用する命名規則(parts_xxxx、module_xxxxx)をつけて他の要素と差別化を行い、他のコーダーや最終的にソースを編集するクライアントなどがパーツであることがひと目で分かるようにすることで、後々の制作スピードや運用・保守のしやすさにもつながります。

また、このパーツ集とDreamweaverのテンプレート機能を併用し、カテゴリ毎や共通ページ用のテンプレートを作成しておくことで、より量産スピードを上げたり、ヒューマンエラーを減らすことも可能になります。

量産ページを増やし、スケジュールを圧縮する

20160209_03.jpg

パーツ集を作成できると、B・Cランクページの割合を増やすことが可能になるので、スケジュールから、コーディングの工数を圧縮できるようになります。

もちろん、スケジュールの圧縮だけが目的ではなく、元となるテンプレートやパーツ集があるということで、コーダーもより制作に集中することで安心して制作が行えるようになり、結果として制作がスムーズに進みます。

このように、100ページのプロジェクトをただ100ページ制作するものとして捉えず、予めランク分けとパーツ集の設計を行うことによって、プロジェクト全体のボリュームを軽量化することが可能です。

「パーツ集を作成する」ということ自体は、Web制作の中ではよく行われることですが、ディレクターがスケジュールの段階でパーツ集のざっくり洗い出しを行い、ある程度の工数を算出できるようになると、より案件がスムーズに進むようになります。

そのため、わたしがディレクションを行う際には、パーツ集の制作を組み込んだスケジュールを立ててある程度の余裕を持たせることで、クライアントも制作者も安心できるスケジュール作成・管理が出来るように心がけています。

この投稿を書いた人

中川 隼人

中川 隼人(なかがわ はやと)Webディレクター

クリエイティブ部ディレクションチームのディレクターです。主にBtoB案件のディレクションをしていて、以前はコーディングファクトリーで制作を担当していました。 映画・音楽・ゲームが好き。とあるゲームで日本一でした!

中川 隼人が書いた他の記事を見る