ガントチャート機能開発をRe:Boot!そのために行ったこと

2023年12月9日に福岡ファッションビルで開催されたBacklog World 2023での発表資料です。
https://backlogworld.info/

砂川 祐樹
株式会社ヌーラボ/サービス開発部 Backlog課
Webシステムやブラウザゲームのプログラマー・プランナー・ディレクターなどを経験後、ヌーラボに入社、Backlogの開発に携わる。近年はBacklogのフロントエンドをReactに置き換えていくプロジェクトに関わっている。ヌーラボが公開しているWebサイト「サル先生のプロジェクト管理入門」やプロジェクト管理を学べるボードゲーム「プロジェクトテーマパーク」も制作。

Transcript

1. ガントチャート機能開発を Re:Boot！そのために行ったこと 株式会社ヌーラボ 砂川祐樹
2. 自己紹介 名前: 砂川 祐樹 所属: 株式会社ヌーラボ Backlog開発チーム やっていること: ガントチャート・ボード機能の開発 （ボード機能とは関係ないですが） 過去にはプロジェクト管理を学べる ボードゲームを作ったりしています
3. 突然ですが…… Backlogの新しいガントチャート、 お気づきですか？ 今年の8月にリリース ガントチャートが使える プロジェクトなら誰でも ボタンで切り替えて利用できます
4. 新しいガントチャート 新しいガントチャートで利用できる新機能 絞り込み機能 簡易編集機能 課題追加機能 他にも様々な新機能が追加されています
5. タイムスケール変更機能 今週リリースしたての新機能です ガントチャートの表示単位を 日・週・月単位で切り替えられる 要望の多かった機能 一画面に広い範囲の期間を表示できる
6. 開発Re: Boot!までの経緯 ガントチャート機能開発を Re: Boot! そのために行ったこと で、何作る？ ユーザーストーリーマッピング
7. 開発Re: Boot!の経緯 前身はReact化プロジェクト 既に課題関連の画面をReact化済み 古くなったBacklogのフロントエンドを 整理して、機能開発のスピードを 上げるためのプロジェクト ガントチャートとボード機能を担当するチームが誕生 最初のプロジェクトがガントチャート画面のReact化 課題検索画面 課題詳細・編集・追加画面 これまでのガントチャートは素朴なJSとJQueryなどで作られていた！
8. React化するための二つの選択肢 1. まず既存のガントチャートを再現して、それから機能を改善していく ※課題関連画面で採用した方針 2. 既存の画面の再現はしない。最初から新機能を盛り込んだ 新しいガントチャート機能をReactで作り、置き換える デメリット: 改善に取り掛かるまで時間がかかる メリット: ユーザーへの影響は少ない メリット: 改善に早く取り掛かれる デメリット: ユーザーへの影響が大きくなるリスク 開発Re: Boot!の経緯
9. 新しいReact版ガントチャートで 置き換える方針に決定！ ガントチャート機能は改善、機能追加が停滞していた Re: Boot!となれば、変更したい仕様は沢山ある！ 既存のガントチャートを再現すると、すぐに変更するであろう細か い仕様を一旦実装しなければならない なるべく早く機能改善に取り組みたい しかも、それら全てを実装した後でなければリリースできない 開発Re: Boot!の経緯
10. 当面の間、新しいガントチャートは 既存のガントチャートと切り替えられるように 使う側の安心感と開発する側の冒険を両立 どんなに小さい機能・使われていなさそうな機能でも、必ず誰かが利用している 軽い気持ちで廃止や仕様変更はできない Backlogのガントチャート機能は数十万人のユーザーに利用されている とはいえ前に進むためには何かを変えたり捨てたりしなければならない ユーザーからのフィードバックを受けて改善できる そこで しかし、この方針はユーザーに与える影響が大きい 開発Re: Boot!の経緯
11. で、何作る？
12. で、何作る？ 中にはぶつかり合う要望もあるが、どの要望もユーザーそれぞれの切実な気持ち 言語化されていなかったり、表面化していない要望もあるはず 頂いている要望はたくさんある どの機能を優先するべきか？ ガントチャートに本当に必要な機能って なんだろう？ 私たちが考える「この機能あったら便利だろうな」もたくさんある 🤔
13. 機能の価値は単体で存在するわけではなく、ユーザーの体験の流れの中にある プロジェクトの流れ プロジェクト 開始 要件定義 見積もり スケジュール 作成 頑張って開発 プロジェクト 終了 ガントチャートはこのあたり？ で、何作る？
14. 機能の価値は単体で存在するわけではなく、ユーザーの体験の流れの中にある 毎日の仕事のサイクル 出社 朝会 開発 課題の更新 退社 ガントチャートはこのあたり？ で、何作る？
15. 「要望があるから実装する」「便利そうだから実装する」 で、何作る？
16. ユーザーの体験の流れの中で ガントチャート機能としてのまとまりを作る必要がある で、何作る？ 「要望があるから実装する」「便利そうだから実装する」 NG
17. ユーザーストーリーマッピング ユーザーの行動を時系列順に並べて 視覚的にマッピングしたもの ユーザーストーリーマップ 今回は時系列順に書き出した流れから ペインポイントを洗い出し 理想的なガントチャートに近づくために 必要な機能を洗い出しました
18. ユーザーストーリーマッピング 大体こんな流れでやりました ゴール（その機能が提供したい価値）を書き出す 今のガントチャート機能から現れるユーザーペインを書き出す 理想的なガントチャート機能ならこうなるという流れを書き出す 作る機能に優先度をつけてMVPとしてまとめる
19. ペルソナを作る ゴール（その機能が提供したい価値）を書き出す シチュエーション ・週一回の進捗確認ミーティング プロジェクト ・受託系のプロジェクト。クライアントあり。締切に厳しい ・期間: 一年ぐらい ・メンバーの数: 8-10人ぐらい ・システムのリプレイス案件 ・親課題は基本的にマネージャーが追加して期間を決める マネージャー ・自分でもできるけど基本的にやらないが、遅れてきたら自分も手を動かす ・経験があるので全工程を見渡せる チームメンバーA ・業界３、４年目ぐらい ・振られた課題は一人でこなせるけど、自分で課題を作ることはあんまり無い ・スケジュール管理にはあんまり意見しない チームメンバーB ・業界１０年目ぐらい ・いろんなプロジェクトで忙しい プロジェクトが想定通り 進捗しているか が把握できる 課題の割り振りやスケジュ ールを調整できる そして ユーザーストーリーマッピング
20. 今のガントチャートを使うユーザーの具体的な行動を書き出す 現れたペイン（ここであれができたらなあ）をマッピングする マネージャーの画面をみんなで見て 期限日が過ぎてる課題を確認して 課題の詳細を開く 各メンバーが状況を報告 調整が必要な課題の確認 課題の担当者を変更するために課題詳細を開いて編集画面に……… 期間の移動が必要な課題をドラッグ&ドロップで一つずつ移動 ・・・ 絞り込み機能が ないので表示を カスタマイズし にくい 遅れてる課題が一目 でわからない （ステータスの色で 判断するしかない） 開始日期限日を 設定していない 課題はそもそも 表示されない その課題が進ん でいないことに 気づきにくい 課題数が多いと 表示が遅い 一つのタスクがどれくらい 遅れてるのかパッとわから ない（進捗率） あと何日あれば終わるのか は個別に聞かないと出てこ ない 課題がガントチ ャート上で追加 できない 一画面に表示で きる期間が短い ので、期間の長 いプロジェクト では見通しが悪 い 課題の開始日期 限日を一つずつ 変更しないとい けない その時の状況し か見れない これまでのペー スとか、先週の 状況はわからな い 未来の予測が立 てにくい などなど…… ユーザーストーリーマッピング
21. 理想的なガントチャート機能ならこうなるという流れを書き出す 理想的なガントチャートにするために必要な機能をマッピングする 見やすくカスタマイズしたガントチャートをみんなで見て 遅れてるor遅れそうな課題が一目で把握できて ガントチャートを見ながら課題の詳細を開く チャート上に書いた一時的なメモを見ながら各メンバーが状況を報告 別プロジェクトの課題も並べて調整が必要な課題の確認 課題の依存関係も確認できる 課題の担当者をガントチャートから直接編集 関連する課題の期間をまとめてドラッグ&ドロップで移動 ・・・ 課題検索と同 じ絞り込み条 件が使える 課題の並べ替え 期限日が過ぎてい る課題を見やすく 課題詳細とガントチャート全体 を同時に確認できる 進捗どうですかを代わりに聞い てくれる クリティカルパスを判 定して表示する 遅れている理由などをメモ的 に書いておける プロジェクトを またいだ ガントチャート 複数選択してまと めて日時移動した り長さを変えたり できる 週・月・年まで表 示スケールを変え られる （課題 > 親課題 > マイルストーン > プロジェクト） 担当者や状態を簡単に 変更できる などなど…… ユーザーストーリーマッピング
22. 理想的なガントチャートにするために必要な機能をマッピングする 課題検索と同 じ絞り込み条 件が使える 課題の並べ替え 期限日が過ぎてい る課題を見やすく 課題詳細とガントチャート全体 を同時に確認できる 進捗どうですかを代わりに聞い てくれる クリティカルパスを判 定して表示する 遅れている理由などをメモ的 に書いておける プロジェクトを またいだ ガントチャート 複数選択してまと めて日時移動した り長さを変えたり できる 週・月・年まで表 示スケールを変え られる （課題 > 親課題 > マイルストーン > プロジェクト） 担当者や状態を簡単に 変更できる …… 優先度をつけてMVPとしてまとめる 基本的な機能 課題検索と同じ 絞り込み機能 簡易編集機能 課題追加機能 などなど…… ユーザーストーリーマッピング
23. いよいよ開発スタート やることがはっきりしたのでいよいよ開発開始 基本的な機能 課題検索と同じ 絞り込み機能 簡易編集機能 課題追加機能 …… この時点でリリース！ フィルター 保存機能 タイムスケール 変更機能 ユーザーが自由に切り替えられる状態で スピード感を維持しながら開発・リリースを続ける
24. まとめ：Re Boot!にあたって大事にしたこと Backlogはこれからも 使う人の体験を意識した機能開発を続けていきます これからもよろしくお願いします。 大事なのは機能単体の実装ではなく使う人の体験 ご清聴ありがとうございました。 安心感と開発のスピード感の両立