チャート見本市/ゲージ・進捗バー
目標・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ツール比較ガイドを読む