プログレスバー・ローダーのデザインガイド：進捗表示UIの種類と実装パターン

プログレスバー（進捗バー）は、処理の完了度・目標達成状況・フォームの入力完了度などを視覚的に伝えるUIコンポーネントです。ユーザーに「今どのくらい進んでいるか」を伝えることで、待機中の不安を軽減し、タスクへのモチベーションを維持します。本記事では、プログレスバーの種類と適切な使い分け・実装パターンを解説します。

プログレスバーの種類

リニア（直線型）プログレスバー：

最も一般的な横長の帯状プログレスバー。ファイルのダウンロード・アップロード・フォームの入力進捗・ページ読み込みなどに使います。

サーキュラー（円形）プログレスバー：

円の外周を時計回りに塗りつぶす形のプログレス表示。ダッシュボードのKPI・モバイルの読み込みインジケーター・アプリのオンボーディングゴール達成度などに使います。コンパクトなスペースに数値と組み合わせて表示できるのが特長です。

ステップインジケーター：

複数ステップのフォーム・ウィザードの現在位置を示すUI。円または数字のノード＋線で構成され、完了・現在・未完了の3状態を視覚化します。

インデタミネート（不定型）プログレス：

完了までの時間が不明な処理で使う、進捗率が示せないローディングUI。アニメーションで「動いている」ことを示しますが、何%完了かは分かりません。

リニアプログレスバーの設計

高さとサイズ：

• 最小（シンプル表示）: 2〜4px
• 標準: 6〜8px
• 大（ダッシュボード・目標達成率）: 12〜16px

カラー設計：

• 進行部分（filled）: プライマリカラーまたはセマンティックカラー（成功:緑・警告:黄・エラー:赤）
• 未進行部分（track）: ライトグレー（#E5E7EB）

アニメーション：

進捗が増加する際は滑らかなCSSトランジション（300〜500ms ease-out）でバーが伸びます。インデタミネートの場合は左から右へ光が走るシマーアニメーションを使います。

数値の表示：

バーの右端または上部に「34%」「3.2 MB / 10 MB」のような進捗数値を表示します。数値があるとユーザーの体感待ち時間が短縮されます。

ステップインジケーターの設計

視覚的状態：

• 完了ステップ: プライマリカラー + チェックマークアイコン
• 現在ステップ: プライマリカラーの枠線 + ステップ番号（白）
• 未完了ステップ: グレーの枠線 + ステップ番号（グレー）

ステップのラベル：

ノードの下（または横）にステップ名（「配送先」「支払い」「確認」等）を表示します。モバイルでは幅が限られるため、現在ステップのみラベルを表示する実装が有効です。

クリッカブルvs非クリッカブル：

完了したステップをクリックで戻れる場合は、完了ステップをクリッカブル（カーソル変化・ホバー状態あり）にします。一方向のフロー（決済フロー等）で戻れない場合は非クリッカブルにします。

サーキュラープログレスの設計

SVGによる実装：

円形プログレスはSVGの stroke-dasharray と stroke-dashoffset を使って実装します。

.circle-progress {
  stroke-dasharray: 283; /* 2π × r（r=45の場合） */
  stroke-dashoffset: calc(283 * (1 - var(--progress, 0)));
  transition: stroke-dashoffset 300ms ease;
  transform: rotate(-90deg);
  transform-origin: center;
}

中央の数値表示：

サーキュラープログレスの中央に進捗率・達成値などを重ねて表示することで、コンパクトなスペースに多くの情報を収められます。

アクセシビリティ

`role="progressbar"` と ARIA属性：

プログレスバー要素に role="progressbar"・aria-valuenow・aria-valuemin・aria-valuemax を設定し、スクリーンリーダーに進捗率を伝えます。

<div
  role="progressbar"
  aria-valuenow="45"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="ファイルのアップロード進捗"
>
  <!-- ビジュアルプログレスバー -->
</div>

インデタミネートの通知：

進捗率が不明な場合は aria-valuenow を省略し、aria-label で「読み込み中」を伝えます。

まとめ

プログレスバーはユーザーの待機体験と目標達成モチベーションを支える重要なUIコンポーネントです。処理の性質（確定的・不確定）・表示スペース・利用シーンに応じてリニア・サーキュラー・ステップインジケーターを使い分け、アクセシビリティ対応も忘れずに実装することが重要です。UI ZUKANではプログレスバーの実装例を多数掲載しています。