視覚的な進捗管理を実現!kintoneの標準機能でProgressBarを作成する方法

kintone

アイキャッチ_プログレスバー

こんにちは!Kentarouです!

2021/11/09 に「kintoneでProgressBarを表示させてみました!」というツイートをしたところ、
「作成方法を知りたい!」というお声を頂いたので、作成方法やデザインアイデアをまとめてみました!

 

ProgerssBarを使って進捗状況を可視化

ProgressBarとは?

Progress Bar (プログレスバー)とは、タスクの進捗状況を、視覚的・直感的にどの程度完了しているかを示すものです。

ProgressBarを表示させてみた

確度の数値に対応したProgressBarを表示させてみました!Progress Bar を表示させることで、確度という数値データを視覚的・直感的に確認できますね!

成方法

1. [数値]フィールドと[文字列 (1行)]フィールドをフォームに追加
[数値]フィールド (確度) と[文字列 (1行)]フィールド (確度_Progress Bar) をフォームにドラッグアンドドロップする。

2.[数値]フィールドを設定
[数値]フィールドを下記画像のように設定する。

3.[文字列 (1行)]フィールドにを設定
[文字列 (1行)]フィールドを下記画像のように設定する。

自動計算の計算式には下記内容を入力する。

IF(進捗率=100,"░░░░░░░░░░",IF(AND(進捗率<100,進捗率>=90),"░░░░░░░░░▒",IF(AND(進捗率<90,進捗率>=80),"░░░░░░░░▒▒",IF(AND(進捗率<80,進捗率>=70),"░░░░░░░▒▒▒",IF(AND(進捗率<70,進捗率>=60),"░░░░░░▒▒▒▒",IF(AND(進捗率<60,進捗率>=50),"░░░░░▒▒▒▒▒",IF(AND(進捗率<50,進捗率>=40),"░░░░▒▒▒▒▒▒",IF(AND(進捗率<40,進捗率>=30),"░░░▒▒▒▒▒▒▒",IF(AND(進捗率<30,進捗率>=20),"░░▒▒▒▒▒▒▒▒",IF(AND(進捗率<20,進捗率>=10),"░▒▒▒▒▒▒▒▒▒","▒▒▒▒▒▒▒▒▒▒"))))))))))
4.完成!!

あとは、[アプリ更新]を押せば完成!

自分好みのProgerssBarを作ってみよう!

計算式の条件や使用する文字 (絵文字) を変えれば、自分好みのProgressBarを作ることができます!!
この記事では、デザイン例を4つご紹介します。

1. シンプル ①

白黒の四角を使ったシンプルなデザイン。
使用する文字:░▒

2. シンプル ②

白黒の星とハートを使ったシンプルなデザイン。
使用する文字:☆★♥

3. カラフル

色のついた四角を使ったカラフルなデザイン。
使用する文字:⬜🟥🟧🟨🟩🟦

4. エモい

なかじ@業務改善職 さんが紹介していたエモいProgressBar!!
どこか懐かしい感じがあって可愛いですよね。遊び心があって素敵なデザインです!計算式もシンプルでわかりやすい!

最後に

Progress Bar (プログレスバー)を表示させることで、タスクの進捗状況などを視覚的に可視化することができます!
計算式の条件や使う文字 (絵文字) を変えて、自分好みのProgress Barを作ってみてください。

株式会社Crena(クレナ)では、中小企業様を中心に、低コスト&短納期でのkintone導入を構築を支援しております。システムを構築する前段階である、業務の洗い出しから課題の抽出、最適な業務フローの構築からサポートいたしますので、まずはお気軽にご相談ください。

お問い合わせ・ご相談はこちらから

 

会社名 株式会社Crena(クレナ)
TEL 043-388-8819
設立 2020年8月
代表取締役 平野 賢太郎 (Hirano Kentaro)
事業内容

クラウドソリューション事業

システム開発事業

ビジネスソリューション事業

URL https://create-new-air.com/

関連記事

kintoneプラグインが1ヶ月使い放題
kintoneプラグイン一覧はコチラ