０からのウェブディレクション講座制作・開発編

日本ディレクション協会小嶋 裕亮

おしながき

• 講義：13:10～（30分）

• ワークショップ1：13:40～（1時間）

• 休憩：14:40～（15分）

• ワークショップ2：14:55～（1.5時間）

• 講評・質疑応答：16:25～（35分）

企業向けのクライアントワークを中心に制作を行ってきた。オペレータ、デザイナー、エンジニアを経て、ディレクターに。現在株式会社リンケイジアジャパンでディレクションチームを率いる。

所属：

自己紹介

日本ディレクション協会株式会社リンケイジアジャパン

小嶋 裕亮

制作・開発編０からのウェブディレクション講座

扱う範囲

設計→開発→運用

扱う範囲

設計→開発→運用

今日やることについて

WBSのやり方、ガントチャートの使い方、スケジューリングのコツ、QAなどなど…

今日話すことについて

WBSのやり方、ガントチャートの使い方、スケジューリングのコツ、QAなどなど…

今日は話しません。

Tipsを覚えてもプロジェクトは回らない。

ディレクションとは

プロジェクト全体を把握すること。

そのためにやることは

コミュニケーションの構築。

やっていること

• 電話連絡

• メール書く

• ワイヤーを切る

• 小言を言う

やっていること

• 電話連絡がディレクション？

• メール書くのがディレクション？

• ワイヤーを切るのがディレクション？

• 小言を言うのはディレクション？

果たす役割で考えてみよう

ディレクターの役割• 計画に基づいて

• 工程を管理する

ディレクターの役割• 計画に基づいて→それぞれの目標を明確にして

• 工程を管理する→誰が、いつ、何を作るかを決め、その通りに進めること

ディレクションの役割• 計画に基づいて→それぞれの目標を明確にして

• 工程を管理する→誰が、いつ、何を作るかを決め、その通りに進めること

コミュニケーションで実現

タスク意味• ワイヤーを切る・小言を言う

• メールのやり取り・電話応対

タスク意味• ワイヤーを切る・小言を言う→目的・目標の共有・管理

• メールのやり取り・電話応対→やりとりの交通整理

人と人をつなげる

関わる人

デザイナー

イラストレーター

フォトグラファー

ライター

クライアント

アートディレクター SE

プログラマー

マークアップエンジニア

関わる人

デザイナー

イラストレーター

フォトグラファー

ライター

クライアント

アートディレクター SE

プログラマー

マークアップエンジニア

ディレクション

デザイナー

イラストレーター

フォトグラファー

ライター

クライアント

アートディレクター SE

プログラマー

マークアップエンジニア

みんな～、あっちいくよ～

目標

工程と工程をつなげる

開発フロー

ライティング デザイン マークアップ プログラミング

スケジュール

WBS

画面仕様書の作成

素材手配

ディレクション

ライティング デザイン マークアップ プログラミング

スケジュール

WBS

画面仕様書の作成

素材手配

ディレクション

ライティング デザイン マークアップ プログラミング

スケジュール

WBS

画面仕様書の作成

素材手配

進捗管理

クオリティマネジメント

ディレクションの考え方

• 誰に対して• 何を• いつ• どう伝えるのか

• なにをするのか• どんなツールを使うのか

組織の形によってやるべきことは変わる

一人での制作の特徴

クライアント デザイナー

小規模チームの特徴

クライアント ディレクター

デザイナー

プログラマーデザイナーで賄いきれない、顧客対応やプログラミングをプロが補うように。

中規模チームの特徴

クライアント 広告代理店

各工程の分業が進み、専門技術の質が上がり、各工程内での作業効率があがるはずだが…

実例1

実例1

コミュニケーション量は増えるが、まだ単純。

実例2

実例2

専門性は高くなり、各工程の作業効率はあがるが、コミュニケーションが複雑化

実例2

複雑すぎるコミュニケーションを裁くので手一杯に。。。

共通する役割

• 不要なやり取りをなくすこと。

• 技術者が無駄な判断をしなくてよいよう

にすること。

コミュニケーションを加速させるツール

チャート

画面仕様書と修正指示書• 指示内容指示内容指示内容• 指示内容指示内容

• 指示内容指示内容指示• 指示内容指示内容指示内容指示内容

• 指示内容指示内容指示内容• 指示内容指示内容

• 指示内容指示内容指示• 指示内容指示内容指示内容指示内容

コーディングチェックコードチェック• ファイルのエンコードと改行コード• バリデータでの文法チェック• リンクの指定方法のチェック• JavaScriptのエラーの有無のチェック

ブラウザチェック• デザインを再現できているかのチェック• 対応ブラウザでの表示チェック• ブラウザで拡大縮小した場合の表示チェック

コンテンツチェック• 文字校正

画像• 画像の表示漏れチェック• 画像のサイズ指定のチェック• ALT指定のチェック

リンク• ハイパーリンクのチェック

クオリティチェックリストデザインチェック

工程自体も設計しよう

ウォーターフォルモデルとは

ワイヤー

ライティング

デザイン

構築

デバック

時系列

開発工程過去は振り返らない主義なんだ。

一度工程が完了したら、変更は起こらない前提。

現実の工程

ワイヤー

ライティング

デザイン

構築

デバック

時系列

開発工程

動かないとわからないよ

えっ… 構成よくないね。構成よくないね。変えて。

お客さんはある程度形になるまで判断できないので、ブレやすい。

過去は振り返らない主義… さっさと作って

いいから、細かい事いいから、早く作ってよ。

外部委託による分断

ワイヤー

ライティング

デザイン

構築

デバック

時系列

開発工程

やることそのものを疑え

• 何をやるべきかではなく、どうあるべき

かをまず考えること。

• やっていることが本当に最適なのかを考

えること。

コミュニケーションで

仕組みをつくろう

ありがとうございました

https://www.facebook.com/direkyo.org

日本ディレクション協会