パスワード強度メーター（打つたびにバーが伸びて色が変わる）

password strength meter / password strength indicator

パスワード欄に1文字打つたびに強度を判定し、入力欄の下のバーが「短すぎる→弱い→ふつう→強い」の4段で伸びながら赤→橙→黄→緑へ変わる演出。注意書きを読ませなくても、あと何を足せばいいかが打っている最中に伝わる。肝は段階を4つ程度に丸めることと、バーと同じ場所に言葉でも段階を書くこと。

01 — Demo video

Play live →

02 — Prompt template

パスワード入力欄に password strength meter を実装してください。

- 入力のたびに(input イベント) パスワードを採点し、空欄・短すぎる・弱い・ふつう・強い の5状態のどれか1つにする。採点は zxcvbn などの推定ライブラリで 0〜4 のスコアを出し、0〜1=短すぎる / 2=弱い / 3=ふつう / 4=強い に丸める(「8文字以上・記号必須」の自前ルールだけで判定しない)
- 判定は最後の入力から {{debounce}}ms 待ってから行う(0 なら即時)
- メーターは入力欄の真下に置き、形は {{style}}。bar なら高さ6px・角丸3pxのトラックの中で、塗りを 短すぎる 34% / 弱い 57% / ふつう 71% / 強い 100% の長さにする。segments なら4マスを並べ、段階の数だけ左から点ける
- 色は 短すぎる=赤 / 弱い=橙 / ふつう=黄 / 強い=緑。空欄のときは塗りを長さ0にしてトラックだけ残す
- 長さは width ではなく transform: scaleX(比率) と transform-origin: left で変え、scaleX と background-color を {{duration}}s で遷移させる(リフローさせない)
- メーターの右か下に段階名を文字でも出す(色覚に頼らない)。その文字を aria-live="polite" にして、変わったときに読み上げさせる。入力欄とは aria-describedby で結ぶ
- 「表示」の切り替えで type を password / text に替えられるようにし、切り替えても採点とメーターは保つ
- prefers-reduced-motion 時は遷移を付けず、長さと色を即時に切り替える(段階名の文字はそのまま出す)

パスワード入力欄に password strength meter を実装してください。

- 入力のたびに(input イベント) パスワードを採点し、空欄・短すぎる・弱い・ふつう・強い の5状態のどれか1つにする。採点は zxcvbn などの推定ライブラリで 0〜4 のスコアを出し、0〜1=短すぎる / 2=弱い / 3=ふつう / 4=強い に丸める(「8文字以上・記号必須」の自前ルールだけで判定しない)
- 判定は最後の入力から {{debounce}}ms 待ってから行う(0 なら即時)
- メーターは入力欄の真下に置き、形は {{style}}。bar なら高さ6px・角丸3pxのトラックの中で、塗りを 短すぎる 34% / 弱い 57% / ふつう 71% / 強い 100% の長さにする。segments なら4マスを並べ、段階の数だけ左から点ける
- 色は 短すぎる=赤 / 弱い=橙 / ふつう=黄 / 強い=緑。空欄のときは塗りを長さ0にしてトラックだけ残す
- 長さは width ではなく transform: scaleX(比率) と transform-origin: left で変え、scaleX と background-color を {{duration}}s で遷移させる(リフローさせない)
- メーターの右か下に段階名を文字でも出す(色覚に頼らない)。その文字を aria-live="polite" にして、変わったときに読み上げさせる。入力欄とは aria-describedby で結ぶ
- 「表示」の切り替えで type を password / text に替えられるようにし、切り替えても採点とメーターは保つ
- prefers-reduced-motion 時は遷移を付けず、長さと色を即時に切り替える(段階名の文字はそのまま出す)

パスワード入力欄に password strength meter を実装してください。

- 入力のたびに(input イベント) パスワードを採点し、空欄・短すぎる・弱い・ふつう・強い の5状態のどれか1つにする。採点は zxcvbn などの推定ライブラリで 0〜4 のスコアを出し、0〜1=短すぎる / 2=弱い / 3=ふつう / 4=強い に丸める(「8文字以上・記号必須」の自前ルールだけで判定しない)
- 判定は最後の入力から {{debounce}}ms 待ってから行う(0 なら即時)
- メーターは入力欄の真下に置き、形は {{style}}。bar なら高さ6px・角丸3pxのトラックの中で、塗りを 短すぎる 34% / 弱い 57% / ふつう 71% / 強い 100% の長さにする。segments なら4マスを並べ、段階の数だけ左から点ける
- 色は 短すぎる=赤 / 弱い=橙 / ふつう=黄 / 強い=緑。空欄のときは塗りを長さ0にしてトラックだけ残す
- 長さは width ではなく transform: scaleX(比率) と transform-origin: left で変え、scaleX と background-color を {{duration}}s で遷移させる(リフローさせない)
- メーターの右か下に段階名を文字でも出す(色覚に頼らない)。その文字を aria-live="polite" にして、変わったときに読み上げさせる。入力欄とは aria-describedby で結ぶ
- 「表示」の切り替えで type を password / text に替えられるようにし、切り替えても採点とメーターは保つ
- prefers-reduced-motion 時は遷移を付けず、長さと色を即時に切り替える(段階名の文字はそのまま出す)

03 — Params

duration(伸び縮みと色の遷移 s) — 範囲 0〜0.6 / 初期 0.15
段階が変わったときにバーの長さと色が移る時間。0.12〜0.2sが打鍵の速さに追いつく(観察元は0.15s)。0.4sを超えると、速く打つ人には前の段階の色が遅れて付いてくる。0で瞬時に切り替え。
style(メーターの形) — 選択: bar / segments（初期: bar）
barは1本のバーが段階ごとの長さまで伸びる(観察元。4段の長さは全体の34%・57%・71%・100%)。segmentsは4つのマスが左から点く。マスは「残りあと何段か」が数えられ、barは細い場所でも収まる。
debounce(判定までの待ち ms) — 範囲 0〜600 / 初期 0
最後に打ってから判定するまでの間。0は1打ごとに即判定(観察元は keyup ごと)。判定が重い・段階が細かく行き来してチラつくなら150〜300ms。400msを超えると打ち終わってからメーターが動くので、打ちながら直す手掛かりにならない。

04 — Vocab

パスワード強度推定(zxcvbn) — 辞書の単語・キーボード配列・日付・繰り返しなどを見て、総当たりで破られるまでの推定回数から 0〜4 のスコアを返すライブラリ。「記号を1つ入れたか」だけのルールより実際の破られにくさに近い。WordPress の強度メーターもこれを使う。
段階表示(discrete levels) — 連続値をそのまま見せず、少数の段階に丸めて見せること。4段程度なら「あと1段で緑」が一目で読め、1文字ごとにバーが細かく揺れない。
インライン検証(inline validation) — 送信を待たずに、入力しているその場で結果を返すフォームの作り。直す場所と直すタイミングが一致するので、送信後のエラー一覧より手戻りが少ない。
デバウンス(debounce) — 連続するイベントのうち、最後の1回から一定時間経ってから処理すること。採点が重いときや、段階が行き来してチラつくときに入れる。
aria-describedby — 入力欄に補足説明の要素を結び付ける属性。スクリーンリーダーが欄に入ったときに強度の説明を一緒に読み上げる。

05 — NG → OK examples

言い方: 「「パスワードの強さが分かるメーターを付けて」」

なぜNG: 送信時にだけ「弱いパスワードです」とエラーを出す実装や、文字数に比例してバーが伸びるだけの実装が返ってきやすい。文字数比例だと「aaaaaaaaaaaa」が満タンになる。色だけで段階を示して文字が無いことも多く、色覚によっては赤と緑の違いが読めない。width をアニメーションさせて1打ごとにリフローする実装も普通に返ってくる。

言い方: 「「password strength meterを。inputのたびにzxcvbnで採点、0〜1短すぎる/2弱い/3ふつう/4強いの4段に丸める。入力欄の真下に高さ6pxのバー、長さは34/57/71/100%をscaleXとorigin leftで、赤→橙→黄→緑を0.15sで遷移。段階名を文字でも出してaria-live=polite、reduced-motionでは即時切り替え」」

なぜOK: 採点の出どころ(推定ライブラリ)と段階への丸め方・各段の長さと色・遷移時間・動かすプロパティまで指定している。「文字でも出す」が無いと色だけのメーターになり、「丸める」が無いと文字数比例の当てにならないバーになる。