Notionでプロジェクトの進捗をプログレスバーで表示させる方法

・プロジェクトの進捗を一目でわかるようにしたい

・プログレスバーを表示させるために数字を入力するのが面倒

こういったお悩みを解決する内容になっています。

Notionではプロジェクトやタスクを管理する機能が満載に詰まっており、最近では個人だけではなく企業でもNotionの導入が増加しています。

プロジェクトやタスク管理の作成方法はこちらの記事を参考にしてみてください！

【Notion】リンクドデータベースで最強タスク管理を作成する方法【テンプレート配布】

リンクドデータベース機能を使ってボードビューとタイムラインビューの2つの異なる見え方のタスク管理ボードの作成方法を紹介します。

Notionのタイムライン機能を使ってプロジェクト管理する方法

この記事では、Notionを使ってプロジェクト管理を行うガントチャートを作成する方法をご紹介します。お仕事をプロジェクトごとに管理でき、整理に役立ちます。

そこでプロジェクトやタスクの進捗をもっと分かりやすく表示させるための「数値の表示方法」機能が2022年8月のアップデートで追加されました。

今回はそちらの機能の概要からプロジェクトやタスクの進捗をプログレスバーで分かりやすく表示させる方法を紹介します！

さらに数値を毎回入力しなければいけないプログレスバーですが、関数を使って入力の手間を省く方法も後半で紹介していますのでそちらもぜひ参考にしてみてください！

新機能：「数値の表示方法」
数値を入力せずにプログレスバーを表示させる方法
1. セレクトプロパティで進捗率の選択肢を作成
2. 関数でプログレスバーを表示させる
バー・リング表示を使って見やすい管理表を作成しよう

新機能：「数値の表示方法」

まずは2022年8月のアップデートで追加された機能である、数値プロパティの表示方法について紹介します。

数値プロパティのカラムに入力した数値の表示方法が、それまでの数値以外に、「バー」と「リング」が追加されました。

プロパティを「数値」に設定

まずはプロパティを数値に設定します。表示方法を変更できるようになったプロパティは今のところ数値プロパティだけのようなのでここの設定を忘れないようにしましょう。

「数値の形式」を選択

続いては数値の形式を設定していきます。「数値の形式」をクリックすると、「パーセント」や「円」などの形式を選択できるので目的に合わせて形式を選択します。

今回は進捗を表したいので「パーセント」としました。

表示方法の選択

ここで新たに「表示方法」という項目が追加されています。

表示方法は全部で3種類で「Number」「Bar」「Ring」となっています。今回は試しに「Bar」を選択しました。

左のテーブルを見てみると、パーセントで表示されている数値の隣にバーが追加されていますね。

より視覚的に分かりやすくなりました。

その他の設定

その他の設定として、バーもしくはリングのカラー変更、数値の表示・非表示を切り替えられるようになっています。

好みや目的に合わせて変更してみてください！

数値を入力せずにプログレスバーを表示させる方法

ここからは数値を入力せずに「バー」を表示させる方法を紹介したいと思います。

数値をバーやリングで表示させることができるのはもちろん視覚的に分かりやすくなるのはもちろんいいことです。

しかし、プロジェクトやタスクの進捗を入力する際に毎回数値を入力するのは面倒ですよね？

そこで関数を使って、「セレクトで選択した数値をバーで表示」させてみたいと思います。

セレクトプロパティで進捗率の選択肢を作成

まずは進捗率をセレクトプロパティを使って選択できるようにします。

今回は0％〜100％までの進捗率を分割して選択肢を作成しました。

関数でプログレスバーを表示させる

続いては先ほど作成したセレクトプロパティで選択された選択肢を数値に変換する関数を作成します。

バーを表示させるには「数値」でないといけないのでセレクトプロパティを数値に変換させます。

「進捗率」カラムの横に新規のカラムを追加し、「プログレスバー」というカラムを追加しプロパティの種類を「関数」とします。

次に関数の編集をクリックし、先ほど説明したセレクトプロパティで選択した選択肢によって表示させる数値を変える関数を書いていきます。

こちらが実際に記入したコードです。

if(prop("進捗率") == "100%", 100 / 100, if(prop("進捗率") == "80%", 80 / 100, if(prop("進捗率") == "60%", 60 / 100, if(prop("進捗率") == "50%", 50 / 100, if(prop("進捗率") == "40%", 40 / 100, if(prop("進捗率") == "20%", 20 / 100, 0))))))

関数で書いたコードの内容はざっくりこんな感じです。