「あと少し」が人を動かす——目標勾配効果が変えるWebサイトの体験設計

『インタフェースデザインの心理学』（Susan Weinschenk著）をベースに、人の行動や意思決定を支える心理のしくみを、Web・UIデザインの視点から読み解くシリーズです。今回は第6章「ヤル気」から、目標勾配効果をUX設計の実装視点で深掘りします。

フォームを途中で閉じたこと、ありませんか。「まだ続くのかな」と思った瞬間、なんとなく気力が薄れてしまった経験は、多くの方に覚えがあるはずです。あの「やめたくなる感覚」の正体は、意志の弱さではありません。ゴールまでの距離が見えないことで、脳が「続けるべきか」を判断できなくなっているのです。サンアンドムーンでは、ユーザーがそっと前に進めるよう、「距離の見せ方」を体験設計の重要な要素と考えています。

「距離が見えない」ことが、離脱を生む

人は目標への距離が縮まるほど行動力が高まる——これを「目標勾配効果」と呼びます。裏を返せば、ゴールが見えないときほど、行動は止まりやすくなります。

Webサイトのフォームやアンケートで起きる離脱の多くは、「操作が難しい」からではなく「あとどのくらいかかるかわからない」という不安から生まれています。残りのステップが見えない、入力がどこまで進んでいるかわからない——そうした状態では、ユーザーは無意識のうちに「続けるコスト」を過大に見積もってしまいます。

ゴールまでの距離を正確に伝えること。それだけで、ユーザーの離脱率は大きく変わります。「あと少し」が見えた瞬間に、人の行動力は自然と引き出されるからです。

この心理の背景について詳しくは、目標に近づくほど「やる気」が出るもあわせてご覧ください。

「現在地」を伝えるUIの設計

目標勾配効果を活かすうえで、まず取り組みたいのが「現在地の可視化」です。ユーザーが今どこにいて、ゴールまであとどのくらいかを、画面上で直感的に把握できる状態をつくることです。

代表的な実装が「ステップ表示」と「プログレスバー」です。「STEP 2 / 3」「あと1問で完了」「入力完了まで70%」といった表示は、ユーザーに現在地とゴールの両方を同時に示します。

ここで大切なのは、表示の「正直さ」です。実際には5ステップあるのに「もう少し！」という表示を使い続けたり、進捗バーが途中で突然大きく跳ね上がったりすると、ユーザーの期待を裏切ることになります。期待を裏切られた体験は、次回の離脱につながります。

進捗の可視化については、“ちょうどよさ”が体験を変える──段階的開示と情報設計のヒントでも、情報の届け方という観点から詳しく解説しています。

「ゴール」は一種類ではない

進捗表示の設計を考えるとき、見落としがちなのが「ゴールには種類がある」という視点です。ゴールには大きく分けて、最終ゴール（= タスクの完了）と中間ゴール（= マイルストーン）の二つがあります。

たとえば、会員登録という最終ゴールに向かう途中に「プロフィール入力」「メール認証」「初期設定」という中間ゴールが存在する場合、それぞれを小さな達成体験として設計することが重要です。中間ゴールをクリアするたびに「完了」のフィードバックが返ってくれば、ユーザーは「前に進んでいる」という感覚を繰り返し得ることができます。

長いフォームや複数ページにまたがるフローでは、最終ゴールだけを示すより、途中の達成感をこまめに演出するほうが離脱防止に効果的です。「大きな一歩」より「小さな一歩を何度も」——その積み重ねが、ユーザーをゴールへと自然に導きます。

「すでに始まっている」と感じさせる工夫

目標勾配効果には、もうひとつ興味深い応用があります。ゴールへの距離は、スタート地点を操作することでも縮められるという点です。

会員登録フォームで「プロフィール完成度 30%」と初期値を表示する、コンテンツを読み始めたらすぐに進捗が動き出す——こうした「もう始まっている」演出が、ユーザーの継続意欲を引き出します。

完全にゼロからのスタートより、すでに一歩踏み出した状態として体験させること。人は「せっかく始めたなら続けたい」という感覚を自然に持ちます。これは損失回避の心理とも重なるもので、「今やめると、ここまでの進捗がもったいない」という感情が後押しになります。

ただし、この演出も「正直さ」が前提です。実際には何も入力していないのに「30%完了」と表示することに違和感を覚えるユーザーもいます。あくまで体験の入口をなだらかにするための工夫として、文脈に合った使い方が重要です。

スマートフォンで「距離感」はより繊細になる

進捗表示の重要性は、スマートフォンでの利用においてとりわけ大きくなります。PCのように画面全体を俯瞰できないスマートフォンでは、ユーザーは「今どの画面にいるのか」「全体のどのあたりにいるのか」が把握しにくい状態にあります。

一画面に収まる情報量が少ないため、スクロールを重ねるうちに「いったいどこまで続くのか」という感覚が強くなりやすいのです。特に入力項目の多いフォームや、長文の確認画面では、この感覚が離脱の直接的なきっかけになることがあります。

スマートフォンの設計では、固定ヘッダーへのステップ表示の組み込みや、画面遷移のたびに「残りX項目」と表示するような、小まめな現在地の通知が有効です。「あとどのくらいか」を常に手の届く場所に置くことが、モバイルでの完了率を高める鍵になります。

「続けたくなる」設計と「続けさせる」設計の違い

目標勾配効果を使ったUI設計には、根本的な方向性の違いがあります。ユーザーが「自然と続けたくなる」設計か、「続けさせるために操作する」設計か、です。

前者は、ゴールまでの距離を正確に伝え、進捗を実感させることでユーザーの内側にある意欲を引き出します。後者は、ゴールをわざとぼかしたり、焦りを煽ったりしてユーザーを引き留めようとします。

この違いは、短期的には見えにくいかもしれません。しかし長期的には、前者がユーザーとの信頼を築き、後者が不信感を蓄積させていきます。

フィードバック設計や報酬の与え方についても同じ考え方があてはまります。関連する観点はオペラント条件付けとは？UXデザインに活きる”行動の仕組み”で詳しく取り上げています。

サンアンドムーンが大切にしているのは、ユーザーが「自分のペースで、気持ちよく進めた」と感じられる体験の設計です。「あと少し」は、そっと背中を押すものであって、追い立てるものではないと考えています。

記事監修

中谷 浩和

株式会社サンアンドムーン｜代表取締役

1976年創業のデザイン事務所を前身に、Webコンサルティング・UI/UXデザインを専門とする。
国際標準のUX設計プロセスを学ぶ Google UX Design Professional Certificate を取得し、 上級ウェブ解析士 としてデータ主導のサイト改善にも精通。デザイン思考を軸に、ユーザー認知・行動・文脈からWebサイトの課題を捉え直し、成果につながる設計へ落とし込むことを使命としている。システム設計、フロントエンド技術、SEO・パフォーマンス改善まで技術知識を横断し、サイト全体を見通したディレクションを得意とする。自動車メーカー、銀行・クレジットカード、保険などの大手から中小企業まで、数値で検証しながら改善を積み重ねる実践的なコンサルティングを提供している。