社団法人 日本ディレクション協会

0からのWebディレクション講座 制作編

岩井 和希 株式会社GlobalFun 代表取締役 株式会社ファーストタッチ 取締役 株式会社ダブルストローク執行役員 日本ディレクション協会 講習部 部長

金融教育系ベンチャーにて新規事業開発やマーケティング、広報室、企画部リーダーを兼任。ウェブ制作やリスティングを中心としたプロモーションを経験し独立。複数の法人を設立。現在は、アプリやWebの制作ディレクションの他、マーケティングWebプロモーション全体の年間コンサルティングも行う。

0からのWebディレクション講座 制作・開発編

1.　Webディレクターとは 2.　制作/開発とは 3.　制作を成功させるために 　　STEP1 　　STEP2 　　STEP3 4.　ワークショップ 5.　まとめ

0からのWebディレクション講座 制作・開発編

こんな話します。

Webディレクターってなに？

0からのWebディレクション講座 制作・開発編

→　　/　　→開発• ゴールの設定 • ターゲットの設定 • 施策の決定 • コンテンツの決定 • 構造の設計• UI/UX

• プロトタイピング • モック作成 • デザイン/本開発 • 進行管理 • テストデバック • リリース作業

• PDCAサイクル • マーケティング • 課題の洗い出し• データ解析• A/Bテスト• 業務効率の改善

設計 制作 運用

0からのWebディレクション講座 制作・開発編

Webディレクターってなに？

運用

ゼロディレ全4講座

0からのWebディレクション講座 制作・開発編

開発設計 制作

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

スケジュール

WBS

画面仕様書の作成

素材手配

0からのWebディレクション講座 制作・開発編

進捗管理

品質管理

チームビルディング

役割の変化設計フェーズ 制作・開発フェーズ 企画者

企画を作って通す

プロジェクト管理

クオリティの担保 スケジュールの担保

0からのWebディレクション講座 制作・開発編

projectを成功させる 3つの要素

0からのWebディレクション講座 制作・開発編

制作で大切なこと

0からのWebディレクション講座 制作・開発編

1. コミュニケーション 2. ファシリテーション3. スケジューリング

Step1. コミュニケーション

0からのWebディレクション講座 制作・開発編

Step1. コミュニケーション

0からのWebディレクション講座 制作・開発編

• ヒアリング • チームビルディング • ネゴシエーション

人の話を　正確　に聞き取る。

0からのWebディレクション講座 制作・開発編

ヒアリング

例えば・・・議事録を正確に取る

的確な　質問　ができる。

→

0からのWebディレクション講座 制作・開発編

手直しを発生させない

良いサービスを生み出す

仕事への評価

ヒアリング 品質管理

スケジュール

クオリティ

信頼・満足度・次回発注→

デザイナーへの依頼の 3つの項目

1. 概要説明#

2. 詳細依頼#

3. 画面仕様

0からのWebディレクション講座 制作・開発編

1. 概要説明•プロジェクトの経緯#•達成したいゴール#•サイト・アプリの解決すべき事#•デザインで解決してほしい課題・問題#

•対応してほしい範囲#/#役割#

できれば文章で！﹅ ﹅ ﹅

0からのWebディレクション講座 制作・開発編

•全体のボリューム（ページ数など）#•役割（コーディング、フロント開発ありなしなど）#•スケジュール（何日まで？何時まで？）#•トンマナ#•予算#

を文章で。できれば紙で。

0からのWebディレクション講座 制作・開発編

2. 詳細依頼

•ワイヤー　画面別の要素#•各パーツ　各要素の説明#•遷移先の確認　ボタン単位で遷移先を指定#•アクション　ボタン単位のフロントでの稼働#•プログラムでどう動きをつけるかの説明#

など、画面単位の設計を記入。

0からのWebディレクション講座 制作・開発編

3. 画面仕様

0からのWebディレクション講座 制作・開発編

意思決定を迅速にする コミュニケーションロスを減らす

0からのWebディレクション講座 制作・開発編

チームビルディング

組織ごとの分担の違い

クライアント デザイナー

0からのWebディレクション講座 制作・開発編

チームビルディング

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

デザイナー

プログラマー

0からのWebディレクション講座 制作・開発編

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

デザイナー

プログラマー

0からのWebディレクション講座 制作・開発編

クライアント 広告代理店

0からのWebディレクション講座 制作・開発編

コミュニケーションコストが膨大に・・・

デザイナー

イラスト レーター

フォトグラファー

ライター

クライアント

アート ディレクター SE

プログラマー

マークアップ エンジニア

0からのWebディレクション講座 制作・開発編

×

デザイナー

イラスト レーター

フォトグラファー

ライター

クライアント

アート ディレクター

SE

プログラマー

マークアップ エンジニア

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

0からのWebディレクション講座 制作・開発編

それぞれに適した人材をアサインし、ディレクターが先導！

ディレクターはナビゲーター！

要件に会った適切な人材を。 ※時には案件を断る勇気も。

0からのWebディレクション講座 制作・開発編

チームビルドで大切なこと

何と言っても、先回り！ 先手必勝！

社内/社外 のネゴ

0からのWebディレクション講座 制作・開発編

ネゴシエーション

Step2. ファシリテーション

0からのWebディレクション講座 制作・開発編

参考：日本ファシリテーション協会

Step2. ファシリテーション

0からのWebディレクション講座 制作・開発編

3

0からのWebディレクション講座 制作・開発編

• 報告会議 • 決定会議 • アイディア会議

Step3. スケジューリング

0からのWebディレクション講座 制作・開発編

Step3. スケジューリング

0からのWebディレクション講座 制作・開発編

• 進行管理 • リカバリー • バッファ

0からのWebディレクション講座 制作・開発編

納期を確実に守る。 待ち工数を削減しコストダウン。 できるだけ細かく管理が大切。

進行管理

0からのWebディレクション講座 制作・開発編

不測の事態に臨機に対応 制作/開発スピードを落とさない

リカバリー

明日までに おねがいっ！

0からのWebディレクション講座 制作・開発編

リカバリー

スケジュールが遅れているときに、 「急いでくれ」だけでは本気になりません・・・

なぜか？

0からのWebディレクション講座 制作・開発編

「そこまでヤバくないだろう」 「誰かがなんとかしてくれる」 と、思ってる。（マジで。泣）

0からのWebディレクション講座 制作・開発編

指示は明確に！

明日までに おねがいっ！

0からのWebディレクション講座 制作・開発編

0からのWebディレクション講座 制作・開発編

明日の17:00までに○○をおねがいっ！

0からのWebディレクション講座 制作・開発編

そもそも、何でぎりぎりなの？ ↓

バッファを持っていないから。

0からのWebディレクション講座 制作・開発編

0からのWebディレクション講座 制作・開発編

クライアント用

裏スケジュール、必須です！！

社内用

0からのWebディレクション講座 制作・開発編

実は、納期は明後日の朝…

明日の17:00までに○○をおねがいっ！

ぎりぎりだけど、ガンバリマス！

進行管理

0からのWebディレクション講座 制作・開発編

さぁワークショップ！• グループ分け • 説明 • 休憩

0からのWebディレクション講座 制作・開発編

ワークショップ

デザイナーへの仕事の依頼をしよう！1. 概要を説明#

2. 詳細について#

3. 画面仕様

0からのWebディレクション講座 制作・開発編

0からのWebディレクション講座 制作・開発編

ワークショップの意義

チームで考える時間を決める

要件定義 仕様書

0からのWebディレクション講座 制作・開発編

コンテンツ/機能リスト 遷移図

ファイルリスト 仕様書

0からのWebディレクション講座 制作・開発編

概要設計

0からのWebディレクション講座 制作・開発編

作ろうと思えばどれだけでも時間を労力を書けられる。

でも、ほんとに大事なことって何？

0からのWebディレクション講座 制作・開発編

ちょっと横道

便利なツール いまからデモります。

0からのWebディレクション講座 制作・開発編

ちょっと横道

0からのWebディレクション講座 制作・開発編

• 伝える相手によって、内容を変える • 伝える内容によって、手段を変える

制作・開発の進め方

0からのWebディレクション講座 制作・開発編

ちょっと横道2

テスト

時系列

工程進捗

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

0からのWebディレクション講座 制作・開発編

プロトタイピング

開発

制作

デザイン

過去は振り返らない主義なんだ！

さっさと作って

テスト

時系列

工程進捗

0からのWebディレクション講座 制作・開発編

プロトタイピング

開発

制作

デザイン

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

動かないと わからないよ

構成が良くないね。 取り敢えず、変えて。

え・・・？？？

ある程度形になるまで判断できない・・・でも、

ウォーターフォール アジャイル スパイラル

0からのWebディレクション講座 制作・開発編

0からのWebディレクション講座 制作・開発編

第３・４学年　複式単元配当一覧表

スパイラルっていいよね。

0からのWebディレクション講座 制作・開発編

まとめ0からのWebディレクション講座 制作・開発編

1. コミュニケーション　→　ヒアリング 2. ファシリテーション　→　会議の種類を把握 3. スケジューリング　　→　バッファ持つ

制作における、ディレクターのスキルってのは、 要はビジネス基礎スキルの積み上げです。

つまり、制作をスムーズに進められる人は、 どんな仕事でもだいたいできます。

食いっぱぐれない。

まとめ0からのWebディレクション講座 制作・開発編

おわり次回ゼロディレ

7月25日　システム開発編 8月29日　運用編

ご静聴ありがとうございました。 さぁミートアップだ！！！

0からのWebディレクション講座 制作・開発編