§12-01
Streak (連続)
連続して利用した日数を数えて表示する。
続けた日数を見せ、途切れさせたくない気持ちで習慣化を後押しする。学習や運動記録など、毎日の継続自体が価値になるサービスに向く。
実装のポイント日付の境界はユーザーのタイムゾーンで判定し、1 日休んでも即リセットしない「フリーズ」枠を用意すると離脱を防げる。今日の未達状態を明示して行動を促す。
- CSS のみ
§12
エンゲージメント・ゲーミフィケーション
Engagement
- Patterns
- 12
- Demos
- 12
§12-02
達成 / アチーブメント
条件を満たすとバッジが解除されて表示される。
小さな達成に区切りと報酬を与え、続ける理由を作る。学習や運動の記録など、継続そのものが価値になるサービスに向く。
実装のポイント未解除のバッジも条件付きで見せると目標になる。解除は通常サーバー側で判定し、クライアントでは解除通知を aria-live=polite で読み上げる。
- 状態管理
§12-05
ガチャ / mystery box
ランダムな報酬を演出付きで引ける。
何が出るか分からない報酬で、繰り返し訪れる動機を作る。ログインボーナスやイベントで、確定報酬より期待感を演出したいときに使う。
実装のポイント抽選はサーバー側で行い、クライアントは結果を演出するだけにする。排出確率を画面上で開示し、累積確率は配列で持って一様乱数と比較する。
- アニメーション
- タイマー
§12-06
リアクション (絵文字)
投稿に絵文字で反応を付ける。
コメントを書くほどでもない共感や了解を一押しで伝えられる。チャットやフィードで、やり取りの往復を増やさずに反応を集めたいときに使う。
実装のポイントリアクションは押下で楽観的に件数を更新し、自分が押した状態を aria-pressed で示す。ピッカーは Escape と外側クリックで閉じ、絵文字ボタンに名前のラベルを付ける。
- 状態管理
- 楽観的更新
§12-07
Like / heart
一度押すだけで好意を示せるボタンを置く。
投稿への軽い肯定を手間なく伝える。コメントを書くほどではない反応を集めて、投稿者に手応えを返す。
実装のポイントトグルは楽観的に件数を即時反映し、失敗時は元に戻す。状態は aria-pressed で伝え、パーティクル演出は prefers-reduced-motion で抑止する。
- 楽観的更新
- アニメーション
§12-08
Bookmark / save
気になった項目を保存して後で見返す。
今は読めない内容を手元に残し、後でまとめて確認できる。記事や商品など、一覧へ戻ってくる動機を作りたい場面で使う。
実装のポイント保存状態は aria-pressed で示し、楽観的に切り替えて失敗時にロールバックする。件数を出すならトグルの前状態から増減を計算し、連打は直前のリクエストを打ち切る。
- 楽観的更新
- 状態管理
残り 4 件のパターン投票 (poll) / アンケート / NPS / 紹介プログラム / referral link …
§12-10
アンケート / NPS
0〜10 の段階で推奨度を尋ねる短い調査を出す。
利用者の満足度を少ない負担で定期的に測れる。導入後しばらく経った時点や主要な操作の完了後に出すと回答率と精度が上がる。
実装のポイント0〜10 の 11 段階を等幅で並べ、両端にラベルを付けて意味を固定する。回答後は低スコアにだけ理由の自由記述を追加で聞くと離脱が少ない。
- フォーム
§12-11
紹介プログラム / referral link
招待リンクを共有し、紹介した側に特典を与える。
既存の利用者を通じて新規利用者を増やす。広告より信頼される口コミを後押ししたいときに使う。
実装のポイント招待リンクは Clipboard API でコピーし、失敗時は選択可能なテキストを残す。コピー完了はアイコン変化に加えて aria-live=polite で読み上げる。
- ブラウザ API
- タイマー
§12-12
Daily quest
毎日更新される小さな課題を提示する。
毎日開く理由を作り、何をすればよいかを明確にする。習慣化を狙う学習や健康系のアプリで使う。
実装のポイントクエストの日次リセットはユーザーのローカル日付境界で判定し、完了状態はサーバーで保持する。報酬は全達成時のボーナスを別枠にすると最後の 1 つを押し切らせやすい。
- 状態管理