【スプレッドシートの活用】ガントチャートをちょっとだけ使いやすくするカスタマイズ

# はじめに
プログラミング学習で、WBS（Work Breakdown Structure：作業分解構成図）を作成して設計に取り組むことを学びました。
いただいたテンプレートを利用して作成したのですが、ちょっとが使いづらいな…と思い、設定や項目を少し変更しました。

その際に、これは良いなと感じたカスタマイズについてご紹介します。

# ガントチャートとは
そもそもガントチャートとは、作業工程の管理がしやすくなるように、進捗状況を確認しながらタスク管理を行うために使われます。

エクセルや専用のアプリなど、さまざまなツールがあるようですが、私はGoogleのスプレッドシートを利用しています。
学習の際には「projectsheet planning 」という拡張機能を利用したのですが、いまいち使い方も理解しきれておらず、どうも私は苦手だったのでこちらの説明は省きます。
もし気になる方がいたら調べてみてください。

ややこしい拡張機能などを使わなくても、もともとGoogleの方でテンプレートが用意されているので、そちらをカスタマイズして使うのがおすすめです。

https://qiita.com/hokutoh/items/f3117d2acfa15db14016


# 実際に行ったカスタマイズ方法

こちらがわたしの利用しているガントチャートの初期の状態です。

![2024-05-05-WBSカスタマイズ-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762011/a9c6e47c-eb85-1a27-9471-b908a1b683d8.png)

テンプレートによって初期の表示は変わりますが、だいたい「タスク内容」「開始日」「終了日」「進捗」などが並んだ横に日付が伸びている表示になります。

そしてこちらがカスタマイズ後です。

![2024-05-05-WBSカスタマイズ-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762011/c902802d-68aa-c991-d89b-0c004404cd73.png)

作業進捗状況のプルダウンを作成し、色を付けることで本日の作業内容や修正必要箇所などが、ぱっと見で分かるように調整しました。

また、私の場合、上から順番にタスクが並んでいるわけではなく、本日の作業を見失いがちだったので、本日の日付を青色、ステータスが「取り組み中」になったら「タスクの説明」の項目も色が変わるように設定しています。

それではこちらの設定内容についてご説明します。

## 1. プルダウンを作成

必要な列を追加して、スプレッドシートのメニューバーから「挿入」→「プルダウン」を選択します。
すると、このような画面が表示されます。

![2024-05-05-WBSカスタマイズ-07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762011/3150f741-7c07-fbeb-196e-30f1150afc91.png)

まずは「範囲に適用」の部分で先ほど追加した列を指定。
「オプション」の部分には必要な項目を記入してそれぞれ分かりやすい色を設定しましょう。
私の場合は「取り組み中」「完了」などを入れています。

## 2. 条件付き書式でルールを設定

次に、「ステータス」が「完了」だったら色を変える…というルールを作ります。
メニューバーの「表示形式」→「条件付き書式」を選択。

![2024-05-05-WBSカスタマイズ-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762011/a602a957-4527-7a18-7d7a-2fb4fd4a0afa.png)

こんな画面が表示されるので、先ほどと同じように、色を変えたいタスク説明の部分を「範囲に適用」の欄で指定。
「書式ルール」を「カスタム数式」にして、画像のように、「=$プルダウンの列="完了"」という条件式を入力します。
「書式設定のスタイル」で色を変えるのですが、プルダウンで指定した色と同じ色を使うのがポイントです。
色の設定画面では、スポイトでスプレッドシート内の色を吸って指定することもできます。

1個目の設定が完了したら、下の「+ 条件を追加」をクリックすれば今作ったデータを複製して条件を作成することが出来るのでここから2個目以降を作成していくのがおすすめです。

![2024-05-05-WBSカスタマイズ-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762011/ea1d7b69-957f-e93b-3349-6cb50ecd8242.png)

私が設定していたルールはこんな感じになります。

## 3. 条件付き書式で日付の色を変更

同じように日付を設定します。
こちらは「カスタム数式」ではなく「日付」で簡単に指定できます。

![2024-05-05-WBSカスタマイズ-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762011/4d2df279-efe1-d04e-e1f2-42bc061fc266.png)

今日の日付を青色、今日より前の日付をグレーに変更しました。

![2024-05-05-WBSカスタマイズ-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762011/7e819bc8-9272-2ad7-b8c4-f0606d7ada1e.png)

## 完成

この設定を適応することで、最初ご紹介したこの表示になります。

![2024-05-05-WBSカスタマイズ-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762011/c902802d-68aa-c991-d89b-0c004404cd73.png)

最初はタスクの説明には色を付けていなかったのですが、もう少し項目を分かりやすくしたいと思い設定を追加してみました。

ただ、このシートの問題点として、ステータスのプルダウンを追加したことで進捗のパーセントの数字を更新し忘れるということがあります。

ステータスが完了なら100%、取り組み中なら20%のような設定を追加してみようかとも思ったのですが、projectsheet planningのアドオンを使用した影響なのか、適応できませんでした…。

projectsheet planningが使われていない状態のガントチャートで、進捗の欄に「=IF($G8="完了", "100%", "")」を記述したらきちんと適応されたので、もしパーセント表示の設定も追加したければこちらを記述してみると良いかもしれません。

条件付き書式設定にはカラースケールという項目もあるので、こちらを利用すればパーセントの数字に合わせたグラデーションでの色変更も可能です。

![2024-05-05-WBSカスタマイズ-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762011/cd337be4-ee1b-de86-fd9e-b68d3345f515.png)

Googleスプレッドシート内にあるガントチャートのテンプレートでも、カラースケールを使った設定がされているので、気になる方は見てみてください。

# おわりに
せっかく進捗管理シートなどを利用しても、見づらかったりしては開くのも億劫になってしまいます。
個人的には、完了した部分や本日の作業内容に色が付くことで達成感も増したように感じるのでお気に入りです。

ちなみに、列の並び順も何気に重要で、今回のシートの場合は同じ色で設定した「タスクの説明」と「ステータス」の列が離れているとまた少し見づらくなってしまいます。

列が離れているとこんな感じ。

![2024-05-05-WBSカスタマイズ-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762011/f6c42162-5950-9050-dc9f-af0a6f8776f6.png)

ちなみのちなみにどうしてもパーセント表示が気になってしまったので、プルダウンの隣の列に持ってきてこちらもステータスに合わせて色が変わるように設定してみました。

![2024-05-05-WBSカスタマイズ-09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762011/06bb21f4-ac7c-f652-ee46-89b82402667c.png)

なんとなく表が見づらいな…と感じるときは配置を変えてみるのもおすすめです。
今後も、タスク管理も楽しみながら学習を進めていこうと思います。