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

0からのウェブディレクション講座
制作・開発編
V01.01 2013.5.25
日本ディレクション協会

まえがき
ウェブに関する用語については、概念的なものが多く、常に諸説あり、人
により、意味が全く異なることがあります。
本講における各用語の使い方は、講師である小嶋の主観、および経験に基
づいて定義されており、実際の業務の場において、伝わり易いよう、あえ
て狭義に用いていることがあります。
本資料をご覧の方には、ご自身の業務や理解において、実際に使われてい
る用語などに置き換えて、ご理解くださいますようお願いいたします。
また、本講で紹介されるサンプル・事例は、実在のものを基に加工を施し
た、架空のものです。ご了承ください。

日本ディレクション協会について
• ディレクションの能力を明確にしよう
• ディレクションが何かをみんなに理解してもらおう
• ディレクションができる人を増やそう
設立
ディレクションのノウハウの共有、及びディレクション業務を行う人同士の
コミュニティを作る
活動内容
2013年3月
目的
http://www.dir-jp.com/

小嶋裕亮
ウェブ制作をやるようになって6年。
企業向けのクライアントワーク中心の制作をして
きました。
今は某電子機器メーカーのグループの中でディレ
クターをしています。
所属：日本ディレクション協会
株式会社セラク
講師について

ディレクター
デザイナー
マークアップ
エンジニア

0
1
2
3
4
マーケティング
プロデュース
プランニング
クリエイティブ
システム
オペレーション

ショッピングセンター
ウェブマガジン
ウェブメディア
EC系
コーポレートサイト
ブランドサイト
ランディングページ

講座の目的
• ウェブディレクションの役割を理解する
• ウェブディレクターの仕事の流れを理解する

ウェブ開発のサイクル
プランニング
開発運用更新

今回取り扱う部分
プランニング
開発運用更新

ディレクションのイメージを掴む
制作・開発フェーズでのディレクション

ディレクションってなに？
デザインではない
マークアップでもない
プログラミングでもない

目に見えるものを作ることではない

目に見えるものを作ることではない
何をやるのかわからない

「何をするのか」から考えてみる

開発フェーズのチーム構成
クライアント
シニア
マークアップ
エンジニア
マークアップ
エンジニア
SE
プログラマー
ディレクター
チーフ
デザイナー
デザイナーイラストレーター

デザイナー
クライアント
シニア
マークアップ
エンジニア
マークアップ
エンジニア
SE
プログラマー
ディレクター
チーフ
デザイナー

デザイナー
を達成するために目的
どんな色や模様をを使うべきかを
決める人

マークアップエンジニア
クライアント
シニア
マークアップ
エンジニア
マークアップ
エンジニア
SE
プログラマー
ディレクター
チーフ
デザイナー

マークアップエンジニア
決める人
目的
どんなデータを作るのか
を達成するために
を

プログラマー
クライアント
シニア
マークアップ
エンジニア
マークアップ
エンジニア
SE
プログラマー
ディレクター
チーフ
デザイナー

プログラマー
決める人
目的
どんな動きを付けるのかを

三つの職域の共通点
どんな手段
決める
を用いるかを
こと
目的

ディレクター
クライアント
シニア
マークアップ
エンジニア
マークアップ
エンジニア
SE
プログラマー
ディレクター
チーフ
デザイナー

各技術者が何を目的にするかを
を達成するサイトを作るために
決める
何を目的にするか
ディレクター
目的
人

「どんな機能か」から考えてみる

分業による効率化
デザイン
マークアッププログラム

ディレクター
デザイン
分業による非効率化
自分の前の工程や、後の
工程を見なくなってい
き、それぞれ勝手な方向
に進み始めてしまう

非効率への挑戦
それぞれの技術者たちを、
もともとの目的に絶えず
引き戻す人をディレク
ターといいます。
ディレクター
デザイン

ディレクションの挑戦
目的を指し示す目的に引き戻す

某中規模制作会社の場合
Dir Dir
Dir
Dir
De
PG
デザイナーがマークアップエンジニアも兼務
De De
• 普段からコミュニケーションをとってるため、
社内での連携は比較的取りやすい
• ディレクターがすべてをこなすため、アウト
プットのレベルを維持するのが難しい
不得意分野は外注に

某大規模制作会社の場合
Dir Dir
Pr
Dir
ME
Dir Dir
Pr
Dir
ME
Dir Dir
Pr
Dir
ME
De
De
De
PG
PG
PG
部署を超えて開発を行うため、
チーム外の人とチーム外の人をつなげなくてはいけなくなり、
ディレクションの意義が大きくなってくる
デザイナーとプログラマーは別部署。

某大手ネットサービス会社の場合
Dir Dir Dir
Dir
Dir Dir Dir
Dir
Dir Dir Dir
ME
Dir
Dir
Dir
De
De
De
De
Dir
Dir
De
De
De
De
Dir
De
De
De
De
Dir
SI SI
Dir Dir Dir
Dir
意思決定者と各工程のそれぞれの担当者が離れていて、
目的の共有が難しく、
意思疎通の成否が大きな差を生む。
子会社B子会社A

実際の工程での役割を知る
開発フェーズの流れ

開発のワークフロー
素材入手
レイアウトを決める
デザイン
マークアップ
プログラム実装
公開

スケジュール作成
開発フェーズの流れ 1

ディレクションの役割（1）
ス
ケ
ジ
ュ
ー
ル
管
理
やる事を決めて、スケジュール
を決め、関係各所と合意を取っ
ておきます。

タスクだし
• ページ毎に必要な作業を洗い
出し、リストアップします

スケジュールだし
• 開発スケジュールを決定します

素材の入手

ス
ケ
ジ
ュ
ー
ル
管
理
素材入手
写真やロゴ、文章などの材料
（素材）をなんとかかき集めま
す。
必要に応じて、取材、写真撮影
なども行います。

素材の種類
• 図版や写真、ロゴ、文章など
の素材を集める
• ポスターやパンフレットなど
• 写真撮影
• 取材
図版
ロゴ文章
写真

素材の種類
• 図版や写真、ロゴ、文章など
の素材を集める
• ポスターやパンフレットなど
• 写真撮影
• 取材
図版
ロゴ文章
写真
使用ルールはどうなっているのか
文言の表記はどうするのか
似たような表現はどうするのか。
例えば…
“10%OFF!”なのか、
“１０％オフ”なのか。
「お申込み」なのか、
「お申し込み」なのか。
背景に映りこんだ建物は、使用許可はいらないか。
一般人の顔が写っていないか。
ショップのロゴは使用許可は取れているか。

レイアウトの決定

ス
ケ
ジ
ュ
ー
ル
管
理
素材入手
ページ毎におおまかなレイアウ
トを決めます。

実制作デザイン～プログラミング

ス
ケ
ジ
ュ
ー
ル
管
理
素材入手
デザイン
マークアップ
チェック
チェック
実際に制作に入ると、
スケジュールを確認しながら、
制作のフォローアップを行い、
各段階で品質のチェックを行います。

ページデザイン
画面仕様書（指示書）をもとにグラ
フィックデザインをしてもらう
• 目的に合ったイメージを感じさせる
ことができるか
• ユーザーにストレスを感じさせるデ
ザインになっていないか

マークアップ
画面仕様書とデザインデータ、原稿
をもとにHTML、CSSの構築をし
てもらう
• デザインが指定のブラウザで忠
実に再現されているか
• プログラムとして正しいものに
なっているか

PHP
必要な機能をリストアップし、出
来上がったHTML、CSSにプログ
ラムを追加してもらうJava
Script
CGI SQL
• 必要な機能の定義
• 細かい挙動の定義
• 機能チェック

公開前作業～公開

ス
ケ
ジ
ュ
ー
ル
管
理
素材入手
デザイン
マークアップ
公開
チェック
チェック
チェック
すべてがそろった状態でチェッ
クし、公開します。

ステージングテスト
• 隔離されたサーバ上にアップロード
• 正しく表示されるか、プログラムが動くかを確認

オペレーションテスト
実際にシステムを稼働させて、実際に運用できるかを確認

公開
インターネット上に公開されているサーバにアップロード

ディレションとは
ス
ケ
ジ
ュ
ー
ル
管
理
素材入手
デザイン
マークアップ
公開
チェック
チェック
チェック
デザイナー、マークアップエン
ジニア、プログラマー等の技術
者に、制作の事に集中してもら
い、成果が上がる形を作ること。

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

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

More Related Content

Viewers also liked

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

Recently uploaded

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