マイクロインタラクション

マイクロインタラクションに分類されるWeb表現技法14件。リップル波紋ボタン、アニメ下線リンク、ハンバーガー→×モーフ、マグネティックボタンなど。ライブデモとコピーできるコード付き。

クリック位置を起点に波紋が全面へ広がるマテリアルデザイン風の押下フィードバック。あらゆるボタンに汎用的に組み込めます。

純CSSの疑似要素だけで作る4種のホバー下線（左伸び・中央展開・スワップ・枠線）。ナビゲーションやテキストリンクの質感を高めます。

3本線がtransformで滑らかに×へ変形するメニュートグル。aria-expandedも同期し、モバイルナビの開閉ボタンにそのまま使えます。

カーソルの位置に応じてボタンが磁石のように引き寄せられ、内部要素も視差で追従します。ヒーローのCTAやナビに使うと注目を集められます。

マウス位置を回転角に変換し、CSSのperspectiveでカードが立体的に傾き光沢が走ります。商品カードやプロフィールカードの演出に最適です。

クリックでハートが弾み、放射状に色とりどりの粒子が飛び散る「いいね」ボタン。SNSやレビューのリアクションUIに使えます。

太陽が月に変わり、空が夜になって星が現れるアニメ付きスイッチ。ほぼ純CSSで動き、ダークモード切替などの設定UIに向きます。

ホバーでプレビュー、クリックで確定し、矢印キー操作にも対応した5段階の星評価。レビュー投稿やアンケートの入力UIに使えます。

ドットの格子がカーソルの磁場で引き寄せ・反発し、近づくほど大きく波打って歪みます。待機中は仮想カーソルが巡回して常に動き、pointermoveで本物に追従。ヒーロー背景やインタラクティブな装飾に使えます。

3本線のハンバーガーアイコンを開くと、バンズ・レタス・パティが上から落ちてきて本物のハンバーガーが組み上がります。閉じると逆再生。ただの3本線に遊び心を加える、ナビゲーションの一捻りです。

本文中の赤いマーカー語にカーソルを当てると、その語の真上に画像つきの注釈カードがふわっと現れます。記事を読みながら補足情報へ自然に誘導でき、編集系メディアで効く仕掛けです。

文字をランダムに揺らしながら正しい単語へ収束させるレトロな演出。requestAnimationFrameで実装し、ヒーロー見出しのアイキャッチに最適です。

押すとボタンが完了状態へ変化し、canvasで紙吹雪が物理落下する達成感の演出。購入完了やフォーム送信成功のフィードバックに使えます。

フッター帯に散らばったゴミを、黄色いローラーがコロコロ転がりながら掃除していきます。メニューボタンはゴミと違って飛び越える。実用UIに1匹だけ住まわせる、動きのあるマスコットの実装パターンです。