視覚的な進捗管理を実現！kintoneの標準機能でProgressBarを作成する方法
こんにちは！Kentarouです！
2021/11/09 に「kintoneでProgressBarを表示させてみました！」という投稿をしたところ、「作成方法を知りたい！」というお声を頂いたので、作成方法やデザインアイデアをまとめてみました！
ProgerssBarを使って進捗状況を可視化
ProgressBarとは？
Progress Bar（プログレスバー）とは、タスクの進捗状況を、視覚的・直感的にどの程度完了しているかを示すものです。
ProgressBarを表示させてみた
確度の数値に対応したProgressBarを表示させてみました。ProgressBarを表示させることで、確度という数値データを視覚的・直感的に確認できます。
作成方法
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。どこか懐かしい感じがあって可愛く、計算式もシンプルでわかりやすいデザインです。
参考投稿:
なかじ@業務改善職さんの投稿（2021/11/11）
最後に
ProgressBar（プログレスバー）を表示させることで、タスクの進捗状況などを視覚的に可視化することができます。計算式の条件や使う文字（絵文字）を変えて、自分好みのProgressBarを作ってみてください。
株式会社Crena（クレナ）では、中小企業様を中心に、低コスト&短納期でのkintone導入構築を支援しております。業務の洗い出しから課題の抽出、最適な業務フローの構築までサポートいたしますので、まずはお気軽にご相談ください。
- お問い合わせ: お問い合わせ・ご相談はこちら
- TEL: 043-388-8819
- 設立: 2020年8月
- 代表取締役: 平野 賢太郎（Hirano Kentaro）
- 会社URL: https://create-new-air.com/
