本記事は、書籍『インタフェースデザインの心理学』（Susan Weinschenk著）を土台に、脳と行動の視点からUI／UXを読み解くシリーズの一本です。今回は「6章：ヤル気」から、進捗バーが人の行動に与える影響を取り上げます。「見えること」が、なぜこれほどまでに人を動かすのか。その仕組みを一緒に探っていきましょう。
気づいたらオンライン講座の続きを受講していた。アンケートの最後まで答えてしまった。購入フォームを最後まで埋めていた。——そんな経験はありませんか？ 「あと少しで終わる」という感覚は、不思議なほど人を動かします。その陰で静かに働いているのが、画面の端にひっそり存在する「進捗バー」です。あの小さな帯は、なぜあれほど強く私たちの意欲を引き出すのでしょうか。
UXデザインの出発点を「人間理解」に置くとは、こうした「思わずやり遂げてしまう」体験の仕組みを前提に設計することです。サンアンドムーンは、その視点を大切にしながら、ユーザーの行動を支える設計を考えています。
ページコンテンツ
「見える化」されると、脳はやる気を出す
人間の脳は、ゴールが「見えている」状態に対して強く反応します。進捗が数値やバーとして可視化されると、脳は自動的に「どこまで来たか」「あとどのくらいか」を計算し始め、そこに意欲が生まれます。これは、前回ご紹介したゴール勾配効果とも深く結びついています。目標に近づくほどやる気が増すという心理が、進捗バーによって視覚的に強化されるのです。
ポイントは、ゴールが「なんとなくある」ではなく、「あと〇〇で達成」と具体的に伝わることです。たとえば、プロフィール設定画面で「完成度 60%」と表示されているだけで、多くのユーザーは残りを埋めようと動き出します。情報として何も変わっていなくても、「見えること」によって行動が変わる——これが可視化の本質的な力です。
「完了していないこと」が気になる、ゼイガルニク効果
進捗バーが人を動かすもうひとつの理由が、ゼイガルニク効果です。これは「途中で中断されたことの方が、完了したことよりも記憶に残りやすい」という心理現象で、人は未完了のタスクを無意識に気にし続けます。
進捗バーは、この効果を視覚的に活性化させます。「あと30%残っている」という状態は、脳にとって「未解決の宿題」のような状態です。放置するとどうにも落ち着かない。だから戻ってくる。——あるサービスが「プロフィール入力率」をバーで示し始めたところ、入力完了率が大幅に上がったという事例は、まさにこのメカニズムを活用したものです。デザイナーが「完了させてください」と頼むより、バーが黙って語りかける方が、ずっと人は動くのです。
フォームの離脱を防ぐ「ステップ表示」という設計
進捗の可視化が最も効果を発揮しやすいのが、複数ステップのフォームです。「1 / 4」「STEP 2 of 3」といった表示が一つあるだけで、ユーザーの心理は大きく変わります。「どのくらいかかるかわからない」という不安が消え、「あと少し」という見通しが生まれるからです。
UIデザインの7つの原則の中でも「フィードバック」と「認知負荷の軽減」が挙げられていますが、ステップ進捗はまさにその両方を一度に担います。「今どこにいるか」を教えることで不安をなくし、「あとどのくらいか」を示すことで続ける理由を与える。見かけは小さな工夫ですが、フォームの完了率に直結する、侮れない設計要素です。
特に問い合わせフォームや資料請求フォームなど、企業サイトにおけるコンバージョンに関わる場所では、この設計の有無が成果を左右することも少なくありません。
「報酬感」を設計する——完了後の体験も含めて考える
進捗バーが100%になった瞬間、人は達成感を感じます。この感覚は、単なる「終わった」ではなく、脳が報酬として受け取るものです。オペラント条件付けの観点で言えば、「行動→完了→達成感」という流れが成立し、次の行動への動機が生まれます。
だからこそ、100%到達後のUX設計も重要です。「完了しました！」という素っ気ないメッセージより、「おめでとうございます」「準備が整いました」といった温かな言葉が添えられることで、ユーザーの体験は質的に変わります。ちょっとしたアニメーションや色の変化も、この瞬間の「報酬感」を高めます。進捗バーは、途中だけでなく「ゴールした瞬間」まで設計してはじめて、本当の力を発揮するのです。
まとめ
進捗バーは、「見えること」によって脳のやる気スイッチを入れる、シンプルながら強力なUI要素です。ゴールの可視化はゴール勾配効果を強化し、未完了の状態はゼイガルニク効果によって「戻ってきたくなる」衝動を生みます。フォームのステップ表示は不安を取り除き、完了後の体験設計は達成感という報酬を届けます。「小さなバー一本」と侮ることなく、途中から完了後まで一連の体験として丁寧に設計することが、ユーザーの行動を自然に後押しする第一歩になります。
記事監修
中谷 浩和
株式会社サンアンドムーン｜代表取締役
1976年創業のデザイン事務所を前身に、Webコンサルティング・UI/UXデザインを専門とする。
国際標準のUX設計プロセスを学ぶ Google UX Design Professional Certificate を取得し、 上級ウェブ解析士 としてデータ主導のサイト改善にも精通。デザイン思考を軸に、ユーザー認知・行動・文脈からWebサイトの課題を捉え直し、成果につながる設計へ落とし込むことを使命としている。システム設計、フロントエンド技術、SEO・パフォーマンス改善まで技術知識を横断し、サイト全体を見通したディレクションを得意とする。自動車メーカー、銀行・クレジットカード、保険などの大手から中小企業まで、数値で検証しながら改善を積み重ねる実践的なコンサルティングを提供している。
