Web制作のテクニカルディレクション2017

1年ほどWeb制作のテクニカルディレクションを考えてきて、ひとつまとまって書けることがあるなと思って書いています。自分用のメモも兼ねてるので、ところどころおかしいところがあるかもですが、生温かい目で見守っていただければ幸いです。

テクニカルディレクションの風

ぼく自身は2015年の夏ごろから「テクニカルディレクター」という立ち回りでいくことにしました。それから社内では「テクニカルディレクター」と名のるようにしてます。その前はHTMLコーダーとしてナショナルクライアントの案件に3年ほど携わってきました。

当初考えていたテクニカルディレクターの対応範囲は「マークアップ+ディレクション」で、ちょっと上流工程が見えるといいなぐらいで考えてました。

ところが実際まわしてみると、社内の質問受付窓口になってるだけで、コーディングの時間も取れずに、ただひたすら仕様書を書いてる器用貧乏になっていました。

あれ、エンジニアなんだっけディレクターなんだっけと、よくわかんなくなってきます。

ほとんどの現場ではマークアップエンジニアないしそのリーダーが、テクニカルディレクション業務を兼任していると思います。フリーランスの方になると専門分野に特化していないと、全部やることになります。今回のお話は中小企業の制作部門で、デザイナー/コーダーと分業されていることを想定しています。

テクニカルディレクションの何が求められているのか、ポイントを抜き出してみました。

テクニカルディレクターって?

インターネットで探してみると、株式会社ロフトワークは、

ディレクターとクライアントと密にコミュニケーションをとりながら、CMSなどのシステム設計やオペレーションを考案、外部の開発パートナーへのディレクションを実施します。 技術視点でオープンコラボレーションの促進や、多様なプロジェクトのサポートを行います。
と書かれていて、株式会社ミツエーリンクスには、

Webディレクターとともに、Webサイトのコンセプトや全体の企画立案を行なったのち、システムやネットワーク、サーバーといったWebサイトのバックグラウンドに関する要件決定・進行を担います。 Webディレクターがヒアリングをするクライアントの悩みや要望に対し、その場で技術的な観点から「できる事とできない事」を判断し、優先順位をつけながら具体的な施策が提案できるかが、最も大きな腕の見せ所になります。
とあります。

CSS Nite「Coder’s High 2016」では西畑一馬さんが、

と定義されています。

ちなみに、Wikipediaは、

さまざまな現場における技術責任者に与えられる肩書。
みたいですが、英語版で引くと、

a Technical Director is typically responsible for the successful creation and delivery of the company’s product to the marketplace by managing technical risks and opportunities
と、もうちょい踏み込んでます。

ここのtechnical risksはわりかしイメージしやすいのですが、opportunitiesってたとえばどんなことでしょうか。

ざっくり斜めに読んでみると「技術的な視点で意見するだけの立ちまわりじゃなく、案件をディレクターといっしょに動かしていく裏方的な存在」とか「上流工程から入って技術的な仕様をつめていく」ようなポジションなのではないかと。

そこで、ぼくがテクニカルディレクションで意識していたことを、あげていきたいと思います。

テクニカルディレクションで求められるポイント

1) ディレクター/デザイナー/エンジニアを橋渡しをする

まずこれに尽きます。

理想は依頼者ー作業者が直にコミュニケーションできればよいですが、それができないからテクニカルディレクションが必要で、そのとっかかりをつくってあげるんです。餅は餅屋というように、ディレクターも技術面をエンジニアに任せられると安心しますし、逆もしかりだと思います。

ディレクターの技術確認コストをただ減らすだけでなく、エンジニアから代替案を提案できる、企画を調整して新しいことにチャレンジしあえる、そんな関係性が築けるといいですね。

また、デザイナーが実装しない場合、やってみたい表現を聞くと、案外イメージが固まっていたり、反対になにも決まっていないことがあります。そのときにどう実装していくかお互い引き出せるといいコラボレーションになると考えています。

2) 技術のつかいどころを常に見極める

最新技術を取り入れるだけがテクニカルディレクションではありません。

運用のことを考えて、あえて枯れた技術を取り入れることもあります。開発中に新たらしい技術が出ることもありますが、どこでどう取り入れるか、できればアンテナをはっておきたいものです。

なので、自分ルールをどんどん破っていきましょう。もっと楽できないか。おもしろい演出ができるんじゃないか。つかってみたらとっても便利。そういう発見が大事。(ちなみにぼくはgulp.jsの使いどころがなかなかつかめずにずっといました)

身近に先輩やその分野にくわしい人がいるなら、意見をもらっていろんなものを吸収していきましょう。

3) 想定の範囲を超えたトラブル対応と向き合える

計画どおりいくのはあたりまえ。常に計画から外れたシナオリを考えておきましょう。

納期が短くなった、取れていたはずの予算がなかった、人手が足りないといったように、たくさんの問題が出てきます。予算やスケジュールを企画段階から頭を突っ込むと、全体が見えたうえで実装フェーズを迎えることができます。

依頼漏れ、考慮不足などで見積もりを超えたことも考慮して、追加分の稼働を確保して伝えておくのもありかと思います。その分、前倒しできる分はうんと前倒しすることも忘れずにしたいですね。これも普段からのコミュニケーションが肝心。

4) 予定工数/実績工数を意識する

コーディングは基本的に単価×工数で見積もりを出します。どのくらいでできそうか、外注ならどのくらいの費用になりそうか、普段から数字を集めておく必要があります。

この部分をコーディングするのにどのくらいかかりそうか、かかったかを意識する、たったそれだけです。外注先が出してくる見積もりも、たぶんこのくらいでお願いできるかなと、予想がつけられるようにしておくとよいです。

もちろん納期を守ることはゼッタイです。とはいえたまに遅れて怒られます(笑)。

5) どこか頭のすみっこで「儲かる制作」を考える

自分がコーディングしたもの、いくらだと思いますか。それがいくらで売られてるか、ご存知でしょうか。営業部隊があるとディレクターが数字を握っていない場合もあります。

これをどうにかこうにかして数字を分解していくのがミソ。

知りたいのはいくらでつくって、いくらで売っているのか。そしてどのくらい儲けがでているのか。Web制作は予算少なめで進行することが多いため、かけるべきところにかけて集中するべきかなと、考えています。

たとえばフルスクラッチがやむをえないJavaScriptの仕掛け、アニメーション演出の実装コストは、初動の予算に含まれるよう社内調整という下準備が必要そうです。コーディングで赤字を出さないよう、常日頃から「儲かる制作」を意識していたいですね。

6) マネジメントの視点もあればなおよいかも

実はテクニカルディレクションと並走しているのがリーダー業務。要員計画、アウトソースでのパートナー連携、アサイン、事務処理、トラブル対応、社内調整、メンバーのフォローアップなどなどてんこ盛り。

ただこれらはテクニカルディレクションとは別物として、ぼくは考えています。作業者が自走し、案件が円滑に進めばマネジメントは必要ありません。とはいえ現場にいる身として、リーダー業務が機能することで一定のクオリティが得られる感覚もあるので、切っても切れない関係とも言えそうです。

ざっと眺めてきましたが、テクニカルディレクションを要する場合、案件の上流工程から下までなめてみて、効率良くピボットしていくのがいいのかもしれません。

さいごに

まだWeb制作のテクニカルディレクションと言っても、雲をつかむような話ですが、2年ほど前からぼくはニーズを感じています。

そのなんとなく感じてるニーズが2つ。

1) 技術的知見が足りずリスクや提案がつめられないから
技術が変わることで、つかえていた選択肢がいつのまにか減ったり増えたりします。なので、テクニカルディレクターは、その技術に追いつけていないクライアントやディレクターをガイドしてあげる立ち回りだと思ってます。

2) 運用フェーズを鑑みた技術設計ができていないから
Web制作に携わっているなら運用のことを考え抜く。つくっておわりはプロモーション、Webは継続してつかっていくメディア。短期的なスパンで効果を出すWebもありますが、ほとんどのWeb制作は運用がセット。この運用を鑑みて技術的に提案できるのもテクニカルディレクションのひとつだと考えています。

そしてなによりも謙虚に、そして誠意を見せるのが、テクニカルディレクションという仲立ちなポジションではないでしょうか。

とにかくちいさなことでもコツコツとやっていきましょう!

ありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください