Top Banner
Web業界ってどうよ? 0ディレ for Students Webディレクター編 WebディレクターとしてIT業界で生きる
70

0 d4s 20140323_共有用

Aug 02, 2015

Download

Education

Takehiko Goshi
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 0 d4s 20140323_共有用

Web業界ってどうよ?

0ディレ for Students Webディレクター編WebディレクターとしてIT業界で生きる

Page 2: 0 d4s 20140323_共有用

講師 自己紹介合志建彦(ごうし たけひこ)

 株式会社 デジミホ 所属

 Webマーケティング企業のWebディレクター

ECサイト、メーカーサイトなど複数案件を同時進行で担当

経歴

 新卒でケーキ屋に入社

 結婚を機に寿退社 ← MJD!

 主に受託開発のWebデザイナー、ディレクターとして

 複数のデザイン会社、Web制作会社を経験

Page 3: 0 d4s 20140323_共有用

所属企業について

株式会社 デジミホ

Page 4: 0 d4s 20140323_共有用

こんなもの作ってきました

様々な商品ブランドサイト 企業の採用サイト ECサイトなどの受託制作を行ってきました

Page 5: 0 d4s 20140323_共有用

あと ケーキとか

Page 6: 0 d4s 20140323_共有用

今年のホワイトデー

2.14 来年お待ちしております

Page 7: 0 d4s 20140323_共有用

先にお伝えしておきます

本日のスライドの内容は

後日ディレ協学生部のfacebookグループ上で共有します

※著作権上または企業機密上公開できない内容は

 共有時にはナイショにします

 

Page 8: 0 d4s 20140323_共有用

なんでこの業界にはいったのか?

PCワークってなんかかっこよくねぇ?

    ↓今からやるならインターネットらしい

    ↓HTMLと絵がかけりゃWebが作れるらしい

    ↓おベンキョしてみた(デジハリ)

    ↓

Page 9: 0 d4s 20140323_共有用

ハマった!

HTML!Photoshop!Flash!

キタコレ!

おもしれ~~~

(*´Д`)ハァハァ

Page 10: 0 d4s 20140323_共有用

Web業界にいる人種

● デザイナー● コーダー● システムエンジニア● プログラマー● テスター

デザイナーとプログラマーだけじゃないよ

● プロジェクトマネージャー● ディレクター● プランナー● インフォメーションアーキテクチャー

Page 11: 0 d4s 20140323_共有用

Webサイトの制作フロー

設計 制作 検証 運用

企画

情報設計

デザイン

コーディング

システム構築

検証

バグ対応

情報更新

メンテナンス

分析・PDCA運用

Page 12: 0 d4s 20140323_共有用

Webサイトの制作フローと職種

設計 制作 検証 運用

プランナー

インフォメーションアーキテクチャー

デザイナー・コーダー

SE・プログラマー

テスター

コーダー

デザイナー

コーダー

プログラマー etc 

Page 13: 0 d4s 20140323_共有用

ビビっときた?

このサイトのデザインかっけー!自分も描きたい

 →Webデザイナーどう?

これってどうやって作ってんの?動かしてみたい

 →プログラマーどう?

 →コーダーどう?

Page 14: 0 d4s 20140323_共有用

彼らだけじゃサイトはできない!

どんなにクリエイティビティなデザイナーがいても

どんなにプロフェッショナルなプログラマーがいても

バラバラに動いてしまってはサイトは作れない

サイト制作を取りまとめる役割が必要

Page 15: 0 d4s 20140323_共有用

その役割が“Webディレクター”

Web制作には“ディレクター”という

ポジションがある

野球やサッカーには監督がいないと選手が機能しない

建築現場には現場監督がいないと大工が働けない

Web制作にはWebディレクターが必要

Page 16: 0 d4s 20140323_共有用

Webサイトの制作フロー

設計 制作 検証 運用

進行管理・品質管理

プランナー

インフォメーションアーキテクチャー

デザイナー・コーダー

SE・プログラマー

テスター

コーダー

Webディレクター

Page 17: 0 d4s 20140323_共有用

Webディレクターってなにするの?

デザインはしません

プログラムも組みません

コーディングもしません

えっ?

じゃなにするの?

Page 18: 0 d4s 20140323_共有用

プロジェクトを成功に導く!

クライアント(お客様)の要望からプロジェクトのゴールを設定し

チーム(クライアント含む)にその目的を説明し理解させ

ゴールまでのイメージを共有してチームを導く!

つまり、、、、、

Page 19: 0 d4s 20140323_共有用

Web制作における司令塔

ちょっとこの方はハードルが高い?じゃあ、、、

俺は持ってる

某サッカー日本代表選手

Page 20: 0 d4s 20140323_共有用

「勇者」である

某国民的RPGの勇者様

Page 21: 0 d4s 20140323_共有用

なぜWebディレクターが勇者なのか?

・勇者は戦士ほど力は強くない

・勇者は魔法使いのような強い魔法は使えない

・勇者は僧侶のように体力を回復させられない

・勇者はあそびにんのように遊べない

  専門分野においては専門家にはかなわない

Page 22: 0 d4s 20140323_共有用

ならば“Webディレクター=勇者”はどこで生きるのか?

“Webディレクター”      “勇者”

某深夜枠の勇者ヨ◯ヒコ

Page 23: 0 d4s 20140323_共有用

ならば“Webディレクター=勇者”はどこで生きるのか?

ゴール(企画)を設定する = 世界に平和を! 

  費用を積算する(出資) = 王様に資金とひのきのぼうをもらう

  メンバーをアサインする = ルイーダの酒場へ

  情報を集めて整理する = お城や村で情報収集

    プロジェクトを段取る = 次に行く町やダンジョンを決める

         ゴールへ導く = 魔王を倒す!

“Webディレクター”      “勇者”

Page 24: 0 d4s 20140323_共有用

ディレクション能力の活用 サークル飲み会の幹事編

ゴール(企画)を設定する = 大会へ向けて一致団結する

  費用を積算する(出資) = 飲み会の予算を検討

  メンバーをアサインする = 日程と参加者ぎめ

  情報を集めて整理する = 店の雰囲気とか参加者の好みとか

    プロジェクトを段取る = メニュー・出し物・あいさつ役決める

         ゴールへ導く = One for All All for One !!

“Webディレクター”     “飲み会の幹事”

Page 25: 0 d4s 20140323_共有用

ディレクション能力の活用  告白♥

ゴール(企画)を設定する = 告白してO.K.をもらう

  費用を積算する(出資) = デート費 プレゼント費⇒バイトだ! 

  メンバーをアサインする = 男なら自分で直接!

  情報を集めて整理する = 彼女の好みとか流行りのお店とか

    プロジェクトを段取る = デートプラン! 雰囲気は大事だぞ!

         ゴールへ導く = 「よろしくお願いします!」

“Webディレクター”    “Boy meets Girl”

Page 26: 0 d4s 20140323_共有用

実際にどんな仕事をするの?

● 課題のヒアリング

● 企画立案

● プレゼンテーション

● 制作進行管理

● 品質管理

● クライアントとの打ち合わせ

    などなど

Page 27: 0 d4s 20140323_共有用

Webディレクターに必要な能力

● ヒアリング能力● コミュニケーション能力● 企画立案能力● 段取り力● プレゼン力

ホントにいろいろありますが、、、、

● コーディング知識● デザイン知識● 流行の把握● デバイス知識● プログラム知識● サーバまわりの知識

Page 28: 0 d4s 20140323_共有用

ディレクション能力はディレクターだけのものじゃない

プランナー、デザイナー、

コーダー、SE、プログラマー

みんながディレクションのスキル、意識を持っていれば、どんなプロジェクトも もっとスムーズに進行する

                          はず

Page 29: 0 d4s 20140323_共有用

ディレクションスキルを身につければ

どんなポジションでも、

どの会社にいても、

すべてのビジネスにおいて

重要で重宝される

    つまり、年収アップにつながる!

Page 30: 0 d4s 20140323_共有用

このあとはワークショップの説明

ここまででいったん

Webディレクターについての説明は終わります

Web制作フローやWebディレクターについて

質問があればどうぞ

Page 31: 0 d4s 20140323_共有用

今日のワークショップについて

進行管理に必要な

WBSをつくってみよう

Page 32: 0 d4s 20140323_共有用

今日体験するのは「進行管理」の部分

設計 制作 検証 運用

進行管理・品質管理

Webディレクター

Page 33: 0 d4s 20140323_共有用

進行管理のためにプロジェクト開始前にすること

段取り↓

アサイン↓

スケジュール

Page 34: 0 d4s 20140323_共有用

進行管理に必要な3つの事前ステップ

段取り:目的に必要な作業の洗い出し

↓アサイン:その作業を依頼する人を決める

↓スケジュール:必要な日数を引く

Page 35: 0 d4s 20140323_共有用

段取りってなんだ?

スケジュール ≠ 段取り

1つ1つの作業を

だれが・どういう順番で・どれだけの期間必要かを検討して

プロジェクトのスタートから完成までの予定をたてる

段取りと誰がやるかを決めないと、スケジュールは決まらない

Page 36: 0 d4s 20140323_共有用

スケジュールの作成と管理

単なるスケジュールでは進行の管理はできない

プロジェクトの進行に必要な工程を洗い出し、

その進捗を管理するために必要なのが、、、

WBS です。

Page 37: 0 d4s 20140323_共有用

この後ワークショップです

グループわけと

自己紹介

Page 38: 0 d4s 20140323_共有用

休憩・・・

ここで15分間の休憩です休憩の後はグループワークです

Page 39: 0 d4s 20140323_共有用

今日のワークショップ

「プロジェクトのWBSをつくる」

WBSとは・・・Work Breakdown Structure の略

プロジェクト管理の計画手法の一つ。プロジェクトをワークパッケージという個々の作業要素に分割し、階層的な構造に配して管理する手法。またはその資料のことを指す。

Page 41: 0 d4s 20140323_共有用

WBSがなぜ必要か?

WBSとは、ゴールまでにどういう手順が

必要かを漏れ無く明確にし、その1つ1つの手順を

「だれが・どういう順番で・どれだけの期間必要か」を見える化し、プロジェクトメンバーで共有するためのツール

つまり、、、

Page 42: 0 d4s 20140323_共有用

WBSがあることで進行具合が把握できる

WBSとはプロジェクトの開始前につくる

「完成までのロードマップ」

WBSと現状を照らし合わせることで、

いま、だれが、なにを進めている、はずかが

把握できるので、プロジェクトの進捗が確認できる

Page 43: 0 d4s 20140323_共有用

WBSをつくる手順

1.必要な工程を作業レベルに分解する

     ↓2.それぞれの作業を実行できる人を割り当てる

     ↓3.作業に必要な日数を割り振る

Page 44: 0 d4s 20140323_共有用

WBSをつくるプロジェクトのお題

「10名の学生団体が告知サイトと新歓時期に新入生向けのビラを

                  配布することで100人の学生をイベントに集める」

「3校の広告研究会が1校20人ずつ集まって、

                  それぞれが活動内容を発表するイベント」

「3つの校舎に分かれている軽音楽サークル1校舎20人ずつの団体が、

                  合同で行う花見兼新入生歓迎イベント」

「所属する野球部の50周年イベントの企画運営

                  現役・OBを問わず一同に集めて開くパーティー」

Page 45: 0 d4s 20140323_共有用

プロジェクトを作る際の条件

● 企画・運営を任されているチームである

● 予算については会計に確認するフローが必要

● 最終的な企画案は代表が決定権を持つ

Page 46: 0 d4s 20140323_共有用

STEP1 作業分解

Page 47: 0 d4s 20140323_共有用

作業分解とは?

例:プロジェクト「ゆでたまごを食べる」

たまごを冷蔵庫から出す

鍋に水をはる

たまごを鍋に入れる

コンロに火をつける

必要な時間待つ

鍋からたまごを取り出して冷やす

たまごのカラを割る

塩をかける 食べる

Page 48: 0 d4s 20140323_共有用

1.作業分解

必要な作業工程を分解する

1.各自で与えられた課題に必要な作業分解

  (15分)

2.各自が分解した工程をグループで共有し

  グループで1つの工程一覧表をつくる

  (30分)

Page 49: 0 d4s 20140323_共有用

1.作業分解

各自で必要な作業工程を洗い出してみる

<ポイント>

・モレなく、ダブりなく

・作業の粒度を一定にすること例:(1)たまごを冷蔵庫から出す→鍋に水をはる

   (2)冷蔵庫の扉を開ける→たまごをとり出す

      →鍋を取る→蛇口をひねる→鍋に水を満たす

Page 50: 0 d4s 20140323_共有用

1.作業分解

テンプレート

https://drive.google.com/file/d/0B0FJbQpNgYP-cW9iXzg5dktheFU/edit?usp=sharing

最初の工程は手書きで書き出してもO.K.最終的にこのテンプレートに記載した結果を

グループで1つにまとめて発表

Page 51: 0 d4s 20140323_共有用

1.作業分解

各自で必要な作業工程を洗い出してみる

15分まってやる!

某空中浮遊王国の末裔ム◯カ大佐

Page 52: 0 d4s 20140323_共有用

プロジェクトを作る際の条件

● 企画・運営を任されているチームである

● 予算については会計に確認するフローが必要

● 最終的な企画案は代表が決定権を持つ

ーーこの条件により発生する工程があるはずーー

Page 53: 0 d4s 20140323_共有用

1.作業分解 つづき

各自が出した工程をグループで共有する

自分一人では気づかなかった作業項目を、

他の人の意見と合わせて

「もれなく」「だぶりなく」していく

Page 54: 0 d4s 20140323_共有用

1.作業分解 つづき

<手順>

テンプレート上の大きな工程に大項目を記載

     ↓項目ごとに、分けたタスクを工程順に上から記載する(なるべくでよい)

※必要に応じて欄は追加してください

Page 55: 0 d4s 20140323_共有用

1.作業分解

各グループでテンプレートに工程を記載

グループ内のみんなの意見を集約して、

「もれなく」「だぶりなく」していく

大事なことなのでもう一度言います

「もれなく」「だぶりなく」

Page 56: 0 d4s 20140323_共有用

1.作業分解

グループで1つの作業工程にまとめる

あと         

30分まってやる!

某空中浮遊王国の末裔ム◯カ大佐

Page 57: 0 d4s 20140323_共有用

STEP2 アサイン

Page 58: 0 d4s 20140323_共有用

2.アサイン

洗いだした工程を進めることのできる担当ぎめ

<手順>

分解された作業1つ1つにバイネームで担当を決める※実際に企画を進行するつもりで決める。同時に進行できない

 複数のタスクを一人にアサインしないように注意

Page 59: 0 d4s 20140323_共有用

STEP3 スケジュール

Page 60: 0 d4s 20140323_共有用

3.スケジュール

工程ごとにいつまでに行うべきかの線を引く

<ポイント>

1.締め切りから(後ろから)線を引く

  一番最後の工程はなにか?

2.各自が出した工程をグループで共有し

  グループで1つの工程一覧表をつくる

Page 61: 0 d4s 20140323_共有用

3.スケジュール

今日は日数は気にせず、

工程の前後関係

つまりAを決めないとBが始まらない、を

意識することが大切

Page 62: 0 d4s 20140323_共有用

3.スケジュール

手順を重視してスケジュールを引いてみよう

30分で支度しな!

某海賊一家の女船長◯ーラ

Page 63: 0 d4s 20140323_共有用

休憩・・・

ここで15分間の休憩です休憩の後は発表です

Page 64: 0 d4s 20140323_共有用

今日やったのはWBSの作成

やってみてどう思った?

難しい? わからない?

一人で抱え込むと正確性も欠け

行き詰まりやすい

Page 65: 0 d4s 20140323_共有用

WBSをつくるということは、、、

頭のなかで一度プロジェクトを

つくり上げるということ

経験と知識が必要

でも今日やったようにチームでやれば

おぎないあえる

Page 66: 0 d4s 20140323_共有用

WEBディレクターの仕事おさらい

● 課題のヒアリング

● 企画立案

● プレゼンテーション

● 制作進行管理

● 品質管理

● クライアントとの打ち合わせ

    などなど

Page 67: 0 d4s 20140323_共有用

WEBディレクターに必要な能力

● コミュニケーション能力

● 調整力

● 想像力

ホントにいろいろありますが、つまるところ、、、

Page 68: 0 d4s 20140323_共有用

これらの能力はディレクターだけのものじゃない

どんなポジションでも、

どの会社にいても、

すべてのビジネスにおいて

重要で重宝されるスキル

このスキルを一言で言うと

Page 69: 0 d4s 20140323_共有用

プロジェクトを作り出し成功に導く!

プロジェクトの企画をつくりゴールを設定し、

その目的をメンバー(クライアント含む)に理解・浸透させて

プロジェクトを進行・完成へ導き、双方に利益を生み出す

    それが ディレクションスキル

Page 70: 0 d4s 20140323_共有用

求む勇者!

WEBディレクターこそWEB制作の主役である