UIにおいて「気づかれないけど感じられる」改善があります。
今回はその中でも ほんの1行のCSSと1つの状態管理で実現できる「くるっと回るリセットボタン」の導入例をご紹介します。
こういったアニメーションは派手さはないものの、ユーザーに「確実に操作が入った」という安心感を与え、プロダクトの完成度を大きく引き上げます。
OS Yamatoのアイコン群たち
リセットやリロード、リフレッシュなどを実行する際にアニメーションを加えると、体験は格段に向上します。
👇 実装イメージ
<div
class="icon-button"
:class="{ 'rotate-once': isRotating }"
:style="{ backgroundColor: iconColor, color: iconTextColor }"
@click="restartGame"
>
↻
</div>
const isRotating = ref(false)
async function restartGame() {
isRotating.value = true
setTimeout(() => {
isRotating.value = false
}, 600)
// …その他の処理
}
@keyframes rotate-once {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.rotate-once {
animation: rotate-once 0.6s ease-in-out;
}
なぜこれが効くのか？
↻ 回転＝リセットの直感的な演出
💡 状態変化を視覚で補強（「押した感」が出る）
💎 コンポーネントの「質感」が一段上がる
Vueでのワンポイント
• refとsetTimeoutで1度だけアニメをトリガー
• rotate-once クラスはアニメ終了後に外す
• scopedスタイルでもアニメ適用OK（scoped属性を維持）
⸻
🎯 まとめ
たった数行のコードでも、UIの印象は大きく変わります。
「体験の質を上げたいけど大きな改修は難しい」という場面で、こうした小さなUX演出が威力を発揮します。
実装はシンプルでも、得られる効果は絶大です。
🔗 プロジェクト情報
• 試してみる:
https://hanaco875.com
メールアドレスで簡単にサインアップ！！
• ソースコード: GitHub - osyamato/os-yamato
https://github.com/osyamato/os-yamato
🌱 OS Yamato / 花子天気は オープンソース です。
技術や思想に共鳴する方は、気軽に触れてみてください。
PR・Issue・コメントも大歓迎です。