ボタンとタッチ — 「押した感」を設計する

物理的なボタンには「押し込まれる感触」があります。押したとき少し沈み、離したときに戻る。その感触が「操作が届いた」という確信をくれます。

デジタルのボタンにはその感触がありません。だからアニメーションで再現する必要があります。

フィードバックの段階で「押した感」が変わる

3種類のボタン、全部クリックしてみてください。

左から：反応なし / Hoverのみ / Hover+Active。右になるほど「押した感」が明確

Hover — 「押せる」を示す

ボタンにカーソルを乗せたとき、少し浮かんだり色が変わったりすることで「これは押せるものだ」とユーザーに伝えます（アフォーダンス）。変化が全くないと「テキストと区別がつかない」。

Active/Press — 「押した」を示す

クリックした瞬間、scale(0.94) で少し沈む動きは物理ボタンの感触を模倣します。80〜120ms という短い時間で即座に応答することが重要——遅いと「押したのに何も起きない」と感じます。

Result — 「何かが起きた」を示す

クリックの結果として画面が変わる、ローディングスピナーが出る、チェックマークが現れる——操作の結果をアニメーションで示します。

送信 → ローディング → 成功/失敗、それぞれ「性格」の違うアニメーションが正解です。

成功はbounce（喜び）、失敗はshake（否定）。アニメーションの「性格」が結果の意味を強調する

成功の bounce は「やった！」という喜びのジェスチャー。失敗の shake は「No」の首振りと同じ本能的なシグナルです。色だけでなく動きで意味を伝えることで、ユーザーは一瞬で理解できます。

「削除」ボタンは特別に設計します。うっかりクリックを防ぐために、hover してもすぐに赤くならない——意図的な遅延を持たせます。

左：即座に赤くなる / 右：0.6秒後に赤くなる。右はホバーしたまましばらく待つと変化する

transition-delay: 0.6s をつけるだけで実装できます。カーソルが通過しただけでは変化せず、「意図的にホバーし続けた」場合のみ危険なスタイルに変化します。

ON/OFF の状態が一目で分かるトグル。状態変化が視覚的に明確であることが重要です。

overshootのイージングで、つまみが「弾んで」移動する。状態変化が明確でタップしやすい

overshoot のイージング（cubic-bezier(0.34,1.56,0.64,1)）をトグルに使うと、つまみが「弾んで」移動し、状態が変わったことが直感的に伝わります。

タッチデバイス（モバイル） では hover 状態は存在しません。クリック（タップ）の瞬間に即座にフィードバックが必要です。active 状態のアニメーションを 80〜120ms で確実に見せることが重要。

デスクトップ では hover による「予告」があります。カーソルを乗せた時点でユーザーは「押せるものだ」と分かります。そのため、active のフィードバックは補強的な役割になります。

両対応するときは active アニメーションを共通にしつつ、hover は @media (hover: hover) で制限するのが基本です。