マイクロインタラクション28種｜CSSコピペ+AIプロンプト
操作に対する小さな反応の積み重ねが、使い心地の差になります。チェックが入る、切り替わる、通知が出る——こうした瞬間に適切な動きがあると、操作が受け付けられたことが確実に伝わります。ここでは日常的なUI操作に反応を返すパターンを28種類集めました。
マイクロインタラクション · 28 EFFECTS
実装の勘所
反応は100ms以内に始める
操作から反応までの間が100ミリ秒を超えると、人は「遅れた」と感じます。アニメーション自体は長くても構いませんが、始まりだけは即座にしてください。
状態はCSSではなくHTMLに持たせる
チェック済み・選択中といった状態は、見た目のクラスではなく input:checked や aria-selected などのHTMLの状態で表現し、CSSはそれを見て描画するようにします。こうすると支援技術にも同じ状態が伝わります。
成功と失敗で動きを変える
同じ「反応した」でも、成功は上に跳ねる、失敗は横に揺れる、というように方向を変えると、色に頼らず結果が伝わります。色覚特性のある閲覧者にも届く配慮になります。
FAQ
Q. マイクロインタラクションとは何ですか？
ボタンを押す、スイッチを切り替える、項目を選ぶといった小さな操作ひとつひとつに対する反応のことです。単体では目立ちませんが、これが無いと操作が受け付けられたか分からず、あると製品が丁寧に作られている印象になります。書籍『マイクロインタラクション』（Dan Saffer）が概念の出典として知られています。
Q. 動きを付けすぎると邪魔になりませんか？
なります。判断基準は「その動きが情報を伝えているか」です。状態が変わったこと、操作が受け付けられたこと、どこへ移動したことを伝える動きは残し、意味のない装飾は削ってください。毎日何十回も触る画面ほど、動きは控えめにするのが原則です。
Q. コードは無料で使えますか？
はい。Motion Lab のコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。商用プロジェクトでもそのまま利用できます。
他のカテゴリを見る
全199種類を技術別（CSS / JS / Tailwind / Framer Motion / GSAP）で絞り込むなら カタログ一覧、 長文の解説を読むなら ガイド、 AIエージェントでの実装手順は Claude Code でWebアニメーションを実装する へ。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスクPR
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
CREATOR TOOLS · スクール（PR）
※本サイトはアフィリエイトリンクを含みます。リンク経由のご購入・お申し込みで運営者が紹介料を受け取る場合があります。