インタラクションデザイン

リップル波紋ボタン

クリックした位置から波紋が広がる。Material Designでおなじみの「押した手応え」。

マグネティックボタン

カーソルに吸い付くように動くボタン。近づくとぬるっと反応して、つい動かしたくなる。

グラスモーフィズムボタン

背景がすりガラス越しに透ける質感のボタン。カラフルな背景の上で映える。

流れる光グラデボタン

グラデーションが流れ、背後がぼんやり発光するボタン。CTAで視線を集めたいときに。

スライドフィルボタン

ホバーすると背景色が左から滑り込み、文字色が反転する。線画ボタンの定番演出。

いいねバーストボタン

押すとハートが弾けて粒子が飛び散る。SNSでつい連打したくなるあの気持ちよさ。

コピー完了フィードバック

クリックすると「✓ コピーしました」に変わって元に戻る。操作が伝わる安心感のある演出。

3Dチルトカード

カーソルの位置に合わせてカードが立体的に傾く。奥行きが出て、つい動かしたくなる。

画像ズーム＋タイトル

ホバーで画像がゆっくり拡大し、タイトルが浮かび上がる。カード型の記事一覧で定番。

スポットライト追従

カーソルの周りだけ光が灯り、動かすと付いてくる。暗い背景のカードに高級感が出る。

光沢スイープ

ホバーすると斜めの光がツヤッと走り抜ける。ボタンやバナーを一段リッチに見せる。

下線スライドリンク

ホバーで下線が右から消えて左から伸びる。テキストリンクの上品な定番演出。

グレースケール→カラー

普段はモノクロ、ホバーでふわっと色づいて少し拡大。写真ギャラリーで効果的。

フェードイン出現

画面に入った要素がふわっと下から浮かび上がる。IntersectionObserverの基本形。

スタッガー出現

複数の要素が少しずつ時間をずらして現れる。リストやカード並びに躍動感が出る。

数字カウントアップ

画面に入ると数字が0から目標値へ駆け上がる。実績や統計の見せ場に。

スクロール進捗バー

ページ上部のバーが読み進めた割合を示す。長い記事で残量がわかって安心。

1文字ずつ出現

見出しの文字が1つずつ波打つように現れる。ヒーロー見出しのインパクトに。

クリップreveal

画面に入ると画像が左から右へ開くように現れる。clip-pathを使った上質な登場。

背景色シフト

スクロールでセクションに入るたび背景色が滑らかに切り替わる。物語性のあるLPに。