0からのウェブディレクション講座
制作・開発編
V02.01
日本ディレクション協会
自己紹介
小嶋裕亮
ウェブ制作をやるようになって6年。
企業向けのクライアントワークを中心に制作を
行ってきた。
オペレータ、デザイナー、エンジニアを経て、現
在フリーランスのディレクター。
所属:日本ディレクション協会
講師について
0
1
2
3
4
マーケティング
プロデュース
プランニング
クリエイティブ
システム
オペレーション
ショッピングセンター ウェブマガジン
ウェブメディア
EC系 コーポレートサイト
ブランドサイト ランディングページ
講師の構成比
制作・開発編
0からのウェブディレクション
扱う範囲
設計→開発→運用
扱う範囲
設計→開発→運用
ディレクションとはなにか?
コミュニケーション構築
以上。
やっていること
• ワイヤーを切る
• 電話連絡
• メール書く
やっていること?
• ワイヤーを切ればディレクション?
• 電話連絡がディレクション?
• メール書くのがディレクション?
果たす役割で考えてみよう
果たすべき役割
• 計画に基づいて
• 成果が出る仕組みを作る
果たすべき役割
• 計画に基づいて
• 成果が出る仕組みを作る
コミュニケーションで実現
関わる人
デザイナー
イラスト
レーター
フォトグラ
ファー
ライター
クライアント
アート
ディレクター SE
プログラマー
マークアップ
エンジニア
関わる人
デザイナー
イラスト
レーター
フォトグラ
ファー
ライター
クライアント
アート
ディレクター SE
プログラマー
マークアップ
エンジニア
開発フロー
ライティング デザイン マークアップ プログラミング
スケジュール
WBS
画面仕様書の作成
素材手配
進捗管理
クオリティマネジメント
ディレクション
デザイナー
イラスト
レーター
フォトグラ
ファー
ライター
クライアント
アート
ディレクター SE
プログラマー
マークアップ
エンジニア
みんな~、
あっちいくよ~
目的
ディレクションの役割
• 計画に基づいて
→目的を示して
• 成果が出る仕組みを作る
→人と人、工程と工程を整理し、
つなげること
→目的に引き戻すこと
タスク意味
• ワイヤーを切る
• メールのやり取り・電話応対
タスク意味
• ワイヤーを切る
→目的の伝達・管理
• メールのやり取り・電話応対
→コミュニケーションの設計・管理
ディレクションとは
• 誰に対して
• 何をつたえるのか
• いつ伝えるのか
• どう伝えるのか
• なにをするのか
• どんなツールを
使うのか
組織の形によってやるべきこと
は変わる
一人で出来ていた時代
クライアント デザイナー
小規模制作チーム
クライアント ディレクター
デザイナー
プログラマー
デザイナーで賄いきれない、
顧客対応やプログラミングを
プロが補うように。
中規模制作会社
クライアント 広告代理店
各工程の分業が進み、専門技術の質
が上がり、各工程内での作業効率が
あがる。
ケース1
ケース1
コミュニケーション量は
増えるが、まだ単純。
ケース2
ケース2
専門性は高くなり、各工程の作業効率はあが
るが、コミュニケーションが複雑化
ケース2
複雑すぎるコミュニケーションを裁くので手
一杯に。。。
使用するツール
WBS
ワーク・ブレークダウン・ストラクチャー
スケジューリングとチャート
画面仕様書と修正指示書
• 指示内容指示内容指示内容
• 指示内容指示内容
• 指示内容指示内容指示
• 指示内容指示内容指示内容指示内容
• 指示内容指示内容指示内容
• 指示内容指示内容
• 指示内容指示内容指示
• 指示内容指示内容指示内容指示内容
クオリティチェックリスト
ワークショップ
画面仕様書を書いてみよう
あなたはサイトの運用担当のディレクターです。
クライアントから来月掲出開始の特集ページの作成を依頼されまし
た。
• 1ページものの特集ページの作成をお願いします。
• 企画名、掲載期間、リードなどもご提案ください。
• 商品は少なくとも20品掲出してください。
• 各商品について、「商品名」・「価格」・「簡単な説明」・「商品
写真」を掲出してください。
• スマホページ作成は予算的に作成できません。
クライアントに決裁をもらうための画面仕様書、及びデザイナーにデ
ザインしてもらうための作業指示書を作成してください。
• 指示内容指示内容指示内容
• 指示内容指示内容
• 指示内容指示内容指示
• 指示内容指示内容指示内容指示内容
• 指示内容指示内容指示内容
• 指示内容指示内容
• 指示内容指示内容指示
• 指示内容指示内容指示内容指示内容
クライアント提案用ワイヤー
• 特集ページの目的
• 特集ページ名
• リード
• 掲載商品(もしあれば)
• 掲載期間
• メインビジュアルの構成
デザイナー用仕様書
• このページで達成すべきこと
• 伝えるべきメッセージ
• それぞれの情報の優先順位
• ビジュアルに掲載する要素
• 使う色の指定
• 要素のサイズ指定
• プログラムでつける動き
コミュニケーションで仕組みをつくろう
ありがとうございました
日本ディレクション協会
http://direkyo.org/

0からのウェブディレクション講座:制作・開発編 V02.01