コンテンツにスキップ
非エンジニアのためのVibeCoding入門

動きを付ける(アニメーション/マイクロインタラクション)

この章でわかること: なぜ「動き」が体験の質を上げるのか、そしてプロトタイプやデモの完成度が上がる範囲で、過度に凝らず上品に動きを付けるための最低限の型。デザインを「動く本物」に近づける、最後のひと押しです。

デザインシステムの章では色・余白・文字といった静止した見た目を整えました(デザインシステムとは)。でも実物のアプリは、触れば反応し、状態が変われば滑らかに切り替わります。この「動き」が抜けていると、どれだけ配色が整っていても、どこか紙芝居のように見えてしまいます。

なぜ動きが効くのか

Section titled “なぜ動きが効くのか”

動きは、装飾ではなくコミュニケーションです。うまく使うと、言葉を足さずに3つのことを伝えられます。

  • 手応えを返す: ボタンを押したときに軽く沈む・色が変わると、「今の操作は届いた」と体が納得します。無反応なボタンは、押したか分からず不安を生みます。
  • 状態の変化を伝える: 画面が切り替わるとき、パッと入れ替わるより滑らかに移ると、「今どこからどこへ動いたか」が直感的に分かります。
  • 印象を底上げする: 細部が滑らかに動くだけで、同じ中身でも「丁寧に作られている」という印象になります。商談やデモでの説得力に直結します。

よく使う動きの型

Section titled “よく使う動きの型”

覚えるべきは多くありません。次の4つを押さえれば、プロトタイプの完成度は十分に上がります。

hover(カーソルを乗せた反応)

Section titled “hover(カーソルを乗せた反応)”

PCでマウスカーソルを要素の上に乗せたときの反応です。ボタンの色がわずかに濃くなる、リンクに下線が付く——「ここは押せますよ」という無言の案内になります。ごく控えめで構いません。

transition(滑らかに変わる)

Section titled “transition(滑らかに変わる)”

色や大きさが変わるとき、パッと切り替わるのではなく、コンマ数秒かけて滑らかに移り変わる設定です。hover の色変化やメニューの開閉に添えるだけで、動き全体が一段上品になります。動きの「角を丸める」イメージです。

画面遷移

Section titled “画面遷移”

ページやビューが切り替わるときの動きです。すっと現れる・横から差し込むといった短い演出で、「別の場所に来た」という感覚が自然になります。ここも長すぎると待たされて感じるので、短く。

読み込み中の表示

Section titled “読み込み中の表示”

データの取得など、時間のかかる処理の間に見せる表示です。くるくる回るアイコンや、内容の形だけを薄く見せる「骨組み(スケルトン)」を出すと、固まったのではなく待っていると伝わります。この「待ち時間をどう扱うか」は非同期の考え方そのものなので、あわせて待ち時間と非同期という考え方も読んでおくと、頼み方が一段しっかりします。

イージング(緩急)を一言だけ

Section titled “イージング(緩急)を一言だけ”

動きには緩急があります。始めはゆっくり、終わりでふっと減速する——現実の物が動くときの感覚に近く、これがあるだけで「速すぎて何が起きたか分からない」「カクカクして安っぽい」を避けられます。専門用語ではイージングと呼びますが、非エンジニアが覚える必要はありません。「自然な緩急で」とだけ伝われば十分です。

アクセシビリティへの配慮

Section titled “アクセシビリティへの配慮”

動きは人によっては負担になります。最低限、次の2点だけ意識してください。

  • 「動きを減らす」設定を尊重する: OSには、めまいや乗り物酔いを起こしやすい人のために「視差効果を減らす/アニメーションを減らす」という設定があります。技術的には prefers-reduced-motion という仕組みで、これがオンの人には動きを控えめにできます。AIに「prefers-reduced-motion に対応して」と一言添えるだけで配慮してくれます。
  • 過度な点滅を避ける: 激しい点滅は、ごく一部の人に発作を誘発する危険があります。装飾目的の点滅は使わないのが無難です。

確認の観点

Section titled “確認の観点”

動きを付けたら、必ず自分で触って確かめます。とくに次を見てください。

  • スマホでも自然か: スマホにはマウスの hover がありません。タップしたときの反応がきちんとあるか、指で触って確認します。
  • 邪魔になっていないか: 操作のたびに待たされる、目が忙しい、と感じたら動きが過剰です。減らしましょう。

この「触って確かめる」観点全般は、生成物の良し悪しの見分け方に一覧があります。動きも「動いて見えること=正しいこと、ではない」の一部として、同じ目線で点検してください。

なぜ大事か

Section titled “なぜ大事か”

色や余白を整えるのが「静止画としての完成度」なら、動きは「触れる実物としての完成度」です。控えめで自然な動きがひとつ添うだけで、同じプロトタイプが「作りかけ」から「動く本物」へと印象を変え、デモの説得力が上がります。凝りすぎず、誰にとっても心地よい範囲で——それが、大人の提案にふさわしい動きの付け方です。

参考リンク(情報ソース)

Section titled “参考リンク(情報ソース)”