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

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

1. 1. WEBディレクターWEBディレクター 〜強みを活かすディレクション術〜 角 雄崇 2015/09/302015/09/30 © IntelligentNet, Inc.
2. 2. 自己紹介 角 雄崇角 雄崇（すみ ゆたか） 1977年⽣まれの37歳1977年⽣まれの37歳 鳥取県⽣まれ ※総人口57万人（杉並区と同じぐらい）※総人口57万人（杉並区と同じぐらい） ※日本の総人口の0.4% インテリジェントネット 株式会社勤務 インテリジェントネット 株式会社勤務 WEBディレクター © IntelligentNet, Inc.
3. 3. 自己紹介 • 1977年、鳥取で⽣を受ける • 1997年、京都精華⼤学 芸術学部造形学科版画専攻に入学 年、⼤学卒業後アニメータを目指し上京 「 」に入社• 2001年、⼤学卒業後アニメータを目指し上京 「 STUDIO4℃」に入社 『アニマトリックス』『マインドゲーム』などちょっとマニアックな作品 に関わりつつ、諸事情から転職に関わりつつ、諸事情から転職 • 2005年、「インテリジェントネット」にアルバイトのコーダーとして入社 • 2015年、現在はゼネラルマネージャとして業務遂⾏中 • 趣味は海外ドラマで「海外ドラマJP DRACO」を運営中 © IntelligentNet, Inc.
4. 4. 作る人のキャリアパスって︖作る人のキャリアパスって︖ © IntelligentNet, Inc.
5. 5. 作る人のキャリアパスって︖ WEB プロジェクトWEB ディレクター プロジェクト マネージャー コーダー インフォメーション アーキテクト プロデューサー コーダー マークアップ エンジニア フロントエンドエン ジニア プログラマ SEプログラマ SE etcetc © IntelligentNet, Inc.
6. 6. 作る人のキャリアパスって︖ WEB プロジェクトWEB ディレクター プロジェクト マネージャー コーダー インフォメーション アーキテクト プロデューサー コーダー マークアップ エンジニア フロントエンドエン ジニア プログラマ SE ゼネラリストプログラマ SE etc ゼネラリスト 幅広い範囲をカバーする人 etc 幅広い範囲をカバーする人 © IntelligentNet, Inc.
7. 7. 「ゼネラリスト」をドラクエで例えると 「勇者」 直接攻撃、攻撃魔法、回復魔法など、なんでも出来る 「勇者」
8. 8. 作る人のキャリアパスって︖ WEB プロジェクトスペシャリストWEB ディレクター プロジェクト マネージャー スペシャリスト 専門性を突き詰める人 コーダー インフォメーション アーキテクト プロデューサー コーダー マークアップ エンジニア フロントエンドエン ジニア プログラマ SEプログラマ SE etcetc © IntelligentNet, Inc.
9. 9. 「スペシャリスト」をドラクエで例えると 「戦士」「魔法使い」「僧侶」 直接攻撃、攻撃魔法、回復魔法など、それぞれに特化 「戦士」「魔法使い」「僧侶」
10. 10. 作る人のキャリアパスって︖ WEB プロジェクトWEB ディレクター プロジェクト マネージャー コーダー インフォメーション アーキテクトコーダーはWEB業界の「基本職」 コーダー マークアップ エンジニア フロントエンドエン ジニア ゼネラリスト、スペシャリスト どちらにも進める可能性があります。 プログラマ SEプログラマ SE etcetc © IntelligentNet, Inc.
11. 11. 作る人のキャリアパスって︖ WEB プロジェクトWEB ディレクター プロジェクト マネージャー コーダー インフォメーション アーキテクト プロデューサー コーダー マークアップ エンジニア フロントエンドエン ジニア プログラマ SE本日はこちらのディレクター向けのプログラマ SE etc 本日はこちらのディレクター向けの お話しです。 etc © IntelligentNet, Inc.
12. 12. そもそもディレクターって︖そもそもディレクターって︖ © IntelligentNet, Inc.
13. 13. そもそもディレクターって︖ WEB業界のディレクターには 様々なタイプがあります。 ディレクター 様々なタイプがあります。 © IntelligentNet, Inc.
14. 14. いろいろなタイプのディレクター テクニカル 実装可否や導入技術などの仕様策定を担当 テクニカル ディレクター 実装可否や導入技術などの仕様策定を担当 開発進⾏・運⽤ ディレクター 主にお客様とのやり取りを中心に開発工程を担当 企画・営業系 ディレクター 企画や要件定義など上流工程を担当 クリエイティブ ディレクター デザインやUIなどのクリエイティブ面を担当 プロジェクト マネージャー プロジェクトの計画と実⾏の責任者マネージャー プロジェクトの計画と実⾏の責任者 © IntelligentNet, Inc.
15. 15. いろいろなタイプのディレクター テクニカル 実装可否や導入技術などの仕様策定を担当 テクニカル ディレクター 実装可否や導入技術などの仕様策定を担当 開発進⾏・運⽤ ディレクター 主にお客様とのやり取りを中心に開発工程を担当 ディレクターの中でもディレクターの中でも 開発経験を持っている人が進みやすい。 © IntelligentNet, Inc.
16. 16. いろいろなタイプのディレクター 責任範囲が広がる 企画・営業 ディレクター 開発進⾏・運⽤ ディレクター コーダー プロジェクト マネージャー テクニカル ディレクター クリエイティブ ディレクターディレクター ディレクター アートディレ クター デザイナー © IntelligentNet, Inc.
17. 17. いろいろなタイプのディレクター コーダーが目指しやすいクラスチェンジ 企画・営業 ディレクター 開発進⾏・運⽤ ディレクター コーダー プロジェクト マネージャー テクニカル ディレクター クリエイティブ ディレクターディレクター ディレクター アートディレ クター デザイナー © IntelligentNet, Inc.
18. 18. そもそも どうやったらディレクターになれるの︖ そもそも どうやったらディレクターになれるの︖ © IntelligentNet, Inc.
19. 19. どうやったらディレクターになれるの︖ ディレクターとしての条件を満たすディレクターとしての条件を満たす © IntelligentNet, Inc.
20. 20. どうやったらディレクターになれるの︖ ディレクターとしての条件を満たす 周囲（上司）に認めさせる © IntelligentNet, Inc.
21. 21. どうやったらディレクターになれるの︖ スキル・能⼒ 周囲（上司）に認めさせる © IntelligentNet, Inc.
22. 22. どうやったらディレクターになれるの︖ 例えば例えば 開発進⾏を担当する開発進⾏を担当する デザイン・ワイヤーフレームのQAをするデザイン・ワイヤーフレームのQAをする 技術視点でのUIアイデアを出す スケジュールの提案をするスケジュールの提案をする etcetc © IntelligentNet, Inc.
23. 23. どうやったらディレクターになれるの︖ 開発工程 ディレクター IA コーダー 運⽤ フェーズ 開発 フェーズ 設計 フェーズ 企画・要件定義 フェーズ ワイヤーフレームを 提出した。 スケジュールを 提出した。 提出した。提出した。 クライアント © IntelligentNet, Inc.
24. 24. どうやったらディレクターになれるの︖ 開発工程 ディレクター IA コーダー 運⽤ フェーズ 開発 フェーズ 設計 フェーズ 企画・要件定義 フェーズ スケジュールを 提出した。 ワイヤーフレームを 提出した。 提出した。 クライアント 承認した。 © IntelligentNet, Inc.
25. 25. どうやったらディレクターになれるの︖ つまり 上流工程へのチャンレンジ上流工程へのチャンレンジ & 窓口担当窓口担当へのチャンレンジ © IntelligentNet, Inc.
26. 26. どうやったらディレクターになれるの︖ ディレクターとは 「判断⼒」と「折衝⼒」「判断⼒」と「折衝⼒」 がある人 © IntelligentNet, Inc.
27. 27. どうやったらディレクターになれるの︖ それを証明するとそれを証明すると © IntelligentNet, Inc.
28. 28. よろしい。では 今からよろしい。では 今から そなたは ディレクターじゃ︕ © IntelligentNet, Inc.
29. 29. 作れるディレクターの強み作れるディレクターの強み © IntelligentNet, Inc.
30. 30. 作れるディレクターの強み 作れるからこそ各工程の中身を 想像できます。想像できます。 © IntelligentNet, Inc.
31. 31. 作れるディレクターの強み 開発工程 運⽤開発設計企画・要件定義 運⽤ フェーズ 開発 フェーズ 設計 フェーズ 企画・要件定義 フェーズ •⾒積 •デザイン •ワイヤーフレーム •開発仕様書 •アクセス解析 •開発仕様書 各工程のほぼ全ての成果物を観る機会があり、 どんな成果物が開発フェーズに必要か知っている。どんな成果物が開発フェーズに必要か知っている。 © IntelligentNet, Inc.
32. 32. 作れるディレクターの強み 想像できると 各工程の「あるある」を防げます。各工程の「あるある」を防げます。 © IntelligentNet, Inc.
33. 33. 作れるディレクターの強み あるある1︓あるある1︓ 格安で受けてしまう格安で受けてしまう © IntelligentNet, Inc.
34. 34. 作れるディレクターの強み あるある1︓あるある1︓ 格安で受けてしまう格安で受けてしまう 実装方法まで検討できるので、実装方法まで検討できるので、 ⾒積の段階で⾒積ミスを防げる。 © IntelligentNet, Inc.
35. 35. 作れるディレクターの強み あるある2︓あるある2︓ 十分なスケジュールが確保されていない十分なスケジュールが確保されていない © IntelligentNet, Inc.
36. 36. 作れるディレクターの強み あるある2︓あるある2︓ 十分なスケジュールが確保されていない十分なスケジュールが確保されていない 実際にどれだけ時間が掛かるか、 工数を⾒積もれるので、工数を⾒積もれるので、 十分なスケジュールを確保できる。 © IntelligentNet, Inc.
37. 37. 作れるディレクターの強み あるある3︓あるある3︓ 実現不可能そうなUIが ワイヤーフレームに書かれているワイヤーフレームに書かれている © IntelligentNet, Inc.
38. 38. 作れるディレクターの強み あるある3︓あるある3︓ 実現不可能そうなUIが ワイヤーフレームに書かれているワイヤーフレームに書かれている 実装可能な方法を提案できる。実装可能な方法を提案できる。 © IntelligentNet, Inc.
39. 39. 作れるディレクターの弱み作れるディレクターの弱み © IntelligentNet, Inc.
40. 40. 作れるディレクターの弱み 作れるからこそ、陥るワナもあります。作れるからこそ、陥るワナもあります。 © IntelligentNet, Inc.
41. 41. なんと 宝箱は ワナだった︕なんと 宝箱は ワナだった︕ © IntelligentNet, Inc.
42. 42. 作れるディレクターの弱み ワナ1︓ ディレクションに徹しきれずディレクションに徹しきれず 手を動かしてしまう手を動かしてしまう ※運⽤中心案件だと良い場合もあります スケジュール調整やスコープ調整がスケジュール調整やスコープ調整が 後手に回る。 © IntelligentNet, Inc.
43. 43. 作れるディレクターの弱み ワナ2︓ワナ2︓ 簡単な実装など、安請け合いしてしまう簡単な実装など、安請け合いしてしまう チリも積もって、チリも積もって、 気がついてみたら工数を圧迫。 © IntelligentNet, Inc.
44. 44. 作れるディレクターの弱み ワナ3︓ワナ3︓ いつの間にか作らなくなっているいつの間にか作らなくなっている 最新の技術についていけない。最新の技術についていけない。 © IntelligentNet, Inc.
45. 45. 作れて強いディレクターに なるには︖ 作れて強いディレクターに なるには︖ © IntelligentNet, Inc.
46. 46. 作れて強いディレクターになるには︖ ワナ1︓ワナ1︓ 「手を動かしてしまう」対策「手を動かしてしまう」対策 © IntelligentNet, Inc.
47. 47. 作れて強いディレクターになるには︖ ワナ1︓ワナ1︓ 「手を動かしてしまう」対策「手を動かしてしまう」対策 •プロジェクトチーム編成•プロジェクトチーム編成 •クライアントと交渉 © IntelligentNet, Inc.
48. 48. プロジェクトチーム編成 受注額次第ですが 必ず作れる人 をアサインします。必ず作れる人（コーダー）をアサインします。 © IntelligentNet, Inc.
49. 49. プロジェクトチーム編成 × 悪い例 ディレクター兼 メインコーダー × 悪い例 メインコーダー デザイナー コーダーデザイナー コーダー 条件 • プロジェクト期間︓ 1ヶ月 • 受注額︓3人 x 20日 x 4万 = 240万程度• 受注額︓3人 x 20日 x 4万 = 240万程度 © IntelligentNet, Inc.
50. 50. プロジェクトチーム編成 ○ 良い例 ディレクター ○ 良い例 ディレクター メインコーダーデザイナー コーダーメインコーダーデザイナー コーダー 条件 • プロジェクト期間︓ 1ヶ月 • 受注額︓4人 x 20日 x 4万 = 320万程度• 受注額︓4人 x 20日 x 4万 = 320万程度 © IntelligentNet, Inc.
51. 51. プロジェクトチーム編成 プロジェクト ○ 良い例 プロジェクト マネージャー ○ 良い例 ディレクター兼 IAIA メインコーダーデザイナー コーダーメインコーダーデザイナー コーダー 条件条件 • プロジェクト期間︓2ヶ月 • 受注額︓5人 x 20日 x 4万 = 400万程度 ※稼働50%程度© IntelligentNet, Inc.
52. 52. クライアントと交渉 スケジュールが間に合わない時の対応はスケジュールが間に合わない時の対応は 納期を延ばす納期を延ばす スコープを削るスコープを削る 人を投入する の3つしかありません。の3つしかありません。 © IntelligentNet, Inc.
53. 53. クライアントと交渉 1. 納期を延ばす スコープを削る 納期を延ばす 2. スコープを削る 3. 人を投入する ※⾦額交渉とセット3. 人を投入する ※⾦額交渉とセット の順番でクライアントと交渉します。 © IntelligentNet, Inc.
54. 54. 作れて強いディレクターになるには︖ ワナ2︓ワナ2︓ 「安請け合いしてしまう」対策「安請け合いしてしまう」対策 © IntelligentNet, Inc.
55. 55. 作れて強いディレクターになるには︖ ワナ2︓ワナ2︓ 「安請け合いしてしまう」対策「安請け合いしてしまう」対策 抜け目なく⾒積もる。抜け目なく⾒積もる。 © IntelligentNet, Inc.
56. 56. 抜け目なく⾒積もる ⾒積項目から抜けてませんか︖⾒積項目から抜けてませんか︖ ディレクション工数ディレクション工数 テスト工数テスト工数 テストアップ・本番アップ工数 ソース管理工数ソース管理工数 etcetc © IntelligentNet, Inc.
57. 57. 抜け目なく⾒積もる 1Pページ制作 • 社内ディレクション︓30分 • コーディング︓4時間• コーディング︓4時間 • ブラウザテスト︓ 30分 • テストアップ報告︓15分• テストアップ報告︓15分 • フィードバック対応︓1時間 • 再テストアップ報告︓15分• 再テストアップ報告︓15分 • 本アップ報告︓15分 • その間の待ち時間など• その間の待ち時間など etc © IntelligentNet, Inc.
58. 58. 抜け目なく⾒積もる 全ての時間が⾒積対象です。全ての時間が⾒積対象です。 © IntelligentNet, Inc.
59. 59. 作れて強いディレクターになるには︖ ワナ3︓ワナ3︓ 「いつの間にか作らなくなっている」対策 © IntelligentNet, Inc.
60. 60. 作れて強いディレクターになるには︖ ワナ3︓ワナ3︓ 「いつの間にか作らなくなっている」対策 自分のサイトを作ってみよう。自分のサイトを作ってみよう。 © IntelligentNet, Inc.
61. 61. 自分のサイトを作ってみよう 私的な例で恐縮ですが私的な例で恐縮ですが http://www.kaigaidrama.jp/ © IntelligentNet, Inc.
62. 62. 自分のサイトを作ってみよう 趣味のデータベースを作るのが趣味のデータベースを作るのが おすすめ。おすすめ。 趣味として楽しく続けられます。 © IntelligentNet, Inc.
63. 63. 自分のサイトを作ってみよう 運営で身についたスキル運営で身についたスキル HTML5、CSS3 PHPPHP JavaScript（jQuery） IA（UX/UI） SEOSEO コンテンツライティング デザイントレンドデザイントレンド SNS Google アナリティクス etcetc © IntelligentNet, Inc.
64. 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.
65. 65. さらに強いディレクターへの ステップアップ さらに強いディレクターへの ステップアップ © IntelligentNet, Inc.
66. 66. ステップアップ 目指すのは目指すのは 尖ったスキルのあるゼネラリスト © IntelligentNet, Inc.
67. 67. いろいろなタイプのディレクター 企画・営業 ディレクター 開発進⾏・運⽤ ディレクター コーダー プロジェクト マネージャーディレクターディレクター コーダー マネージャー テクニカル ディレクター クリエイティブ ディレクター アートディレ クター デザイナー クター デザイナー このディレクターの方達がサーバーサイドのこのディレクターの方達がサーバーサイドの 事など分かっていると割と無敵です。 © IntelligentNet, Inc.
68. 68. ステップアップ 手の出しやすいスキルと手の出しやすいスキルと 市場から求められているスキルを考える。市場から求められているスキルを考える。 ここがベスト 手が出しやすい 市場 © IntelligentNet, Inc.
69. 69. ステップアップ 作れるディレクターが手の出しやすいスキル PHP・MYSQL・ CMS JavaScriptJavaScript IA SEOSEO PMBOK etcetc © IntelligentNet, Inc.
70. 70. ステップアップ 市場市場 コンテンツ・マーケティングコンテンツ・マーケティング JavaScript サーバサイド言語サーバサイド言語 CMSCMS スマートフォンアプリ etcetc © IntelligentNet, Inc.
71. 71. ステップアップ 狙いたいスキル狙いたいスキル コンテンツ・マーケティングコンテンツ・マーケティング JavaScript サーバサイド言語サーバサイド言語 CMSCMS スマートフォンアプリ etcetc © IntelligentNet, Inc.
72. 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.
73. 73. まとめまとめ © IntelligentNet, Inc.
74. 74. まとめ 作れるディレクターとは︖作れるディレクターとは︖ © IntelligentNet, Inc.
75. 75. まとめ プロジェクトの⼤部分をカバーできる オールラウンダーオールラウンダー © IntelligentNet, Inc.
76. 76. まとめ いきなりディレクターにはない 「作れる」という強みがあります。「作れる」という強みがあります。 © IntelligentNet, Inc.
77. 77. まとめ プロジェクトを成功に導ける 「WEB業界の勇者︕」です。「WEB業界の勇者︕」です。 © IntelligentNet, Inc.
78. 78. まとめ そんな方を求めています。そんな方を求めています。 ↓↓ http://www.ini.co.jp/jobs/ © IntelligentNet, Inc.
79. 79. まとめ ご静聴ありがとうございました。 ご感想やご質問はこちらまで頂けますと幸いです。ご感想やご質問はこちらまで頂けますと幸いです。 ↓ Facebook︓https://www.facebook.com/sumithsonianFacebook︓https://www.facebook.com/sumithsonian Twitter︓https://twitter.com/sumithsonian © IntelligentNet, Inc.