プログレスバーとは？

この記事を読むための時間：5分

プログレスバーという言葉を知っていますか？

プログレスバー とは、処理の進行状況を表す横長のバーのことです。パソコンを使ったことがある人なら、誰でも一度は目にしたことがあるでしょう。

WEBサイトを運用したり、WEBデザインをしたりする場合、プログレスバーの実装は必須です。もし実装しないと、ユーザーは処理作業が行われているということすら分からず、ただ画面がフリーズしただけの状態になってしまいます。そうすると、ユーザーの不安は大きくなり、せっかくサイトを訪問してくれたユーザーがすぐに離脱してしまうという事態にもつながってしまいます。

この記事では、プログレスバーの基本的な使用方法から活用方法まで解説していますので、ぜひWEBデザインの参考にしてみてください。

プログレスバーとは

プログレスバー（英：Progress Bar）とは、処理に長時間かかるタスクの進捗状況を、視覚的・直感的にどの程度完了しているかを示すものです。プログレスメーター（英：Progress Meters）とも呼ばれます。

一般的にプログレスバーは横長の棒のような形状をしています。その棒の中身が左から右へどのくらい埋められたかによって、タスク全体の進捗状況が何割ほど進んでいるかがユーザーにわかるようになっています。

プログレスバーの必要性

処理に時間がかかるタスクを実行しているとき、もしプログレスバーの表示がないと、ただ画面が固まっているかのように見えてユーザーは不安になってしまいます。そうすると、せっかくWEBサイトに訪れてくれたユーザーが離脱してしまう事態にもつながります。

そのため、すぐに処理が完了するものであれば必要ありませんが、重い処理を行う場合などタスク完了までに時間がかかる場合には、プログレスバーで進行状況を示してあげることがユーザーにとって親切なのです。

未定プログレスバー

通常のプログレスバーはタスクの進捗状況を表すものですが、もしタスクを完了するまでの処理量やかかる時間を予測できないなどの理由で、進行状況を表すことができない場合は未定プログレスバーを使用します。

未定プログレスバーは、一定の幅のカラーバーが全体のバーの中を繰り返し動くようなアニメーションで表示されます。

これは通常のプログレスバーと違って全体が埋められたことによってタスクの進捗状況を示すのではなく、アニメーションが動いている間はタスクが現在進行中であることを視覚的・直感的に示す役割があります。

なお、Windowsではこの状態をマーキースタイル（英：Marquee Style）と呼ぶこともあります。

プログレスバー の使用方法

実際に運用しているWEBサイトでプログレスバーを実装する場合は、以下のルールに従うようにしてください。

進捗以外の状況も明示する

処理しているタスクがどの程度進行しているかだけでなく、「現在タスクの処理中であること」「現在どんな処理をしているか」等の詳細もあわせて明示すると、よりユーザーも安心します。

数値を使い分ける

プログレスバーの進捗状況を表す数値には「残り時間」と「現在何％進行しているか」の2種類の使い分けが必要です。

もし残りの処理にかかる時間が1分未満の場合には、現在処理が何％完了したかを明示するようにしましょう。

逆に残りの処理時間が1分以上かかる場合には、残り時間の見込みを明示する必要があります。1分以上処理に時間がかかるということは、ユーザーにとって通常よりも処理時間が長いことを意味します。そのため、残り時間を表示させることでユーザーが処理が完了するまでずっと待っているべきか、別の作業のため離脱するべきかを選べるようにしています。

脱出口を用意する

脱出口とは、「処理をキャンセルする」「注文を中止する」のように、ユーザーが途中で作業を離脱するための機能のことです。

ユーザーがその処理をしたくなくなった場合や、間違って処理を進めてしまった場合などにも対応できるように準備しておく必要があります。さらに、作業の途中で中止した場合、途中から再開できるようにしておくとさらに親切です。

処理中断後の状況を把握できるようにする

もしプログレスバーの作業をキャンセルした場合、それが「処理が途中で中断された状態」なのか「処理開始前に戻った状態」なのかを、ユーザーが把握できるようにしておくことも重要です。

スピナーとの使い分け

スピナー（英：Spinners）とは、通信時・ローディング中・ダウンロード中などに表示される、くるくると回るアニメーションの表示のことです。

プログレスバーと似ているものですが、使い分けが必要です。以下で解説していきます。

処理時間が長い場合

くるくる回るスピナーは、プログレスバーと違って処理が完了するまでの時間が明示されません。そのため、完了までに時間を要する作業にスピナーを使ってしまうと、ユーザーは「何か問題が発生したのではないか？」と不安に感じてしまいます。そうすると、ユーザーは作業の処理途中にも関わらず戻るボタンを押したり、そのサイトから離脱したりしてしまいます。

その反面、プログレスバーは処理の進捗状況を視覚的に表示してくれるため、ユーザーも「処理に時間がかかるんだな」と事前に把握できて処理完了を待ってくれます。

処理時間が1〜4秒の場合

ほとんどのユーザーにとって、処理が完了するまでに待てる時間は4秒までと言われています。それ以上長い場合はプログレスバーを使って、処理に長時間かかると明示しておく必要があります。

もしタスクが完了するまでにかかる時間が4秒以内であれば、ユーザーに「現在何かを読み込み中なのだな」と視覚的に知らせることのできるスピナーを使用するのが適しています。

処理時間が1秒未満の場合

ユーザーは、処理時間は早ければ早いほど望ましいと感じています。そんなユーザーにとって、「処理が迅速だ」と感じられる時間は1秒未満と言われています。1秒を経過しても何も表示されなかったり、処理中だと明示されない場合には、ユーザーは不安を感じ始めるようになります。

そのため、処理が1秒未満と早く済む場合には、何も表示する必要はありません。逆に1秒の中にスピナーやプログレスバーを表示させてしまうと、かえって何か問題があったのではないかと不安を感じさせてしまう危険があります。

プログレスバーの活用方法

プログレスバーは、処理が完了するまで時間がかかる場合に使用します。

しかし、待ち時間はユーザーにとって好ましいものではありません。そのため、待ち時間を少しでも快適に感じてもらえるように意識することも重要です。

プログレスバーの進行を早く感じさせる

プログレスバーの進むアニメーションの速度を、最初はゆっくりと初めて完了に近付くにつれて速めることで、完了までにかかる時間を早く感じさせる効果があります。

ここから分かる通り、視覚から受ける情報は、実際に体感する時間と同じくらい重要な要素と言われています。

視覚的な楽しさを示す

ただの横長のバーに比べ、クリエイティブなバーや画像にすることで、ユーザーが感じる待ち時間が長いという感覚を軽減する効果があります。

例えば、デザイン性のあるバーにしたり、待ち時間に見ていて楽しく感じるようなアニメーションを表示したりすれば、ユーザーの注意を逸らす効果があります。

まとめ

プログレスバーは、長時間の処理をする場合に、ユーザーを安心させたり無事に処理を完了してもらったりするために非常に重要です。

WEBサイトを運用している方や、WEBデザインに携わっている方は、ぜひこの記事を参考にして実装してみてください。