Webディレクター～強みを活かすディレクション術～

1. WEBディレクターWEBディレクター〜強みを活かすディレクション術〜角雄崇 2015/09/302015/09/30 © IntelligentNet, Inc.

2. 自己紹介角雄崇角雄崇（すみゆたか） 1977年⽣まれの37歳1977年⽣まれの37歳鳥取県⽣まれ ※総人口57万人（杉並区と同じぐらい）※総人口57万人（杉並区と同じぐらい） ※日本の総人口の0.4% インテリジェントネット株式会社勤務インテリジェントネット株式会社勤務 WEBディレクター © IntelligentNet, Inc.

3. 自己紹介 • 1977年、鳥取で⽣を受ける • 1997年、京都精華⼤学芸術学部造形学科版画専攻に入学年、⼤学卒業後アニメータを目指し上京「」に入社• 2001年、⼤学卒業後アニメータを目指し上京「 STUDIO4℃」に入社『アニマトリックス』『マインドゲーム』などちょっとマニアックな作品に関わりつつ、諸事情から転職に関わりつつ、諸事情から転職 • 2005年、「インテリジェントネット」にアルバイトのコーダーとして入社 • 2015年、現在はゼネラルマネージャとして業務遂⾏中 • 趣味は海外ドラマで「海外ドラマJP DRACO」を運営中 © IntelligentNet, Inc.

4. 作る人のキャリアパスって︖作る人のキャリアパスって︖ © IntelligentNet, Inc.

5. 作る人のキャリアパスって︖ WEB プロジェクトWEB ディレクタープロジェクトマネージャーコーダーインフォメーションアーキテクトプロデューサーコーダーマークアップエンジニアフロントエンドエンジニアプログラマ SEプログラマ SE etcetc © IntelligentNet, Inc.

6. 作る人のキャリアパスって︖ WEB プロジェクトWEB ディレクタープロジェクトマネージャーコーダーインフォメーションアーキテクトプロデューサーコーダーマークアップエンジニアフロントエンドエンジニアプログラマ SE ゼネラリストプログラマ SE etc ゼネラリスト幅広い範囲をカバーする人 etc 幅広い範囲をカバーする人 © IntelligentNet, Inc.

7. 「ゼネラリスト」をドラクエで例えると「勇者」直接攻撃、攻撃魔法、回復魔法など、なんでも出来る「勇者」

8. 作る人のキャリアパスって︖ WEB プロジェクトスペシャリストWEB ディレクタープロジェクトマネージャースペシャリスト専門性を突き詰める人コーダーインフォメーションアーキテクトプロデューサーコーダーマークアップエンジニアフロントエンドエンジニアプログラマ SEプログラマ SE etcetc © IntelligentNet, Inc.

9. 「スペシャリスト」をドラクエで例えると「戦士」「魔法使い」「僧侶」直接攻撃、攻撃魔法、回復魔法など、それぞれに特化「戦士」「魔法使い」「僧侶」

10. 作る人のキャリアパスって︖ WEB プロジェクトWEB ディレクタープロジェクトマネージャーコーダーインフォメーションアーキテクトコーダーはWEB業界の「基本職」コーダーマークアップエンジニアフロントエンドエンジニアゼネラリスト、スペシャリストどちらにも進める可能性があります。プログラマ SEプログラマ SE etcetc © IntelligentNet, Inc.

11. 作る人のキャリアパスって︖ WEB プロジェクトWEB ディレクタープロジェクトマネージャーコーダーインフォメーションアーキテクトプロデューサーコーダーマークアップエンジニアフロントエンドエンジニアプログラマ SE本日はこちらのディレクター向けのプログラマ SE etc 本日はこちらのディレクター向けのお話しです。 etc © IntelligentNet, Inc.

12. そもそもディレクターって︖そもそもディレクターって︖ © IntelligentNet, Inc.

13. そもそもディレクターって︖ WEB業界のディレクターには様々なタイプがあります。ディレクター様々なタイプがあります。 © IntelligentNet, Inc.

14. いろいろなタイプのディレクターテクニカル実装可否や導入技術などの仕様策定を担当テクニカルディレクター実装可否や導入技術などの仕様策定を担当開発進⾏・運⽤ディレクター主にお客様とのやり取りを中心に開発工程を担当企画・営業系ディレクター企画や要件定義など上流工程を担当クリエイティブディレクターデザインやUIなどのクリエイティブ面を担当プロジェクトマネージャープロジェクトの計画と実⾏の責任者マネージャープロジェクトの計画と実⾏の責任者 © IntelligentNet, Inc.

15. いろいろなタイプのディレクターテクニカル実装可否や導入技術などの仕様策定を担当テクニカルディレクター実装可否や導入技術などの仕様策定を担当開発進⾏・運⽤ディレクター主にお客様とのやり取りを中心に開発工程を担当ディレクターの中でもディレクターの中でも開発経験を持っている人が進みやすい。 © IntelligentNet, Inc.

16. いろいろなタイプのディレクター責任範囲が広がる企画・営業ディレクター開発進⾏・運⽤ディレクターコーダープロジェクトマネージャーテクニカルディレクタークリエイティブディレクターディレクターディレクターアートディレクターデザイナー © IntelligentNet, Inc.

17. いろいろなタイプのディレクターコーダーが目指しやすいクラスチェンジ企画・営業ディレクター開発進⾏・運⽤ディレクターコーダープロジェクトマネージャーテクニカルディレクタークリエイティブディレクターディレクターディレクターアートディレクターデザイナー © IntelligentNet, Inc.

18. そもそもどうやったらディレクターになれるの︖ そもそもどうやったらディレクターになれるの︖ © IntelligentNet, Inc.

19. どうやったらディレクターになれるの︖ ディレクターとしての条件を満たすディレクターとしての条件を満たす © IntelligentNet, Inc.

20. どうやったらディレクターになれるの︖ ディレクターとしての条件を満たす周囲（上司）に認めさせる © IntelligentNet, Inc.

21. どうやったらディレクターになれるの︖ スキル・能⼒周囲（上司）に認めさせる © IntelligentNet, Inc.

22. どうやったらディレクターになれるの︖ 例えば例えば開発進⾏を担当する開発進⾏を担当するデザイン・ワイヤーフレームのQAをするデザイン・ワイヤーフレームのQAをする技術視点でのUIアイデアを出すスケジュールの提案をするスケジュールの提案をする etcetc © IntelligentNet, Inc.

23. どうやったらディレクターになれるの︖ 開発工程ディレクター IA コーダー運⽤フェーズ開発フェーズ設計フェーズ企画・要件定義フェーズワイヤーフレームを提出した。スケジュールを提出した。提出した。提出した。クライアント © IntelligentNet, Inc.

24. どうやったらディレクターになれるの︖ 開発工程ディレクター IA コーダー運⽤フェーズ開発フェーズ設計フェーズ企画・要件定義フェーズスケジュールを提出した。ワイヤーフレームを提出した。提出した。クライアント承認した。 © IntelligentNet, Inc.

25. どうやったらディレクターになれるの︖ つまり上流工程へのチャンレンジ上流工程へのチャンレンジ & 窓口担当窓口担当へのチャンレンジ © IntelligentNet, Inc.

26. どうやったらディレクターになれるの︖ ディレクターとは「判断⼒」と「折衝⼒」「判断⼒」と「折衝⼒」がある人 © IntelligentNet, Inc.

27. どうやったらディレクターになれるの︖ それを証明するとそれを証明すると © IntelligentNet, Inc.

28. よろしい。では今からよろしい。では今からそなたはディレクターじゃ︕ © IntelligentNet, Inc.

29. 作れるディレクターの強み作れるディレクターの強み © IntelligentNet, Inc.

30. 作れるディレクターの強み作れるからこそ各工程の中身を想像できます。想像できます。 © IntelligentNet, Inc.

31. 作れるディレクターの強み開発工程運⽤開発設計企画・要件定義運⽤フェーズ開発フェーズ設計フェーズ企画・要件定義フェーズ •⾒積 •デザイン •ワイヤーフレーム •開発仕様書 •アクセス解析 •開発仕様書各工程のほぼ全ての成果物を観る機会があり、どんな成果物が開発フェーズに必要か知っている。どんな成果物が開発フェーズに必要か知っている。 © IntelligentNet, Inc.

32. 作れるディレクターの強み想像できると各工程の「あるある」を防げます。各工程の「あるある」を防げます。 © IntelligentNet, Inc.

33. 作れるディレクターの強みあるある1︓あるある1︓ 格安で受けてしまう格安で受けてしまう © IntelligentNet, Inc.

34. 作れるディレクターの強みあるある1︓あるある1︓ 格安で受けてしまう格安で受けてしまう実装方法まで検討できるので、実装方法まで検討できるので、⾒積の段階で⾒積ミスを防げる。 © IntelligentNet, Inc.

35. 作れるディレクターの強みあるある2︓あるある2︓ 十分なスケジュールが確保されていない十分なスケジュールが確保されていない © IntelligentNet, Inc.

36. 作れるディレクターの強みあるある2︓あるある2︓ 十分なスケジュールが確保されていない十分なスケジュールが確保されていない実際にどれだけ時間が掛かるか、工数を⾒積もれるので、工数を⾒積もれるので、十分なスケジュールを確保できる。 © IntelligentNet, Inc.

37. 作れるディレクターの強みあるある3︓あるある3︓ 実現不可能そうなUIがワイヤーフレームに書かれているワイヤーフレームに書かれている © IntelligentNet, Inc.

38. 作れるディレクターの強みあるある3︓あるある3︓ 実現不可能そうなUIがワイヤーフレームに書かれているワイヤーフレームに書かれている実装可能な方法を提案できる。実装可能な方法を提案できる。 © IntelligentNet, Inc.

39. 作れるディレクターの弱み作れるディレクターの弱み © IntelligentNet, Inc.

40. 作れるディレクターの弱み作れるからこそ、陥るワナもあります。作れるからこそ、陥るワナもあります。 © IntelligentNet, Inc.

41. なんと宝箱はワナだった︕なんと宝箱はワナだった︕ © IntelligentNet, Inc.

42. 作れるディレクターの弱みワナ1︓ ディレクションに徹しきれずディレクションに徹しきれず手を動かしてしまう手を動かしてしまう ※運⽤中心案件だと良い場合もありますスケジュール調整やスコープ調整がスケジュール調整やスコープ調整が後手に回る。 © IntelligentNet, Inc.

43. 作れるディレクターの弱みワナ2︓ワナ2︓ 簡単な実装など、安請け合いしてしまう簡単な実装など、安請け合いしてしまうチリも積もって、チリも積もって、気がついてみたら工数を圧迫。 © IntelligentNet, Inc.

44. 作れるディレクターの弱みワナ3︓ワナ3︓ いつの間にか作らなくなっているいつの間にか作らなくなっている最新の技術についていけない。最新の技術についていけない。 © IntelligentNet, Inc.

45. 作れて強いディレクターになるには︖ 作れて強いディレクターになるには︖ © IntelligentNet, Inc.

46. 作れて強いディレクターになるには︖ ワナ1︓ワナ1︓ 「手を動かしてしまう」対策「手を動かしてしまう」対策 © IntelligentNet, Inc.

47. 作れて強いディレクターになるには︖ ワナ1︓ワナ1︓ 「手を動かしてしまう」対策「手を動かしてしまう」対策 •プロジェクトチーム編成•プロジェクトチーム編成 •クライアントと交渉 © IntelligentNet, Inc.

48. プロジェクトチーム編成受注額次第ですが必ず作れる人をアサインします。必ず作れる人（コーダー）をアサインします。 © IntelligentNet, Inc.

49. プロジェクトチーム編成 × 悪い例ディレクター兼メインコーダー × 悪い例メインコーダーデザイナーコーダーデザイナーコーダー条件 • プロジェクト期間︓ 1ヶ月 • 受注額︓3人 x 20日 x 4万 = 240万程度• 受注額︓3人 x 20日 x 4万 = 240万程度 © IntelligentNet, Inc.

50. プロジェクトチーム編成 ○ 良い例ディレクター ○ 良い例ディレクターメインコーダーデザイナーコーダーメインコーダーデザイナーコーダー条件 • プロジェクト期間︓ 1ヶ月 • 受注額︓4人 x 20日 x 4万 = 320万程度• 受注額︓4人 x 20日 x 4万 = 320万程度 © IntelligentNet, Inc.

51. プロジェクトチーム編成プロジェクト ○ 良い例プロジェクトマネージャー ○ 良い例ディレクター兼 IAIA メインコーダーデザイナーコーダーメインコーダーデザイナーコーダー条件条件 • プロジェクト期間︓2ヶ月 • 受注額︓5人 x 20日 x 4万 = 400万程度 ※稼働50%程度© IntelligentNet, Inc.

52. クライアントと交渉スケジュールが間に合わない時の対応はスケジュールが間に合わない時の対応は納期を延ばす納期を延ばすスコープを削るスコープを削る人を投入するの3つしかありません。の3つしかありません。 © IntelligentNet, Inc.

53. クライアントと交渉 1. 納期を延ばすスコープを削る納期を延ばす 2. スコープを削る 3. 人を投入する ※⾦額交渉とセット3. 人を投入する ※⾦額交渉とセットの順番でクライアントと交渉します。 © IntelligentNet, Inc.

54. 作れて強いディレクターになるには︖ ワナ2︓ワナ2︓ 「安請け合いしてしまう」対策「安請け合いしてしまう」対策 © IntelligentNet, Inc.

55. 作れて強いディレクターになるには︖ ワナ2︓ワナ2︓ 「安請け合いしてしまう」対策「安請け合いしてしまう」対策抜け目なく⾒積もる。抜け目なく⾒積もる。 © IntelligentNet, Inc.

56. 抜け目なく⾒積もる⾒積項目から抜けてませんか︖⾒積項目から抜けてませんか︖ ディレクション工数ディレクション工数テスト工数テスト工数テストアップ・本番アップ工数ソース管理工数ソース管理工数 etcetc © IntelligentNet, Inc.

57. 抜け目なく⾒積もる 1Pページ制作 • 社内ディレクション︓30分 • コーディング︓4時間• コーディング︓4時間 • ブラウザテスト︓ 30分 • テストアップ報告︓15分• テストアップ報告︓15分 • フィードバック対応︓1時間 • 再テストアップ報告︓15分• 再テストアップ報告︓15分 • 本アップ報告︓15分 • その間の待ち時間など• その間の待ち時間など etc © IntelligentNet, Inc.

63. 自分のサイトを作ってみよう運営で身についたスキル運営で身についたスキル HTML5、CSS3 PHPPHP JavaScript（jQuery） IA（UX/UI） SEOSEO コンテンツライティングデザイントレンドデザイントレンド SNS Google アナリティクス etcetc © IntelligentNet, Inc.

64. 自分のサイトを作ってみよう参考 IA︓ おかんでもわかるUXデザイン Ver.0.4（http://www.slideshare.net/securecat/ux-version-04） IAシンキング（坂本貴史著） IA100 —ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計（⻑⾕川敦士シンキング（坂本貴史著） IA100 —ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計（⻑⾕川敦士著） PHP、 JavaScript︓ http://dotinstall.com/ 、 ︓ http://dotinstall.com/ 体系的に学ぶ安全なWebアプリケーションの作り方（徳丸浩著）よくわかるPHPの教科書（たにぐちまこと著）デザイントレンド︓ https://dribbble.com/ http://pttrns.com/ http://muuuuu.org/http://muuuuu.org/ http://www.mobile-patterns.com/ © IntelligentNet, Inc.

67. いろいろなタイプのディレクター企画・営業ディレクター開発進⾏・運⽤ディレクターコーダープロジェクトマネージャーディレクターディレクターコーダーマネージャーテクニカルディレクタークリエイティブディレクターアートディレクターデザイナークターデザイナーこのディレクターの方達がサーバーサイドのこのディレクターの方達がサーバーサイドの事など分かっていると割と無敵です。 © IntelligentNet, Inc.

71. ステップアップ狙いたいスキル狙いたいスキルコンテンツ・マーケティングコンテンツ・マーケティング JavaScript サーバサイド言語サーバサイド言語 CMSCMS スマートフォンアプリ etcetc © IntelligentNet, Inc.

72. ステップアップサービス名言語フレームワーク niconico PHP, Scala, JavaScript, CakePHP, Symfony, FuelPHP, Zend,niconico PHP, Scala, JavaScript, Java, SQL, C++, Ruby, Erlang, etc. CakePHP, Symfony, FuelPHP, Zend, CodeIgniter, Yii, Slim, Play Framework, Finagle, Netty, Backbone.js, Wicket, Ruby on Rails,Backbone.js, Wicket, Ruby on Rails, etc. クックパッド Ruby Ruby on Rails はてなブックマーク Perl Ridgeはてなブックマーク Perl Ridge pixiv PHP, Ruby, C, C++, Python, Lua, Scala 自社製, Ruby on Rails Python, Lua, Scala GREE PHP Cascade(内製), Ethna 出典︓http://www.find-job.net/startup/architecture-2013 © IntelligentNet, Inc.

79. まとめご静聴ありがとうございました。ご感想やご質問はこちらまで頂けますと幸いです。ご感想やご質問はこちらまで頂けますと幸いです。 ↓ Facebook︓https://www.facebook.com/sumithsonianFacebook︓https://www.facebook.com/sumithsonian Twitter︓https://twitter.com/sumithsonian © IntelligentNet, Inc.

Webディレクター～強みを活かすディレクション術～

Webディレクター～強みを活かすディレクション術～

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados(20)

Similar a Webディレクター～強みを活かすディレクション術～

Similar a Webディレクター～強みを活かすディレクション術～(20)

Webディレクター～強みを活かすディレクション術～

Notas do Editor