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

Contenu connexe

Tendances

Webディレクション講座 - 初級編 -
Webディレクション講座  - 初級編 -Webディレクション講座  - 初級編 -
Webディレクション講座 - 初級編 -Colorkrew
 
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセットSatoru MURAKOSHI
 
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しようCSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しようMasayuki Abe
 
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)Hiroyuki Ogawa
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン力也 伊原
 
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之schoowebcampus
 
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールINFOBAHN.inc(株式会社インフォバーン)
 
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道schoowebcampus
 
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎Hiroyuki Ogawa
 
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザインコンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザインToshihiko Yamakami
 
レスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフローレスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフローHiroyuki Ogawa
 
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディプロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ力也 伊原
 
岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでーNozomi Sawada
 
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮schoowebcampus
 
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまでYusuke Tamukai
 
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックAkiko Kurono
 
Web制作者に向けた学習セルフマネジメントのすすめ(現状を把握する)
Web制作者に向けた学習セルフマネジメントのすすめ(現状を把握する)Web制作者に向けた学習セルフマネジメントのすすめ(現状を把握する)
Web制作者に向けた学習セルフマネジメントのすすめ(現状を把握する)Mariko Hayashi
 
ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次
ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次
ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次schoowebcampus
 
レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-CREATIVE SURVEY
 
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎masaaki komori
 

Tendances (20)

Webディレクション講座 - 初級編 -
Webディレクション講座  - 初級編 -Webディレクション講座  - 初級編 -
Webディレクション講座 - 初級編 -
 
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
 
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しようCSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
 
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
 
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
 
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
 
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
 
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
 
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザインコンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
 
レスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフローレスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフロー
 
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディプロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ
 
岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー
 
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
 
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで
 
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
 
Web制作者に向けた学習セルフマネジメントのすすめ(現状を把握する)
Web制作者に向けた学習セルフマネジメントのすすめ(現状を把握する)Web制作者に向けた学習セルフマネジメントのすすめ(現状を把握する)
Web制作者に向けた学習セルフマネジメントのすすめ(現状を把握する)
 
ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次
ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次
ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次
 
レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-
 
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
 

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

UXデザイン✕アジャイル✕受託開発
UXデザイン✕アジャイル✕受託開発UXデザイン✕アジャイル✕受託開発
UXデザイン✕アジャイル✕受託開発Takuya Kitamura
 
プログルの現在とこれから プログルリリースイベント 2017/5/13
プログルの現在とこれから プログルリリースイベント 2017/5/13プログルの現在とこれから プログルリリースイベント 2017/5/13
プログルの現在とこれから プログルリリースイベント 2017/5/13Tanaka Takaaki
 
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
「関心の分離」と「疎結合」   ソフトウェアアーキテクチャのひとかけら「関心の分離」と「疎結合」   ソフトウェアアーキテクチャのひとかけら
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけらAtsushi Nakamura
 
第7回SIA研究会(例会)プレゼン資料 油野様
第7回SIA研究会(例会)プレゼン資料 油野様第7回SIA研究会(例会)プレゼン資料 油野様
第7回SIA研究会(例会)プレゼン資料 油野様Tae Yoshida
 
Html5fun@東京 Bootstrapにアニメーションを付けよう
Html5fun@東京 Bootstrapにアニメーションを付けようHtml5fun@東京 Bootstrapにアニメーションを付けよう
Html5fun@東京 Bootstrapにアニメーションを付けようMasayuki Abe
 
Upwind Technology, Inc. Company Profile(Japanese)
Upwind Technology, Inc. Company Profile(Japanese)Upwind Technology, Inc. Company Profile(Japanese)
Upwind Technology, Inc. Company Profile(Japanese)Upwind Technology Inc.
 
[テックタッチ株式会社]第05回 Customer系エンジニア座談会.pdf
[テックタッチ株式会社]第05回 Customer系エンジニア座談会.pdf[テックタッチ株式会社]第05回 Customer系エンジニア座談会.pdf
[テックタッチ株式会社]第05回 Customer系エンジニア座談会.pdfKizuKirai
 
失敗しない仮想化環境の設計・構築法
失敗しない仮想化環境の設計・構築法失敗しない仮想化環境の設計・構築法
失敗しない仮想化環境の設計・構築法VirtualTech Japan Inc.
 
企画から考えるエンジニアチームの作り方
企画から考えるエンジニアチームの作り方企画から考えるエンジニアチームの作り方
企画から考えるエンジニアチームの作り方創史 花村
 
応用情報・午後・ストラテジ系を解く(H21秋)
応用情報・午後・ストラテジ系を解く(H21秋)応用情報・午後・ストラテジ系を解く(H21秋)
応用情報・午後・ストラテジ系を解く(H21秋)higher_tomorrow
 
altJSの選び方
altJSの選び方altJSの選び方
altJSの選び方terurou
 
2020/10/07求人ステーションpresents 「兼業・副業人材活用SHOW!」(IT・デジタル化編)株式会社ワークデザイン様投影資料
2020/10/07求人ステーションpresents 「兼業・副業人材活用SHOW!」(IT・デジタル化編)株式会社ワークデザイン様投影資料2020/10/07求人ステーションpresents 「兼業・副業人材活用SHOW!」(IT・デジタル化編)株式会社ワークデザイン様投影資料
2020/10/07求人ステーションpresents 「兼業・副業人材活用SHOW!」(IT・デジタル化編)株式会社ワークデザイン様投影資料プロフェッショナル&パラレルキャリア・フリーランス協会
 
エンジニアのキャリアを考える
エンジニアのキャリアを考えるエンジニアのキャリアを考える
エンジニアのキャリアを考えるMKT International Inc.
 
Git hubenterpriseを導入してみて
Git hubenterpriseを導入してみてGit hubenterpriseを導入してみて
Git hubenterpriseを導入してみてrecotech
 
180731 JAWS UG京都 KYOSO part
180731 JAWS UG京都 KYOSO part180731 JAWS UG京都 KYOSO part
180731 JAWS UG京都 KYOSO partdaichi goto
 
サンタクロースを支えるIT技術 @M_Ishikawa #yapcasia
サンタクロースを支えるIT技術 @M_Ishikawa #yapcasiaサンタクロースを支えるIT技術 @M_Ishikawa #yapcasia
サンタクロースを支えるIT技術 @M_Ishikawa #yapcasiaMasayuki Ishikawa
 
それぞれの10年〜これからの10年 DevLOVE X LT
それぞれの10年〜これからの10年 DevLOVE X LTそれぞれの10年〜これからの10年 DevLOVE X LT
それぞれの10年〜これからの10年 DevLOVE X LTYasufumi Moritake
 

Similaire à Webディレクター~強みを活かすディレクション術~ (20)

UXデザイン✕アジャイル✕受託開発
UXデザイン✕アジャイル✕受託開発UXデザイン✕アジャイル✕受託開発
UXデザイン✕アジャイル✕受託開発
 
プログルの現在とこれから プログルリリースイベント 2017/5/13
プログルの現在とこれから プログルリリースイベント 2017/5/13プログルの現在とこれから プログルリリースイベント 2017/5/13
プログルの現在とこれから プログルリリースイベント 2017/5/13
 
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
「関心の分離」と「疎結合」   ソフトウェアアーキテクチャのひとかけら「関心の分離」と「疎結合」   ソフトウェアアーキテクチャのひとかけら
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
 
広告における機械学習の適用例とシステムについて
広告における機械学習の適用例とシステムについて広告における機械学習の適用例とシステムについて
広告における機械学習の適用例とシステムについて
 
第7回SIA研究会(例会)プレゼン資料 油野様
第7回SIA研究会(例会)プレゼン資料 油野様第7回SIA研究会(例会)プレゼン資料 油野様
第7回SIA研究会(例会)プレゼン資料 油野様
 
Html5fun@東京 Bootstrapにアニメーションを付けよう
Html5fun@東京 Bootstrapにアニメーションを付けようHtml5fun@東京 Bootstrapにアニメーションを付けよう
Html5fun@東京 Bootstrapにアニメーションを付けよう
 
Upwind Technology, Inc. Company Profile(Japanese)
Upwind Technology, Inc. Company Profile(Japanese)Upwind Technology, Inc. Company Profile(Japanese)
Upwind Technology, Inc. Company Profile(Japanese)
 
[テックタッチ株式会社]第05回 Customer系エンジニア座談会.pdf
[テックタッチ株式会社]第05回 Customer系エンジニア座談会.pdf[テックタッチ株式会社]第05回 Customer系エンジニア座談会.pdf
[テックタッチ株式会社]第05回 Customer系エンジニア座談会.pdf
 
失敗しない仮想化環境の設計・構築法
失敗しない仮想化環境の設計・構築法失敗しない仮想化環境の設計・構築法
失敗しない仮想化環境の設計・構築法
 
企画から考えるエンジニアチームの作り方
企画から考えるエンジニアチームの作り方企画から考えるエンジニアチームの作り方
企画から考えるエンジニアチームの作り方
 
応用情報・午後・ストラテジ系を解く(H21秋)
応用情報・午後・ストラテジ系を解く(H21秋)応用情報・午後・ストラテジ系を解く(H21秋)
応用情報・午後・ストラテジ系を解く(H21秋)
 
altJSの選び方
altJSの選び方altJSの選び方
altJSの選び方
 
2020/10/07求人ステーションpresents 「兼業・副業人材活用SHOW!」(IT・デジタル化編)株式会社ワークデザイン様投影資料
2020/10/07求人ステーションpresents 「兼業・副業人材活用SHOW!」(IT・デジタル化編)株式会社ワークデザイン様投影資料2020/10/07求人ステーションpresents 「兼業・副業人材活用SHOW!」(IT・デジタル化編)株式会社ワークデザイン様投影資料
2020/10/07求人ステーションpresents 「兼業・副業人材活用SHOW!」(IT・デジタル化編)株式会社ワークデザイン様投影資料
 
エンジニアのキャリアを考える
エンジニアのキャリアを考えるエンジニアのキャリアを考える
エンジニアのキャリアを考える
 
Git hubenterpriseを導入してみて
Git hubenterpriseを導入してみてGit hubenterpriseを導入してみて
Git hubenterpriseを導入してみて
 
Jawsug kyoso
Jawsug kyosoJawsug kyoso
Jawsug kyoso
 
180731 JAWS UG京都 KYOSO part
180731 JAWS UG京都 KYOSO part180731 JAWS UG京都 KYOSO part
180731 JAWS UG京都 KYOSO part
 
サンタクロースを支えるIT技術 @M_Ishikawa #yapcasia
サンタクロースを支えるIT技術 @M_Ishikawa #yapcasiaサンタクロースを支えるIT技術 @M_Ishikawa #yapcasia
サンタクロースを支えるIT技術 @M_Ishikawa #yapcasia
 
SIAI2020
SIAI2020SIAI2020
SIAI2020
 
それぞれの10年〜これからの10年 DevLOVE X LT
それぞれの10年〜これからの10年 DevLOVE X LTそれぞれの10年〜これからの10年 DevLOVE X LT
それぞれの10年〜これからの10年 DevLOVE X LT
 

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

Notes de l'éditeur

  1. ・19:30~19:35:講師自己紹介(5分) ・19:35~21:00:講義(85分) ・21:00~21:10:質疑応答(10分) ・21:20~21:40:名刺交換、懇親会(20分)
  2. 日本一レアな県民です。 それだけで本日お越し頂いた価値があるのではないかと
  3. ということで、私も元々コーダーとして作る人だった経験をお話ししたいと思います。
  4. 19:35
  5. 分野を限定しない広範囲な知識・技術・経験を持つ人。
  6. 特定分野に深い知識や優れた技術をもった人。専門家。
  7. 19:50
  8. プログラマ、SE系は別として、 PMやプロデューサーやIAになるひと、コーダーは経験しておいた方が良い。
  9. だいたいこんな感じでクラスチェンジしていきます。
  10. だいたいこんな感じでクラスチェンジしていきます。
  11. 20:00
  12. 品質保証 (Quality Assurance:クオリティアシュアランス) 
  13. ■企画・要件定義 見積 プロジェクト計画(WBSなど) 体制 企画・要件定義書 ■設計フェーズ ペルソナ カスタマージャーニー ユーザーシナリオ 概要設計 詳細設計 サイトマップ ワイヤーフレーム ファイルリスト デザイン ■開発 Html・css デザイン Cms システム 単体テスト仕様書 結合テスト仕様書 テスト ガイドライン
  14. ・各工程の責任をもつ人、成果物や状況を判断する ・お客さんとの窓口になる人
  15. 20:10
  16. 営業さんが格安でとってきたということは良く聞く話。 コーディング1P、1万円きってるよー。 ディレクションが抜けてる テストがない
  17. これも営業さんが(ry
  18. 20:20
  19. 20:10
  20. 20:30
  21. この場合は金額的に、一人のコーダーですむ案件のはず。 もしコーダー二人必要なようなら、見積がおかしい可能性がある 私も初の大きめな案件の時はベースコーディングしながらディレクションをしていた。 死にそうになりました。 特にフィードバック対応時が大変になります。
  22. 人を投入するは ・土日稼働、時間外稼働 ・ディレクターがコーダーとして動く など
  23. 前提条件と制約条件
  24. 合計:6時間45分 複数案件を抱えていたらさらに時間がかかる。
  25. 20:40
  26. Amzon apiとかが面白い Dmm api 楽天 api 画像系だと bing、ニュースや動画も取得できる
  27. 森田さんの「オカンでも分かるIA」
  28. 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
  29. だいたいこんな感じでクラスチェンジしていきます。
  30. 20:50 PHP: Hypertext Preprocessor(ピー・エイチ・ピー ハイパーテキスト プリプロセッサー) ドットインストール