個人開発で、スマートフォン向けのおみくじWebサイトをリリースしました。
今回は、重いライブラリを使わずに Vanilla JS（純粋なJavaScript）とCSS Animationのみ で、サクサク動く和風UIを実装した際の軽量化ノウハウを共有します。
-
ユーザーを飽きさせない演出と軽量化の両立
おみくじ特有の「箱を振るアニメーション」を実装する際、GIF画像や動画を使うと初期読み込み（First Contentful Paint）が遅くなります。
今回は、軽量なSVG画像に対して、CSSの @keyframes で回転と微振動を組み合わせたクラスをJSで動的に付与（classList.add）する手法を採用しました。これにより、アセットサイズを数キロバイトに抑えています。 -
ページ遷移なし（SPA風）の結果表示と状態管理
ユーザー体験（UX）を高めるため、おみくじの「引く」から「結果表示」までを画面遷移なしで実装しています。
結果のロジックは配列からランダムで抽出（Math.random()）していますが、リロード時の重複を防ぐため、sessionStorage を活用して同一セッション内での状態保持を行っています。 -
レンダリングの最適化（今後の課題）
スマホ端末での描画負荷を低減するため、アニメーションさせる要素に will-change: transform; を指定し、GPUレイヤーでの処理を促しています。ただ、一部の古いAndroid端末で若干の引っかかりが見られるため、Web Animations APIへの移行を検討中です。
実際の制作物（デモ）
デザインやアニメーションの挙動、スマホでのレスポンシブ対応など、実際のUIはこちらから確認できます。フロントエンドの設計について、アドバイスやフィードバックをいただけますと幸いです！
一禅堂の恋みくじ:https://www.ichizenn.com/koi-mikuji/