Web制作現場のディレクションを支えるGitHub

Transcript

1. 1.

   chatbox.inc 後藤 知宏 Web 制作現場のディレクションを支 える GitHub

2. 2.

   chatbox.inc 後 藤 知 宏 株式会社chatbox 代表取締役 関西フロントエンドUG代表 Twitter :

   @_mikakane エンジニア / 技術顧問
3. 3.

   chatbox.inc ディレクション ある程度の規模のWeb制作には欠かせない立ち位置 本当に必要？

4. 4.

   chatbox.inc ディレクターの職責は？ Designer Client Coder Director デザインの作成 UI の検討 要求出し

   運用評価 コーディング 実装 ？？？
5. 5.

   chatbox.inc ディレクション Web業界においてプロジェクトを監督・指揮・管理する人 を指します。.... プロジェクトの進行管理をはじめとする Webコンテンツ制作の責任者がWebディレクターといえ ます。 進行管理とは？コンテンツ制作の責任？ INTERNET ACADEMY

   -- https:/ /internetacademy.jp
6. 6.

   chatbox.inc 「進捗どうですか？」 ディレクターの存在意義は？ 「やり直してください」

7. 7.

   chatbox.inc ディレクターのいない世界

8. 8.

   chatbox.inc 作戦名「がんばる」 クライアントと、デザイナ、エンジニアがみ んなで集まってプロジェクトの完成まで頑 張る。 タスクの割り振りや、スケジュール管理は みんなで頑張って調整する。 連絡・コミュニケーションも、みんなで時間 を合わせて頑張って調整。 品質管理はそれぞれの職責で頑張る。

   責任境界線があいまいな部分は、みんな で頑張る
9. 9.

   chatbox.inc 頑張らないディレクション どうせ頑張るならディレクターはいらない 楽するためのディレクション

10. 10.

    chatbox.inc ディレクションってなんだろう？ Web 制作のプロジェクトに ディレクターって必要？ ディレクションスキルって何？ TODAY’S THEME!

11. 11.

    chatbox.inc ディレクションとは何か？ そもそもなぜ頑張るのか？ ゴールや道筋が見えていないから B2B の仕事はクライアントも対等 お客さんを満足させるのは B2C の仕事 ゴール・目標、何を作るべきかを決める。

    どう作っていくかの業務フローを構築する。 制作物ではなく、「制作」の最終責任者
12. 12.

    chatbox.inc クライアント型の制作 ディレクターは、クライアントの言いなり、ご意見伺い クライアントの一声で、全てが変わる designer coder director client Product

13. 13.

    chatbox.inc チーム型の制作 クライアントが制作陣と対等に議論する。 ディレクターは、制作物の最終責任者として、 課題管理・品質管理を行う。 designer coder director client Product

14. 14.

    chatbox.inc チーム型の制作における課題管理 「がんばる」コトだけではなく、 各自のやること・やらないことが、 正しく議論され、明示されている状態。 「進捗どうですか」ではなく、リリースに向けた進捗評価 進捗が良くない場合、責任境界を緩めて、 他所のリソースに作業を分配するなどの進行改善 正しい形の分業で責任を分解し、 進捗は問い合わせるのではなく評価し、改善する。

15. 15.

    chatbox.inc チーム型の制作における品質管理 納品物だけではなく、制作過程の品質を担保する。 リリース前だけでなく、制作工程全体を評価 細かいタスクの一つ一つを製品へのコミットと考える。 無駄な作業、瑕疵ある作業のリリースを未然に防ぎ チーム全体で後工程の安全性を確保する。 分業の結果を協業で評価し、 人の寄せ集めではない、チームとしての価値を生み出す

16. 16.

    chatbox.inc ディレクターは大変 みんなが らくを するために、 あれや これやと おおいそがし

17. 17.

    chatbox.inc ディレクションの階層化 製品へのコミット単位でのタスクと、 制作作業進行単位での TODO 的なタスク TODO 単位のタスク細分化を制作部門に依頼し、 進捗の見える化を制作部門に依頼 制作側からの自主的な進捗状況の可視化

    「進捗どうですか」と聞くのすら煩わしい
18. 18.

    chatbox.inc 制作による自主検証 タスク設定における受け入れ基準の明示化 フォーマットとか自動化ツールとか Web ツールを活用して、ディレクターが主導しなくても、 自主的なチームメンバー同士の制作物評価が生まれるように 十分に議論された制作物へのコミットを繰り返すことで、 より安定的にスケジュール進行を行える

19. 19.

    chatbox.inc ディレクションは文化 制作フローの管理と検証が、簡単に行えるような環境構築 ディレクターがいなくても、仕組みベースで自動で 「良い制作」がフローとして回るように

20. 20.

    chatbox.inc よりよい制作をめざして みんなで頑張る協業 → みんなで評価する協業 ちゃんと分業して責任分界しながら、評価を全員で 細かい単位のタスクの積み重ねで製品を作成 各タスクをチームで協力して評価。 瑕疵を後工程に引き継がない 分業と協業、評価の体制を構築し、

    頑張らない制作フロー構築を行うのがディレクターの仕事
21. 21.

    chatbox.inc ディレクションは重要 ディレクターの よしあしで あんけんが もえるのは いやだね

22. 22.

    chatbox.inc Webツールを活用した ディレクション進行支援 誰でも簡単にディレクションができる 誰でも簡単にワークフローがわかる

23. 23.

    chatbox.inc タスク管理ツール Backlog や GitHub 、Trello などの Web ブラウザで利用できるタスク管理ツール 業務上のあらゆる作業を、

    タスク管理ツール上に登録されたタスクに紐付ける 口答でのタスク依頼を完全に禁止 人間の記憶は消える。 言った言ってないとかではなく、記録に残すことで、 後世の参考になったりする。
24. 24.

    chatbox.inc レビューツール デザインにおける Adobe XD の Web共有や コードにおける Github の

    Pull Request など 成果物を特別なソフトを起動するコトなく、 Web で誰でも簡単に閲覧することができる。 簡単さ、手軽さはコミュニケーションの源泉 URL 付きのデータで参照も容易に
25. 25.

    chatbox.inc

26. 26.

    chatbox.inc #1 Issue を利用した課題管理 アサインして、作業内容と受け入れ条件書いて、 タスクの内容を明示 親子課題（Issue同士の参照）やラベルの機能を利用して タスク同士をカテゴライズ 課題の状態推移などは Project

    を利用して可視化
27. 27.

    chatbox.inc Issue コメントが追加できる。 タイトルと本文のシンプ ルな構成 本文には画像やチェック リスト、リンクなども利 用可能。 担当者の設定 ラベルやマイルストーン

    を紐付けてグループ化 Close することで Issue は完了扱いに
28. 28.

    chatbox.inc Issue Reference 紐付けられた Issue とそ の状態が一覧で表示され る。 本文やコメントで、 #84

    のように Issue 番号 を記述すると、紐づく
29. 29.

    chatbox.inc Issue Reference Issue 一覧では、 label や担当者などの項 目を利用して検索可能 label をつけて管理する

    と、Issue 一覧で表示さ れる。
30. 30.

    chatbox.inc Project Issue をカード型の UI で 一覧化して表現可能 デザイン → 実装

    → リ リースのような一連の流 れを列で表現 Issue 化するほど固まっ ていない内容もMemo と して残せる 左のパネルで Issue の概 要を見たり、簡単な操作 を行うことが可能
31. 31.

    chatbox.inc #2 Pull Request を利用した品質管理 Pull Request を利用してコードの品質を確保 チームメンバー全員でのコードレビューを Web上で行えるように。

    各種製品への変更を Issue と紐付けながら 誰が、なぜ、どういう経緯で変更したのかを記録する。 Web 上で記録することで、 後で振り返りや経緯の調査などができるようになり、 ナレッジとして活用できる。
32. 32.

    chatbox.inc Issue Reference 変更内容を、概要形式で 記述して提出 File Changed のタブから ファイルの変更箇所を確 認可能。

    関連する Issue と 紐付けることができる 変更の中で気になる点を コメント形式で記述 Netlify 等でのチェック を確認できる。
33. 33.

    chatbox.inc Netlify プレビューだけでなく、 本番用のサーバとしても 利用可能 それぞれのリリースに URL がつけられるので、 軽微変更のプレビューも 簡単に共有できる。

    GitHub 上でのコード変 更に応じて、リアルタイ ムにサイトを公開
34. 34.

    chatbox.inc 頑張らないディレクション Webツールのおかげで、 ディレクションも かんたんに なったね

35. 35.

    chatbox.inc ディレクションスキルとは？ ディレクションは ツールの使い方ではなく制作文化 チーム内での「良い制作」に関する理想像を どういう形で具体化できるか 細かいツールの使い方などは、方法論に過ぎないので、 ツールが使える = 良いディレクターとは限らない。

    社内で「良い制作」が回っていれば、 目指すべき形が文化・習慣として存在していれば、 ディレクターの教育コストも少ない
36. 36.

    chatbox.inc 頑張らないディレクション 無理なく高品質な制作を進めるためのディレクション 大変なコミュニケーションタスクを専門ポストに任せても、 プロジェクト全体の大変さは変わらない。

37. 37.

    chatbox.inc ディレクションは仕組み ディレクションの対象となる管理課題・評価を メンバーが自主的に可視化・進行して行ける制作フローを。 Web ツールを使うことで、文化にし、属人化させない。

38. 38.

    chatbox.inc Thanks!