Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次
Next

Share

ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮

  1. 1. ウェブディレクションの基礎 制作・開発編 日本ディレクション協会 小嶋 裕亮
  2. 2. 企業向けのクライアントワークを中心に制 作を行ってきた。 オペレータ、デザイナー、エンジニアを経 て、フリーランスのディレクターに。 2013年10月より、株式会社リンケイジア ジャパン UXセンター センター長に就任。 所属: 自己紹介 日本ディレクション協会 株式会社リンケイジアジャパン 小嶋 裕亮
  3. 3. 講義:60分(うち質問15分) 質疑応答:30分
  4. 4. 制作・開発編 ウェブディレクションの基礎
  5. 5. 扱う範囲 設計→開発→運用
  6. 6. 扱う範囲 設計→開発→運用
  7. 7. 質問です。 現役のディレクターさんに質問です。 開発フェーズで、 一番重要視していることは何ですか?
  8. 8. 今日やることについて WBSのやり方、ガントチャートの使い方、 ワイヤーの書き方、スケジューリングのコ ツ、QAなどなど…
  9. 9. 今日やることについて WBSのやり方、ガントチャートの使い方、 ワイヤーの書き方、スケジューリングのコ ツ、QAなどなど… 今日はやりません。
  10. 10. Tipsを覚えても プロジェクトは回らない。
  11. 11. ディレクションとは プロジェクト全体を 把握すること。
  12. 12. そのためにやることは コミュニケーションの構築。
  13. 13. 質問です。 • ウェブサイトを作るときにディレクター がやることを、思いつく限り挙げてみて ください。
  14. 14. やっていること • 電話連絡 • メール書く • ワイヤーを切る • 小言を言う
  15. 15. やっていること • 電話連絡がディレクション? • メール書くのがディレクション? • ワイヤーを切るのがディレクション? • 小言を言うのはディレクション?
  16. 16. 果たす役割で考えてみよう
  17. 17. ディレクターの役割 • 計画に基づいて • 工程を管理する
  18. 18. ディレクターの役割 • 計画に基づいて →それぞれの目標を明確にして • 工程を管理する →誰が、いつ、何を作るかを決め、 その通りに進めること
  19. 19. ディレクションの役割 • 計画に基づいて →それぞれの目標を明確にして • 工程を管理する →誰が、いつ、何を作るかを決め、 その通りに進めること コミュニケーションで実現
  20. 20. タスク意味 • ワイヤーを切る・小言を言う • メールのやり取り・電話応対
  21. 21. タスク意味 • ワイヤーを切る・小言を言う →目的・目標の共有・管理 • メールのやり取り・電話応対 →やりとりの交通整理
  22. 22. 人と人をつなげる
  23. 23. 質問です。 • どんな職業の人が、ウェブサイトを作る のに参加しているでしょうか?思いつく 限り挙げてみてください。
  24. 24. 関わる人 デザイナー イラスト レーター フォトグラ ファー ライター クライアント アート ディレクター SE プログラマー マークアップ エンジニア
  25. 25. 関わる人 デザイナー イラスト レーター フォトグラ ファー ライター クライアント アート ディレクター SE プログラマー マークアップ エンジニア
  26. 26. ディレクション デザイナー イラスト レーター フォトグラ ファー ライター クライアント アート ディレクター SE プログラマー マークアップ エンジニア みんな~、 あっちいくよ~ 目標
  27. 27. 工程と工程をつなげる
  28. 28. 質問です。 開発フェーズでやること(工程)には どんなものがあるでしょうか?思いつ く限り挙げてみてください。 サイト全体の設計は終わったものとします。
  29. 29. 開発フロー ライティング デザイン マークアップ プログラミング スケジュール WBS 画面仕様書の作成 素材手配
  30. 30. ディレクション ライティング デザイン マークアップ プログラミング スケジュール WBS 画面仕様書の作成 素材手配
  31. 31. ディレクション ライティング デザイン マークアップ プログラミング スケジュール WBS 画面仕様書の作成 素材手配 進捗管理 クオリティマネジメント
  32. 32. ディレクションの考え方 • 誰に対して • 何を • いつ • どう伝えるのか • なにをするのか • どんなツールを 使うのか
  33. 33. 組織の形によってやるべきこと は変わる
  34. 34. 一人での制作の特徴 クライアント デザイナー
  35. 35. 小規模チームの特徴 クライアント ディレクター デザイナー プログラマー デザイナーで賄いきれない、 顧客対応やプログラミング をプロが補うように。
  36. 36. 中規模チームの特徴 クライアント 広告代理店 各工程の分業が進み、専門技術 の質が上がり、各工程内での作 業効率があがるはずだが…
  37. 37. 実例1
  38. 38. 実例1 コミュニケーション量は増えるが、 まだ単純。
  39. 39. 実例2
  40. 40. 実例2 専門性は高くなり、各工程の作業効率は あがるが、コミュニケーションが複雑化
  41. 41. 実例2 複雑すぎるコミュニケーションを裁く ので手一杯に。。。
  42. 42. 共通する役割 • 不要なやり取りをなくすこと。 • 技術者が無駄な判断をしなくてよいよう にすること。
  43. 43. 質問です。 技術者と話をするとき、気を付けてい ることは何ですか?
  44. 44. コミュニケーションを加速させ るツール
  45. 45. チャート
  46. 46. 画面仕様書と修正指示書 • 指示内容指示内容指示内容 • 指示内容指示内容 • 指示内容指示内容指示 • 指示内容指示内容指示内容指示内容 • 指示内容指示内容指示内容 • 指示内容指示内容 • 指示内容指示内容指示 • 指示内容指示内容指示内容指示内容
  47. 47. コーディングチェック コードチェック • ファイルのエンコードと改行コード • バリデータでの文法チェック • リンクの指定方法のチェック • JavaScriptのエラーの有無のチェック ブラウザチェック • デザインを再現できているかのチェック • 対応ブラウザでの表示チェック • ブラウザで拡大縮小した場合の表示チェック コンテンツチェック • 文字校正 画像 • 画像の表示漏れチェック • 画像のサイズ指定のチェック • ALT指定のチェック リンク • ハイパーリンクのチェック クオリティチェックリスト デザインチェック
  48. 48. 工程自体も設計しよう
  49. 49. ウォーターフォルモデルとは ワイヤー ライティング デザイン 構築 デバック 時系列 開発工程 過去は振り返ら ない主義なんだ。 一度工程が完了したら、変更は起こらない前提。
  50. 50. 現実の工程 ワイヤー ライティング デザイン 構築 デバック 時系列 開発工程 動かないと わからないよ えっ… 構成よくないね。 変えて。 お客さんはある程度形になるまで判断できないので、ブレやすい。 過去は振り返ら ない主義… さっさと作って 細かい事いいから、 早く作ってよ。
  51. 51. 外部委託による分断 ワイヤー ライティング デザイン 構築 デバック 時系列 開発工程
  52. 52. やることそのものを疑え • 何をやるべきかではなく、どうあるべき かをまず考えること。 • やっていることが本当に最適なのかを考 えること。
  53. 53. コミュニケーションで 仕組みをつくろう
  54. 54. ありがとうございました
  55. 55. Report • 開発の現場で解決したい問題を教えてく ださい。
  56. 56. https://www.facebook.com/direkyo.org 日本ディレクション協会
  • miccinakatani

    Jan. 24, 2020
  • takufuruya7

    Aug. 12, 2015
  • ssuser962e16

    Aug. 4, 2015
  • Skotaro

    Jul. 10, 2015
  • takashitoriuchi

    Jul. 10, 2015
  • tokuriki

    Jul. 10, 2015
  • stylethewalker

    Jun. 22, 2015
  • kazukiiwai

    Aug. 29, 2014
  • NinaNakata

    Feb. 12, 2014
  • keisuke_rai

    Jan. 23, 2014
  • takab_slide

    Nov. 6, 2013
  • takaonakano12

    Oct. 10, 2013
  • takahashinoriyuki

    Oct. 9, 2013
  • yuichirohayashi

    Oct. 9, 2013
  • koolweb37

    Oct. 9, 2013
  • HokutoKato

    Oct. 9, 2013
  • gotoand

    Oct. 9, 2013
  • misakiokajima9

    Oct. 9, 2013
  • barista

    Oct. 9, 2013

Views

Total views

3,235

On Slideshare

0

From embeds

0

Number of embeds

637

Actions

Downloads

0

Shares

0

Comments

0

Likes

19

×