視覚的な進捗管理を実現！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/

関連記事