Webディレクター～強みを活かすディレクション術～
•
57 likes•16,024 views
パソナテックさん主催コミュニティ「SHIBUYA☆LABU」のイベントの際のスライドです。 https://shibuya-labu-pt.doorkeeper.jp/events/30744 現在Web制作の現場において、コーダーとしてお仕事されているみなさん、今後のご自身のキャリアマップは描けていますでしょうか？ 専門的なフロント知識を活かして技術を極めていくのか、それともディレクターとしてキャリアを積んでいくのか悩まれている方も多いかと思います。 もしディレクターへのキャリアを考えているそんなあなたに！ ご自身の制作経験や強みを活かして、作れるディレクターとして活躍できるディレクション術をお伝えいたします！
Webディレクター～強みを活かすディレクション術～
- 2. 自己紹介 角 雄崇角 雄崇（すみ ゆたか） 1977年⽣まれの37歳1977年⽣まれの37歳 鳥取県⽣まれ ※総人口57万人（杉並区と同じぐらい）※総人口57万人（杉並区と同じぐらい） ※日本の総人口の0.4% インテリジェントネット 株式会社勤務 インテリジェントネット 株式会社勤務 WEBディレクター © IntelligentNet, Inc.
- 3. 自己紹介 • 1977年、鳥取で⽣を受ける • 1997年、京都精華⼤学 芸術学部造形学科版画専攻に入学 年、⼤学卒業後アニメータを目指し上京 「 」に入社• 2001年、⼤学卒業後アニメータを目指し上京 「 STUDIO4℃」に入社 『アニマトリックス』『マインドゲーム』などちょっとマニアックな作品 に関わりつつ、諸事情から転職に関わりつつ、諸事情から転職 • 2005年、「インテリジェントネット」にアルバイトのコーダーとして入社 • 2015年、現在はゼネラルマネージャとして業務遂⾏中 • 趣味は海外ドラマで「海外ドラマJP DRACO」を運営中 © IntelligentNet, Inc.
- 5. 作る人のキャリアパスって︖ WEB プロジェクトWEB ディレクター プロジェクト マネージャー コーダー インフォメーション アーキテクト プロデューサー コーダー マークアップ エンジニア フロントエンドエン ジニア プログラマ SEプログラマ SE etcetc © IntelligentNet, Inc.
- 6. 作る人のキャリアパスって︖ WEB プロジェクトWEB ディレクター プロジェクト マネージャー コーダー インフォメーション アーキテクト プロデューサー コーダー マークアップ エンジニア フロントエンドエン ジニア プログラマ SE ゼネラリストプログラマ SE etc ゼネラリスト 幅広い範囲をカバーする人 etc 幅広い範囲をカバーする人 © IntelligentNet, Inc.
- 8. 作る人のキャリアパスって︖ WEB プロジェクトスペシャリストWEB ディレクター プロジェクト マネージャー スペシャリスト 専門性を突き詰める人 コーダー インフォメーション アーキテクト プロデューサー コーダー マークアップ エンジニア フロントエンドエン ジニア プログラマ SEプログラマ SE etcetc © IntelligentNet, Inc.
- 10. 作る人のキャリアパスって︖ WEB プロジェクトWEB ディレクター プロジェクト マネージャー コーダー インフォメーション アーキテクトコーダーはWEB業界の「基本職」 コーダー マークアップ エンジニア フロントエンドエン ジニア ゼネラリスト、スペシャリスト どちらにも進める可能性があります。 プログラマ SEプログラマ SE etcetc © IntelligentNet, Inc.
- 11. 作る人のキャリアパスって︖ WEB プロジェクトWEB ディレクター プロジェクト マネージャー コーダー インフォメーション アーキテクト プロデューサー コーダー マークアップ エンジニア フロントエンドエン ジニア プログラマ SE本日はこちらのディレクター向けのプログラマ SE etc 本日はこちらのディレクター向けの お話しです。 etc © IntelligentNet, Inc.
- 23. どうやったらディレクターになれるの︖ 開発工程 ディレクター IA コーダー 運⽤ フェーズ 開発 フェーズ 設計 フェーズ 企画・要件定義 フェーズ ワイヤーフレームを 提出した。 スケジュールを 提出した。 提出した。提出した。 クライアント © IntelligentNet, Inc.
- 24. どうやったらディレクターになれるの︖ 開発工程 ディレクター IA コーダー 運⽤ フェーズ 開発 フェーズ 設計 フェーズ 企画・要件定義 フェーズ スケジュールを 提出した。 ワイヤーフレームを 提出した。 提出した。 クライアント 承認した。 © IntelligentNet, Inc.
- 28. よろしい。では 今からよろしい。では 今から そなたは ディレクターじゃ︕ © IntelligentNet, Inc.
- 31. 作れるディレクターの強み 開発工程 運⽤開発設計企画・要件定義 運⽤ フェーズ 開発 フェーズ 設計 フェーズ 企画・要件定義 フェーズ •⾒積 •デザイン •ワイヤーフレーム •開発仕様書 •アクセス解析 •開発仕様書 各工程のほぼ全ての成果物を観る機会があり、 どんな成果物が開発フェーズに必要か知っている。どんな成果物が開発フェーズに必要か知っている。 © IntelligentNet, Inc.
- 41. なんと 宝箱は ワナだった︕なんと 宝箱は ワナだった︕ © 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.
- 53. クライアントと交渉 1. 納期を延ばす スコープを削る 納期を延ばす 2. スコープを削る 3. 人を投入する ※⾦額交渉とセット3. 人を投入する ※⾦額交渉とセット の順番でクライアントと交渉します。 © IntelligentNet, Inc.
- 55. 作れて強いディレクターになるには︖ ワナ2︓ワナ2︓ 「安請け合いしてしまう」対策「安請け合いしてしまう」対策 抜け目なく⾒積もる。抜け目なく⾒積もる。 © IntelligentNet, Inc.
- 57. 抜け目なく⾒積もる 1Pページ制作 • 社内ディレクション︓30分 • コーディング︓4時間• コーディング︓4時間 • ブラウザテスト︓ 30分 • テストアップ報告︓15分• テストアップ報告︓15分 • フィードバック対応︓1時間 • 再テストアップ報告︓15分• 再テストアップ報告︓15分 • 本アップ報告︓15分 • その間の待ち時間など• その間の待ち時間など etc © IntelligentNet, Inc.
- 60. 作れて強いディレクターになるには︖ ワナ3︓ワナ3︓ 「いつの間にか作らなくなっている」対策 自分のサイトを作ってみよう。自分のサイトを作ってみよう。 © 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.
- 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.
Editor's Notes
- ・19:30～19:35：講師自己紹介（5分）・19:35～21:00：講義（85分）・21:00～21:10：質疑応答（10分）・21:20～21:40：名刺交換、懇親会(20分）
- 日本一レアな県民です。 それだけで本日お越し頂いた価値があるのではないかと
- ということで、私も元々コーダーとして作る人だった経験をお話ししたいと思います。
- 19:35
- 分野を限定しない広範囲な知識・技術・経験を持つ人。
- 特定分野に深い知識や優れた技術をもった人。専門家。
- 19:50
- プログラマ、SE系は別として、 PMやプロデューサーやIAになるひと、コーダーは経験しておいた方が良い。
- だいたいこんな感じでクラスチェンジしていきます。
- だいたいこんな感じでクラスチェンジしていきます。
- 20:00
- 品質保証 (Quality Assurance：クオリティアシュアランス)
- ■企画・要件定義 見積 プロジェクト計画（WBSなど） 体制 企画・要件定義書 ■設計フェーズ ペルソナ カスタマージャーニー ユーザーシナリオ 概要設計 詳細設計 サイトマップ ワイヤーフレーム ファイルリスト デザイン ■開発 Html・css デザイン Cms システム 単体テスト仕様書 結合テスト仕様書 テスト ガイドライン
- ・各工程の責任をもつ人、成果物や状況を判断する ・お客さんとの窓口になる人
- 20:10
- 営業さんが格安でとってきたということは良く聞く話。 コーディング1P、1万円きってるよー。 ディレクションが抜けてる テストがない
- これも営業さんが(ry
- 20:20
- 20:10
- 20:30
- この場合は金額的に、一人のコーダーですむ案件のはず。 もしコーダー二人必要なようなら、見積がおかしい可能性がある 私も初の大きめな案件の時はベースコーディングしながらディレクションをしていた。 死にそうになりました。 特にフィードバック対応時が大変になります。
- 人を投入するは ・土日稼働、時間外稼働 ・ディレクターがコーダーとして動く など
- 前提条件と制約条件
- 合計：6時間45分 複数案件を抱えていたらさらに時間がかかる。
- 20:40
- Amzon apiとかが面白い Dmm api 楽天 api 画像系だと bing、ニュースや動画も取得できる
- 森田さんの「オカンでも分かるIA」
- IA：おかんでもわかるUXデザイン Ver.0.4 http://www.slideshare.net/securecat/ux-version-04 IA：IAシンキング http://www.amazon.co.jp/IA%E3%82%B7%E3%83%B3%E3%82%AD%E3%83%B3%E3%82%B0-Web%E5%88%B6%E4%BD%9C%E8%80%85%E3%83%BB%E6%8B%85%E5%BD%93%E8%80%85%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AEIA%E6%80%9D%E8%80%83%E8%A1%93-%E5%9D%82%E6%9C%AC-%E8%B2%B4%E5%8F%B2/dp/4862671063
- だいたいこんな感じでクラスチェンジしていきます。
- 20:50 PHP: Hypertext Preprocessor（ピー・エイチ・ピー ハイパーテキスト プリプロセッサー） ドットインストール