エラーシェイク — 動きの伝え方辞典

error shake / shake animation

エラーシェイク

フォーム送信に失敗したとき、入力欄が左右に小さく震えて「首を横に振る」ように拒否を伝える動き。translateXの減衰キーフレームで作り、エラー色の変化と必ずセットで使う。震え幅と回数が少し過ぎるだけで不快になる、匙加減が命の演出。

01 — Demo video

Play live →

02 — Prompt template

フォームの入力欄に error shake(エラー時のシェイク)を実装してください。

- 送信エラー時に入力欄を translateX で左右に振る。キーフレームは ±{{amplitude}}px から始めて 0 へ向かって直線的に減衰させ、{{shakes}}往復で止める
- 全体の長さは {{duration}}s、イージングは ease-out。動かすのは transform のみ(marginやleftでリフローさせない)
- シェイクと同時に入力欄のボーダーをエラー色に変え、下にエラーメッセージを表示する(震えだけでは何が悪いか伝わらないため色とテキストを必ず併用する)
- 再送信のたびにアニメーションを最初から再生し直せるようにする(Web Animations API の element.animate() か、クラスの付け直し)
- 入力を修正し始めたらエラー表示を解除する
- prefers-reduced-motion 時はシェイクせず、ボーダー色の変化とエラーメッセージだけで伝える

フォームの入力欄に error shake(エラー時のシェイク)を実装してください。

- 送信エラー時に入力欄を translateX で左右に振る。キーフレームは ±{{amplitude}}px から始めて 0 へ向かって直線的に減衰させ、{{shakes}}往復で止める
- 全体の長さは {{duration}}s、イージングは ease-out。動かすのは transform のみ(marginやleftでリフローさせない)
- シェイクと同時に入力欄のボーダーをエラー色に変え、下にエラーメッセージを表示する(震えだけでは何が悪いか伝わらないため色とテキストを必ず併用する)
- 再送信のたびにアニメーションを最初から再生し直せるようにする(Web Animations API の element.animate() か、クラスの付け直し)
- 入力を修正し始めたらエラー表示を解除する
- prefers-reduced-motion 時はシェイクせず、ボーダー色の変化とエラーメッセージだけで伝える

フォームの入力欄に error shake(エラー時のシェイク)を実装してください。

- 送信エラー時に入力欄を translateX で左右に振る。キーフレームは ±{{amplitude}}px から始めて 0 へ向かって直線的に減衰させ、{{shakes}}往復で止める
- 全体の長さは {{duration}}s、イージングは ease-out。動かすのは transform のみ(marginやleftでリフローさせない)
- シェイクと同時に入力欄のボーダーをエラー色に変え、下にエラーメッセージを表示する(震えだけでは何が悪いか伝わらないため色とテキストを必ず併用する)
- 再送信のたびにアニメーションを最初から再生し直せるようにする(Web Animations API の element.animate() か、クラスの付け直し)
- 入力を修正し始めたらエラー表示を解除する
- prefers-reduced-motion 時はシェイクせず、ボーダー色の変化とエラーメッセージだけで伝える

03 — Params

amplitude(震え幅 px) — 範囲 2〜16 / 初期 8
初回の振れ幅。6〜10pxが「拒否」の合図として十分。14pxを超えると怒られている感じになる。
duration(震える時間 s) — 範囲 0.2〜1 / 初期 0.4
0.3〜0.5sで振り切る。0.7sを超えると震えが目的化して、エラー内容を読む邪魔になる。
shakes(往復回数) — 範囲 2〜6 / 初期 3
左右1往復を1回と数える。3往復が定番。5回以上は同じ時間に詰め込まれて痙攣に見える。

04 — Vocab

減衰(decay) — 振れ幅を回を追うごとに小さくすること。±8→−6→+4→0のように減らすと物理的な揺れに見える。
キーフレーム — アニメーションの通過点の列。シェイクは左右の折り返し位置を並べたキーフレームで定義する。
element.animate() — Web Animations API。JSからキーフレームを渡して再生でき、同じ要素で何度でも撃ち直せるのでシェイク向き。
ネガティブフィードバック — 操作の失敗を伝える応答。動きだけに頼らず色・テキストを併用するのが原則(色覚・reduced-motion対応)。

05 — NG → OK examples

言い方: 「「エラーのときに入力欄をプルプルさせて」」

なぜNG: 幅・回数・減衰が未定義のまま、一定振幅で延々と揺れる過剰な実装が返ってきがち。色やメッセージの併用にも言及しないと「揺れるだけで理由が分からないフォーム」になり、アクセシビリティ的にも落第する。

言い方: 「「error shakeを実装。translateXを±8pxから3往復で減衰、0.4s ease-out、transformのみ。同時にボーダーをエラー色+メッセージ表示、入力再開で解除。reduced-motion時は色とメッセージのみ」」

なぜOK: 振幅・回数・減衰・時間・色との併用・解除条件まで指定。「減衰させる」の一言で機械的な等幅の揺れを防ぎ、物が首を振るような自然な止まり方になる。