⚠ デモ/モックアプリ: このページはデータベースや認証機能を持たないデモ/モックです。学習・参考用コンテンツとしてご活用ください。より深く学びたい方は村瀬にご連絡いただくか、AIアシスタントにご相談ください。
Hub に戻る
INTERACTIVE DEMO

Micro-Interaction
Playground

ボタン、フォーム、カード、ナビゲーションなど、さまざまなマイクロインタラクションを体験できるデモページです。

SECTION 01

ボタンインタラクション

クリック、ホバー、タッチで反応するボタンアニメーション集

Ripple Effect Material Design スタイルの波紋アニメーション
Magnetic Button カーソルに引き寄せられるように追従
Morphing Button テキスト → ローディング → 完了に変形
Gradient Shift ホバーでグラデーションがアニメーション
Elastic Press クリックで弾力的に変形して戻る
Neon Glow 光るボーダーのパルスアニメーション
Send Button 飛行機アイコンが飛んでいくアニメーション
Liquid Fill ホバーで下から液体が満たされる効果
SECTION 02

フォームインタラクション

入力時のフィードバックとバリデーションアニメーション

お名前を入力してください
有効なメールアドレスを入力してください
0 / 50
通知を受け取る
利用規約に同意する
SECTION 03

カードインタラクション

ホバー、クリック、ドラッグで変化するカードUI

🎨

3Dティルトカード

マウスの位置に応じてカードが立体的に傾きます。Perspective と Transform を活用。

CSS transform: perspective + rotateX/Y
💡

フリップカード

ホバーして裏面を見る

裏面の情報

backface-visibility と rotateY を使った3Dフリップ。タッチデバイスではタップで回転。

CSS backface-visibility + rotateY
👤

展開カード

クリックして詳細を表示

max-height のトランジションを使ったアコーディオン展開。コンテンツ量に関わらずスムーズにアニメーションします。クリックでトグルできます。

CSS max-height transition + overflow hidden
CSS background-size animation (shimmer)
👋

スワイプカード

左右にドラッグして削除

スワイプで消去 Touch / Mouse drag + translateX
SECTION 04

ナビゲーション & フィードバック

UI操作時の視覚的フィードバックとアニメーション