ピクトグラムの塗り割合と進捗バーの違い

ピクトグラムの塗り割合は「1つのアイコンの塗られた高さで、割合を見せたい」、進捗バーは「割合や進み具合を、横の棒で分かりやすく見せたい」。見た目と使い分けを並べて説明します。

ピクトグラムの塗り割合

ピクトグラムの塗り割合は、1つの大きなアイコンを下から一定の高さまで塗り、割合を示す部品。

伝えたいこと

1つのアイコンの塗られた高さで、割合を見せたい

見た目

大きな人型アイコンの下から62%だけ色が塗られている

進捗バー

進捗バーは、横長の帯の塗られた長さで割合や進捗を示す部品。

伝えたいこと

割合や進み具合を、横の棒で分かりやすく見せたい

見た目

横長の細い帯の一部が塗られ、端に%