マイクロインタラクション19種｜CSSコピペ+AIプロンプト

操作に対する小さな反応の積み重ねが、使い心地の差になります。チェックが入る、切り替わる、通知が出る——こうした瞬間に適切な動きがあると、操作が受け付けられたことが確実に伝わります。ここでは日常的なUI操作に反応を返すパターンを19種類集めました。

マイクロインタラクション · 19 EFFECTS

No.009TOGGLE SWITCHCSS No.015LIKE BURSTCSSJS No.037CHECKBOX ANIMATIONCSS No.038ACCORDIONCSSJS No.039TOOLTIPCSS No.040STAR RATINGCSSJS No.041HAMBURGER MENUCSSJS No.086GSAP COUNTERJSGSAP No.087FRAMER DRAGCSSJSFRAMER No.089TAILWIND TOGGLECSSTAILWIND No.091CONFETTI BURSTJS No.092BADGE BOUNCECSSJS No.096FLIP COUNTERCSSJS No.098SEGMENTED CONTROLCSSJS No.100EXPANDING SEARCHCSSJS No.120ANCHOR POSITIONING TOOLTIPCSS No.128ANIMATED LISTCSSJS No.129MACOS DOCKCSSJS No.137ELASTIC TAB INDICATORCSSJS

実装の勘所

反応は100ms以内に始める

操作から反応までの間が100ミリ秒を超えると、人は「遅れた」と感じます。アニメーション自体は長くても構いませんが、始まりだけは即座にしてください。

状態はCSSではなくHTMLに持たせる

チェック済み・選択中といった状態は、見た目のクラスではなく input:checked や aria-selected などのHTMLの状態で表現し、CSSはそれを見て描画するようにします。こうすると支援技術にも同じ状態が伝わります。

成功と失敗で動きを変える

同じ「反応した」でも、成功は上に跳ねる、失敗は横に揺れる、というように方向を変えると、色に頼らず結果が伝わります。色覚特性のある閲覧者にも届く配慮になります。

FAQ

Q. マイクロインタラクションとは何ですか？

ボタンを押す、スイッチを切り替える、項目を選ぶといった小さな操作ひとつひとつに対する反応のことです。単体では目立ちませんが、これが無いと操作が受け付けられたか分からず、あると製品が丁寧に作られている印象になります。書籍『マイクロインタラクション』（Dan Saffer）が概念の出典として知られています。

Q. 動きを付けすぎると邪魔になりませんか？

なります。判断基準は「その動きが情報を伝えているか」です。状態が変わったこと、操作が受け付けられたこと、どこへ移動したことを伝える動きは残し、意味のない装飾は削ってください。毎日何十回も触る画面ほど、動きは控えめにするのが原則です。

Q. コードは無料で使えますか？

はい。Motion Lab のコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。商用プロジェクトでもそのまま利用できます。

他のカテゴリを見る

テキストアニメーション 21 ホバーエフェクト 8 スクロールアニメーション 15 カードアニメーション 15 背景アニメーション 14 ボタンアニメーション 10 ローディングアニメーション 7 トランジション・画面遷移 9 モーダル・ドロワー 8 SVGアニメーション 8 カーソルエフェクト 6

全139種類を技術別（CSS / JS / Tailwind / Framer Motion / GSAP）で絞り込むならカタログ一覧、長文の解説を読むならガイド、 AIエージェントでの実装手順は Claude Code でWebアニメーションを実装するへ。

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 マイクロインタラクション ―UI/UXデザインの神が宿る細部 📖 Fundamentals of Web Animation with GSAP

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。