目標・KPIGauge & Progress Bar難易度: 簡単
ゲージ・進捗バー
一言でわかる可視化ポイント
「目標達成率(◯◯%)」までの残りメーターを一目で可視化する
車のスピードメーターやバッテリー残量のように、目標値(100%)に対して現在の進捗がどの位置にあるかを針やバーの長さで直感的に伝える表現です。
インタラクティブプレビュー
78%
年間目標達成率
※マウスホバーやクリックでアニメーションや数値の変化を確認できます。
おすすめHTML/CSSカラーパレットサンプル
ダッシュボードの視認性を高めるためのカラーコード例です。グラフで最も伝えたい要素にイエローなどのアクセントカラーを割り当て、比較対象にはダークカラーを使用します。
進捗トラック
達成済みエリア
#FACC15HEX
未達成残高
残りメーター
#27272AHEX
目標ライン
ゴール目標位置
#FFFFFFHEX
こんな可視化に向いている(GOOD)
- 月間営業目標1,000万円に対する現在の進捗率(78%)
- クラウドストレージの使用量上限に対する残容量
- プロジェクトのタスク完了率
やってはいけないNGパターン(BAD)
- 目標値(100%のゴール基準)が定義されていないゲージ
標準機能で対応しているおすすめBIツール
Looker StudioPower BIMetabaseRetool
Looker StudioからRetoolまで!BIツール比較ガイドを読む