目次
2026 年 3 月、スタートアップ投資家の有安伸宏氏が X で**「1 分以上かかる作業に進捗率ゲージ表示させてみたら割とこれ良い」**と報告した。
ふと思いついて、1 分以上かかる作業に進捗率ゲージ表示させてみたら割とこれ良いかもしれん est という行
この投稿は 110 いいね、95 ブックマークを集め、UX デザインにおける進捗表示の重要性を再認識させた。
本稿はこの UX パターンの背景、実装方法、そしてユーザー体験への影響を解説する。
なぜ進捗表示が必要なのか
1. 待機時間の知覚を短縮する
心理学の研究によると、待機時間の知覚は実際の時間よりも長く感じられる。特に、何が起こっているかわからない場合、ユーザーは不安を感じ、待ち時間を長く感じる。
進捗表示があることで：
- 何が起こっているかがわかる
- いつ終わるかの予測ができる
- コントロール感がある
これにより、同じ待ち時間でもストレスが軽減される。
2. 「1 分」の閾値
有安氏の投稿で注目すべきは**「1 分以上」**という閾値だ。
UX デザインのベストプラクティスでは、応答時間の閾値は以下のように定義されている。
| 応答時間 | ユーザーの知覚 | 推奨対応 |
|---|---|---|
| 0.1 秒以下 | 瞬時 | フィードバック不要 |
| 1 秒以下 | 気づくが遅延ではない | 軽いローディング表示 |
| 1-10 秒 | 待機と感じる | 進捗表示が必要 |
| 10 秒以上 | 集中力が切れる | 進捗率 + 推定残り時間 |
**1 分（60 秒）**は、ユーザーが「長い」と明確に認識する閾値だ。この長さのタスクには、進捗表示が必須と言える。
3. AI エージェント時代における重要性
AI エージェントが普及する 2026 年現在、長タスクはさらに一般的になっている。
- コード生成 - 数分かかることも
- データ分析 - 大量データの処理
- 画像生成 - 高解像度画像の生成
- 文書要約 - 長文書の処理
これらのタスクは、しばしば 1 分以上かかる。進捗表示がないと、ユーザーは「固まっているのか？」「エラーなのか？」と不安になる。
進捗表示のデザインパターン
1. 決定論的プログレスバー
タスクの完了までのステップが明確な場合に使用する。
[████████░░░░] 67% 完了
適しているケース：
- ファイルのダウンロード
- 複数のステップがある処理
- 全体量が事前にわかるタスク
2. 不確定プログレスバー（インディミネート）
タスクの完了時間が予測できない場合に使用する。
[████░░░░████] 処理中...
適しているケース：
- ネットワークリクエスト
- AI の推論処理
- 外部 API の呼び出し
3. 推定残り時間の表示
完了までの推定時間を表示する。
[████████░░░░] 67% 完了 - 残り約 2 分
注意点：
- 推定が頻繁に変わると混乱を招く
- 大きく外れると信頼性が損なわれる
4. 現在の処理内容の表示
何をしているのかをテキストで表示する。
[████████░░░░] データを分析中...
メリット：
- ユーザーが処理内容を理解できる
- 固まっているのか処理中なのか区別できる
実装方法
基本的な実装（React 例）
function ProgressBar({ progress, label }) {
return (
<div className="progress-container">
<div className="progress-bar" style={{ width: `${progress}%` }} />
<span className="progress-label">{label}</span>
</div>
);
}
// 使用例
<ProgressBar progress={67} label="データを分析中... 67% 完了" />
1 分閾値の検知
// タスク開始時にタイマーを設定
const startTime = Date.now();
// 1 分経過したら進捗表示を表示
setInterval(() => {
const elapsed = Date.now() - startTime;
if (elapsed >= 60000 && !progressShown) {
showProgressBar();
progressShown = true;
}
}, 1000);
AI エージェント向けの実装
AI エージェントの場合、処理内容が動的に変化するため、以下のような実装が有効だ。
// エージェントの思考プロセスを表示
const agentSteps = [
"タスクを分析中...",
"情報を検索中...",
"コードを生成中...",
"テストを実行中...",
"完了！"
];
function AgentProgress({ currentStep, totalSteps }) {
const progress = (currentStep / totalSteps) * 100;
return (
<div>
<ProgressBar progress={progress} />
<p>{agentSteps[currentStep]}</p>
</div>
);
}
進捗表示のベストプラクティス
1. 正直に表示する
進捗を偽って表示すると、ユーザーの信頼を損なう。
❌ 悪い例：
- 実際は 10% なのに 50% と表示
- 完了時間が近づくと進捗が遅くなる
✅ 良い例：
- 実際の進捗を正確に表示
- 不確定な場合は「処理中」と表示
2. キャンセル機能を提供する
長タスクでは、ユーザーがキャンセルできる機能を提供する。
[████████░░░░] 67% 完了 [キャンセル]
3. 完了後のフィードバック
タスク完了後、明確なフィードバックを提供する。
✅ 完了！データを分析しました。
4. エラー時の対応
エラーが発生した場合、明確なエラーメッセージとリトライオプションを提供する。
❌ エラー：ネットワーク接続に失敗しました
[リトライ] [キャンセル]
有安氏の投稿から学べること
有安氏の投稿が示唆することは以下の通りだ。
1. 「ふと思いつく」UX の重要性
進捗表示のような基本的な UX は、往々にして後回しにされる。しかし、小さな工夫がユーザー体験を大きく変える。
2. 実装コスト対効果
進捗表示の実装コストは比較的低い。しかし、ユーザー体験への影響は大きい。ROI が高い UX 改善だと言える。
3. 共有による学び
有安氏が X で共有したことで、多くの開発者がこの UX パターンを再認識した。知見の共有がコミュニティ全体の UX レベルを向上させる。
結論：1 分の壁を超えたら進捗表示を
1 分以上かかる作業には、進捗率ゲージを表示する。
これは UX デザインの基本的なベストプラクティスだ。しかし、実装が後回しにされることも多い。
AI エージェント時代において、長タスクはさらに一般的になる。進捗表示は、もはや「あれば良い」ものではなく、「必須」のものだ。
有安氏の報告を参考に、あなたのプロダクトでも進捗表示を見直してみてほしい。
参考：
引用元・参考リンク
免責事項 — 掲載情報は執筆時点のものです。料金・機能は変更される場合があります。最新情報は各公式サイトをご確認ください。