SlideShare une entreprise Scribd logo
1  sur  38
Télécharger pour lire hors ligne
ゼロからの
ウェブディレクション講座
制作・開発編 v.3.02
日本ディレクション協会
自己紹介
小嶋裕亮
Web・APP開発ディレクター
日本ディレクション協会 事務局長
大規模Webシステムのオペレーターから、デザイナー、コー
ダーなどを経てディレクターに。
主に制作・開発フェーズ、運用フェーズを得意とする。
フリーランスでディレクションを行っている。
お話しすること
Webディレクションとは何か
それに必要なものは何か
制作・開発ディレクションへの
要求
• 設計の曖昧さを具体化して
• チームの力で
• 物を作りきる
やること
決めて
伝えて
チェックする
職務
スタッフのアサイン
概要設計
確認作業
職務
決めて
伝えて
チェックする
ボトルネックは
大抵ココ
決める
誰が
何を
いつするのか
誰がするのか
デザイナー
イラスト
レーター
フォトグラ
ファー
ライター
クライアント
アート
ディレクター SE
プログラマー
マークアップ
エンジニア
何をするのか
デザイナー
イラスト
レーター
フォトグラ
ファー
ライター
クライアント
アート
ディレクター SE
プログラマー
マークアップ
エンジニア
だれが・なにをするのか
デザイナー
イラスト
レーター
フォトグラ
ファー
ライター
クライアント
アート
ディレクター SE
プログラマー
マークアップ
エンジニア
みんな∼、
あっちいくよ∼
いつするのか
明日の17:00まで
におねがいっ!
伝える
• どんな場所で伝えるのか
• どんな人につたえるのか
• どういうふうにつたえるのか
組織ごとの分担の違い
クライアント デザイナー
クライアント ディレクター
デザイナー
プログラマー
組織ごとの分担の違い
クライアント ディレクター
デザイナー
プログラマー
組織ごとの分担の違い
クライアント 広告代理店
組織ごとの分担の違い
ボトルネック
不十分な権限
コミュニケーションロス
コミュニケーションロス
コミュニケーション量は増えるが、
まだ単純。
コミュニケーションロス
コミュニケーションロス
専門性は高くなり、各工程の作業効率はあが
るが、コミュニケーションが複雑化
コミュニケーションロス
コミュニケーションロス
複雑すぎるコミュニケーションを裁くので
手一杯に。。。
ディレクションスキル
スキルセット
概要設計
プロジェクト管理
品質管理
概要設計
ぼやっとした要件を
具体的に形にしていく
概要設計
コンテンツ/機能リスト
遷移図
ファイルリスト
仕様書
機能リスト作成
コンテンツ概要
メインコンテンツ:活動紹介
• ミートアップ
• セミナー
• その他活動報告
• 協会について
• 学生部(外部リンク)
サブコンテンツ:関係者紹介
• メンバー紹介
• 協賛企業紹介
詳細情報
• PP
その他機能
• 問い合わせフォーム
ユーザーフロー作成
0001
トップ
M001
ミートアップ
S001
セミナー
A001
活動報告
M002
ミートアップ
個別
A002
活動報告個別
S002
セミナー個別
検索
エンジン
SNS
Blog
Peatix
or
ストアカ
フローA
フローB
画面一覧作成
画面仕様書作成
デザイン指示書の書き方
デザイン全体についての依頼
作業依頼
画面仕様
デザイン全体についての依頼
• プロジェクトの経緯	
  
• 達成したいゴール	
  
• 画面ごとの目的	
  
• デザインで解決してほしい問題	
  
• 対応してほしい範囲	
  
などを文章で説明する。
コーディング指示
• この画面でユーザーにしてもらいたいアクション	
  
• プロトタイプであるワイヤー	
  
• 各パーツについての説明	
  
• プログラムでどう動きをつけるかの説明	
  
など、画面単位の設計を記入。
作業依頼
• 何時までに終わらせてほしいか	
  
• 作業で絶対やっておいてほしいTo	
  Doリスト	
  
• 作業チェックリスト	
  
を文章で、できれば紙で渡す。
チームビルディング
意思決定を迅速にする
コミュニケーションロスを減らす
チームビルディング
モデュレーション
話をまとめて落としどころ
に持っていく
ファシリテーション
話を広げて意見を出させる
まとめ
作業にとらわれすぎない
自分がやっている事は伝える事

Contenu connexe

Tendances

20121117 01 dir-mtgスライド01
20121117 01 dir-mtgスライド0120121117 01 dir-mtgスライド01
20121117 01 dir-mtgスライド01
Kenta Nakamura
 
0からのウェブディレクション講座:制作・開発編 V02.01
0からのウェブディレクション講座:制作・開発編 V02.010からのウェブディレクション講座:制作・開発編 V02.01
0からのウェブディレクション講座:制作・開発編 V02.01
Yusuke Kojima
 
コンセプトの重要性についてうんぬん
コンセプトの重要性についてうんぬんコンセプトの重要性についてうんぬん
コンセプトの重要性についてうんぬん
Kenta Nakamura
 
0からのwebディレクション講座 運用編4.0
0からのwebディレクション講座 運用編4.00からのwebディレクション講座 運用編4.0
0からのwebディレクション講座 運用編4.0
Kenta Nakamura
 

Tendances (20)

20121117 01 dir-mtgスライド01
20121117 01 dir-mtgスライド0120121117 01 dir-mtgスライド01
20121117 01 dir-mtgスライド01
 
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおりWebデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおり
 
20151011_出版記念講演:クオリティとスキルの話
20151011_出版記念講演:クオリティとスキルの話20151011_出版記念講演:クオリティとスキルの話
20151011_出版記念講演:クオリティとスキルの話
 
0からのウェブディレクション講座:制作・開発編 V02.01
0からのウェブディレクション講座:制作・開発編 V02.010からのウェブディレクション講座:制作・開発編 V02.01
0からのウェブディレクション講座:制作・開発編 V02.01
 
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
 
【0からのディレクション講座:運用編】Vol3 中村健太のスライド
【0からのディレクション講座:運用編】Vol3 中村健太のスライド【0からのディレクション講座:運用編】Vol3 中村健太のスライド
【0からのディレクション講座:運用編】Vol3 中村健太のスライド
 
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
 
20140913 ディレクション講演資料(山盛り)
20140913 ディレクション講演資料(山盛り)20140913 ディレクション講演資料(山盛り)
20140913 ディレクション講演資料(山盛り)
 
デザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクターデザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクター
 
20150404 講演資料
20150404 講演資料20150404 講演資料
20150404 講演資料
 
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができることいいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
 
【設計編Ver2】0からのディレクション講座
【設計編Ver2】0からのディレクション講座【設計編Ver2】0からのディレクション講座
【設計編Ver2】0からのディレクション講座
 
コンセプトの重要性についてうんぬん
コンセプトの重要性についてうんぬんコンセプトの重要性についてうんぬん
コンセプトの重要性についてうんぬん
 
デザイナーとエンジニアの良い関係
デザイナーとエンジニアの良い関係デザイナーとエンジニアの良い関係
デザイナーとエンジニアの良い関係
 
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
 
2013 HTML5カンファレンス  レスポンシブWebデザイン
2013  HTML5カンファレンス   レスポンシブWebデザイン2013  HTML5カンファレンス   レスポンシブWebデザイン
2013 HTML5カンファレンス  レスポンシブWebデザイン
 
0からのwebディレクション講座 運用編4.0
0からのwebディレクション講座 運用編4.00からのwebディレクション講座 運用編4.0
0からのwebディレクション講座 運用編4.0
 
企業をデザインシフトさせる方法と今後のデザイン戦略
企業をデザインシフトさせる方法と今後のデザイン戦略企業をデザインシフトさせる方法と今後のデザイン戦略
企業をデザインシフトさせる方法と今後のデザイン戦略
 
ディレクターが身につけておきたいチームビルディング
ディレクターが身につけておきたいチームビルディングディレクターが身につけておきたいチームビルディング
ディレクターが身につけておきたいチームビルディング
 
【ゼロからのディレクション講座】サイト設計編
【ゼロからのディレクション講座】サイト設計編【ゼロからのディレクション講座】サイト設計編
【ゼロからのディレクション講座】サイト設計編
 

En vedette

0からのウェブディレクション講座:制作・開発編 ver 2.02
0からのウェブディレクション講座:制作・開発編 ver 2.020からのウェブディレクション講座:制作・開発編 ver 2.02
0からのウェブディレクション講座:制作・開発編 ver 2.02
Yusuke Kojima
 
0からのディレクション講座設計編(140426開催)
0からのディレクション講座設計編(140426開催)0からのディレクション講座設計編(140426開催)
0からのディレクション講座設計編(140426開催)
Motoho Jitsukawa
 
0からのウェブディレクション講座:制作・開発編
0からのウェブディレクション講座:制作・開発編0からのウェブディレクション講座:制作・開発編
0からのウェブディレクション講座:制作・開発編
Yusuke Kojima
 

En vedette (20)

デザイン仕様書(ガイド)の書き方 (初歩者用)
デザイン仕様書(ガイド)の書き方 (初歩者用)デザイン仕様書(ガイド)の書き方 (初歩者用)
デザイン仕様書(ガイド)の書き方 (初歩者用)
 
0からのウェブディレクション講座:設計編 v5.3
0からのウェブディレクション講座:設計編 v5.30からのウェブディレクション講座:設計編 v5.3
0からのウェブディレクション講座:設計編 v5.3
 
始めよう!Webディレクション 制作・開発現場を活性化するディレクション
始めよう!Webディレクション 制作・開発現場を活性化するディレクション始めよう!Webディレクション 制作・開発現場を活性化するディレクション
始めよう!Webディレクション 制作・開発現場を活性化するディレクション
 
0からのウェブディレクション講座:制作・開発編 ver 2.02
0からのウェブディレクション講座:制作・開発編 ver 2.020からのウェブディレクション講座:制作・開発編 ver 2.02
0からのウェブディレクション講座:制作・開発編 ver 2.02
 
0からのディレクション講座設計編(140426開催)
0からのディレクション講座設計編(140426開催)0からのディレクション講座設計編(140426開催)
0からのディレクション講座設計編(140426開催)
 
Three20
Three20Three20
Three20
 
ゼロディレシステム開発編150725
ゼロディレシステム開発編150725ゼロディレシステム開発編150725
ゼロディレシステム開発編150725
 
ゼロディレ システム開発編150419
ゼロディレ システム開発編150419ゼロディレ システム開発編150419
ゼロディレ システム開発編150419
 
0からのウェブディレクション講座:制作・開発編
0からのウェブディレクション講座:制作・開発編0からのウェブディレクション講座:制作・開発編
0からのウェブディレクション講座:制作・開発編
 
現場のプロが教える ディレクターのための見積作成 v.1.01
現場のプロが教えるディレクターのための見積作成 v.1.01現場のプロが教えるディレクターのための見積作成 v.1.01
現場のプロが教える ディレクターのための見積作成 v.1.01
 
0からのwebディレクション講座 製作・開発編5.0
0からのwebディレクション講座 製作・開発編5.00からのwebディレクション講座 製作・開発編5.0
0からのwebディレクション講座 製作・開発編5.0
 
リンクに依存しないSEO内部改善のポイント forスクー
リンクに依存しないSEO内部改善のポイント forスクーリンクに依存しないSEO内部改善のポイント forスクー
リンクに依存しないSEO内部改善のポイント forスクー
 
デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作
 
Webディレクターの実績を可視化する方法
Webディレクターの実績を可視化する方法Webディレクターの実績を可視化する方法
Webディレクターの実績を可視化する方法
 
最近のUIデザインプロセス
最近のUIデザインプロセス最近のUIデザインプロセス
最近のUIデザインプロセス
 
Why startups need "Lean Startup" & "Design Sprint"?
Why startups need "Lean Startup" & "Design Sprint"?Why startups need "Lean Startup" & "Design Sprint"?
Why startups need "Lean Startup" & "Design Sprint"?
 
Design Sprint Process / デザインスプリントの実際のプロセスについて
Design Sprint Process / デザインスプリントの実際のプロセスについてDesign Sprint Process / デザインスプリントの実際のプロセスについて
Design Sprint Process / デザインスプリントの実際のプロセスについて
 
0からのwebディレクション講座 福岡 設計編_150117
0からのwebディレクション講座 福岡 設計編_1501170からのwebディレクション講座 福岡 設計編_150117
0からのwebディレクション講座 福岡 設計編_150117
 
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
 
Design Sprint 概要 / デザインスプリント概要
Design Sprint 概要 / デザインスプリント概要Design Sprint 概要 / デザインスプリント概要
Design Sprint 概要 / デザインスプリント概要
 

Similaire à ゼロからのディレクション講座 制作・開発編20150221

ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
schoowebcampus
 
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
sogawaminoru
 
20130920 講演資料
20130920 講演資料20130920 講演資料
20130920 講演資料
masaki sukeda
 
20130928 ゼロディレ運用編スライド
20130928 ゼロディレ運用編スライド20130928 ゼロディレ運用編スライド
20130928 ゼロディレ運用編スライド
Kenta Nakamura
 
【中村】サイト運用編スライドVer.3.0
【中村】サイト運用編スライドVer.3.0【中村】サイト運用編スライドVer.3.0
【中村】サイト運用編スライドVer.3.0
Kenta Nakamura
 
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
naoki ando
 

Similaire à ゼロからのディレクション講座 制作・開発編20150221 (20)

ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
 
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
 
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
 
20130920 講演資料
20130920 講演資料20130920 講演資料
20130920 講演資料
 
HTML5の今とこれから
HTML5の今とこれからHTML5の今とこれから
HTML5の今とこれから
 
20130928 ゼロディレ運用編スライド
20130928 ゼロディレ運用編スライド20130928 ゼロディレ運用編スライド
20130928 ゼロディレ運用編スライド
 
Web制作者のための上流工程の簡単な説明
Web制作者のための上流工程の簡単な説明Web制作者のための上流工程の簡単な説明
Web制作者のための上流工程の簡単な説明
 
0からのwebディレクション講座 制作編5.1
0からのwebディレクション講座 制作編5.1 0からのwebディレクション講座 制作編5.1
0からのwebディレクション講座 制作編5.1
 
エンジニアと"協同"してサービスをつくる
エンジニアと"協同"してサービスをつくるエンジニアと"協同"してサービスをつくる
エンジニアと"協同"してサービスをつくる
 
【中村】サイト運用編スライドVer.3.0
【中村】サイト運用編スライドVer.3.0【中村】サイト運用編スライドVer.3.0
【中村】サイト運用編スライドVer.3.0
 
ブラウザだけで学ぶWebアプリ開発【デザイン編】
ブラウザだけで学ぶWebアプリ開発【デザイン編】ブラウザだけで学ぶWebアプリ開発【デザイン編】
ブラウザだけで学ぶWebアプリ開発【デザイン編】
 
Webを勉強中の方々へ
Webを勉強中の方々へWebを勉強中の方々へ
Webを勉強中の方々へ
 
Ssi 20150519
Ssi 20150519Ssi 20150519
Ssi 20150519
 
WEBディレクターとは
WEBディレクターとはWEBディレクターとは
WEBディレクターとは
 
だから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Zだから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Z
 
デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話
 
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
 
Bracketsについて
BracketsについてBracketsについて
Bracketsについて
 
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKIデザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
 
e-Learning Design for Teacher
e-Learning Design for Teachere-Learning Design for Teacher
e-Learning Design for Teacher
 

Dernier

物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
Michael Rada
 
Service-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadershipService-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadership
Yasuyoshi Minehisa
 

Dernier (8)

company profile.pdf
company profile.pdfcompany profile.pdf
company profile.pdf
 
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
 
共有用_aio基本保守プラン_WordPressサイト_20240509.pdf
共有用_aio基本保守プラン_WordPressサイト_20240509.pdf共有用_aio基本保守プラン_WordPressサイト_20240509.pdf
共有用_aio基本保守プラン_WordPressサイト_20240509.pdf
 
ストックマーク株式会社がご提供しているAnews(エーニュース)概要紹介.pdf
ストックマーク株式会社がご提供しているAnews(エーニュース)概要紹介.pdfストックマーク株式会社がご提供しているAnews(エーニュース)概要紹介.pdf
ストックマーク株式会社がご提供しているAnews(エーニュース)概要紹介.pdf
 
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
 
セルフケア研修で使えるカードゲーム『攻略!きみのストレスを発見せよ!: ゲームで身につくストレスマネジメント』
セルフケア研修で使えるカードゲーム『攻略!きみのストレスを発見せよ!: ゲームで身につくストレスマネジメント』セルフケア研修で使えるカードゲーム『攻略!きみのストレスを発見せよ!: ゲームで身につくストレスマネジメント』
セルフケア研修で使えるカードゲーム『攻略!きみのストレスを発見せよ!: ゲームで身につくストレスマネジメント』
 
事例DBサービス紹介資料(Case Study DB service introduction)
事例DBサービス紹介資料(Case Study DB service introduction)事例DBサービス紹介資料(Case Study DB service introduction)
事例DBサービス紹介資料(Case Study DB service introduction)
 
Service-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadershipService-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadership
 

ゼロからのディレクション講座 制作・開発編20150221