← 一覧へ

やってみよう何も入れずに（または適当に入れて）「ログイン」を押してみてください。正解は 1234 です

アニメーション・演出マイナー（知る人ぞ知る）

シェイクアニメーション

Shake Animation / Error Shake

パスワードを間違えると、入力欄が左右にブルブルッと震えて「違うよ」と知らせる。

別名エラーシェイクブルブル首振りアニメーションウォブルWiggle

どこで使われている？

よく見かける場所
iPhoneのロック画面、ログイン画面、パスコード入力
使うとよい場面
入力が間違っていることを、一瞬で直感的に伝えたいとき
避けたい場面
理由を伝えないこと（必ずエラー文と一緒に使う）

補足iPhoneのロック画面でパスコードを間違えたときの動きが有名です。

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。

HTML / CSS / JavaScript で「シェイクアニメーション（Shake Animation / Error Shake）」を実装してください。

動き：入力が間違っていたとき、入力欄を短い時間で左右に数回小刻みに揺らし、枠を赤くしてエラー文を表示する。揺れは0.4秒ほどで止め、再入力を始めたら赤い表示を消す。

使う部品：CSS の @keyframes（translateX を左右に）
もっと詳しく：プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

WebサイトならCSS の @keyframes（translateX を左右に）
iPhoneアプリなら.keyframeAnimator で offset を揺らす
AndroidアプリならAnimatable で offset を揺らす
Flutterならflutter_animate パッケージの .shake()
React Nativeならreact-native-reanimated の withSequence

似ているもの・一緒に使うもの