ピーク・エンドの法則
体験の記憶は、全体の平均ではなく「最も強く感じた瞬間」と「終わり方」でほぼ決まる。長さはあまり影響しない。
Peak-End Rule
なぜ効くか
Daniel Kahneman らが 1990 年代に行った実験で、冷水に手を浸す不快な体験を「短く終わる」より「最後に少しぬるくなる長い版」のほうが好まれた。体験している自分と、あとで思い出す自分は別で、思い出す側はピークと終わりだけを頼りに評価する。Web UI では、長い手続きの最後（注文確定・登録完了・目標達成）にどんな画面を出すか、失敗したとき（読み込み失敗・検索 0 件・404）にどう立て直すかが、途中の細かな出来のよさより記憶に残る。終わりで放り出されると、それまでの手間まで悪く思い出される。逆に、途中の小さな失敗は、終わりが良ければ薄れる。
UIでの当て方
- 01完了画面には「何が終わったか」「次に何が起きるか」を書き、必要なら短い祝いの演出を 1 回だけ出す。
- 02失敗の画面（エラー・0 件・404）は行き止まりにせず、その場で再試行・条件の緩和・戻り先を出す。
- 03初回の手順（オンボーディング）の最後の画面だけ、ボタンの文言を「はじめる」に変えて到達を示す。
- 04進捗の見える化（チェックリスト・段階表示）で、途中にも小さな達成の山を作る。
誤用・反例
- 毎回の保存や送信のたびに紙吹雪を出す。ピークは頻発すると平坦になる。
- 完了画面をアンケートや広告で埋め、終わりの印象を別の要求で上書きする。
この原則を体現するパーツ
- クリック
紙吹雪セレブレーション
Confetti Celebration
ボタンを押すと紙吹雪が舞い上がる成功演出。依存ゼロの自前パーティクルが重力で落下＋回転。連打しても枠内に収まる。
- JS
- ホバー
紙吹雪バースト
Canvas Confetti Burst
ボタンを押すと画面上部から紙吹雪が舞い落ちる。矩形パーティクルをscaleYで周期的に潰し3D回転のフラッターを近似、重力+左右の揺れで落下させる。EC購入完了・フォーム送信完了などの祝祭演出に。
- JS
- Canvas
- クリック
送信ボタン演出解説あり
Button Loading State
送信ボタンを押すとスピナーが回り、完了後にチェックマークへ変化。処理中の状態を明示する。
- JS
- クリック
プログレスチェックリスト
Progress Checklist
初期設定を促すチェックリスト。項目をクリックすると打ち消し線とチェックのアニメーションで完了扱いになり、上部のプログレスバーと「3/5 完了」カウンターが進む。
- JS
- ドラッグ
スキップできるオンボーディング
Onboarding Pager with Skip
初回起動の 3 画面。スワイプか「次へ」で進み、右上の「スキップ」でいつでも抜けられる。最後の画面だけボタンが「はじめる」に変わり、押すと本編へ。
- JS
- クリック
エラー状態解説あり
Error State
読み込み失敗をその場で伝えるエラーパネル。「再試行」を押すと一瞬スピナーが回り、成功状態へ切り替わる。
- JS
- クリック
0件の立て直し
No Results Recovery
条件を重ねて0件になった検索結果を、行き止まりにしない。「条件を1つ外すと何件になるか」をボタンで示し、押すとその場で結果が出る。近い候補も先に見せる。
- JS
- 静的
404ページ解説あり
404 Page
ページが見つからないときの案内。大きな「404」とやさしい文言、ホームへ戻る導線を中央に据える。上空を漂うイラストがゆっくり浮遊する。
- CSSのみ
関わるカテゴリ
出典
- Nielsen Norman Group別サイト ↗ピーク・エンドの法則の UX への応用。Kahneman らの実験の紹介を含む。
- Laws of UX別サイト ↗Peak-End Rule の項。原典（Kahneman ほか 1993）への参照がある。