【個人開発】おみくじAPIとアニメーションを実装したWebサイトをリリースしました【レビュー・FB歓迎】

Question

個人開発で、スマートフォン向けの占い・おみくじWebサイトを制作し、リリースしました。
フロントエンドの技術選定や、ユーザー体験（UX）を高めるためのアニメーション実装について、備忘録を兼ねて共有します。

【開発環境・使用技術】

フロントエンド：HTML5 / CSS3 (Sass) / JavaScript (Vanilla JS)

アニメーション：CSS Animation / Web Animations API

インフラ：Vercel (またはAWS S3+CloudFront)

【こだわったポイント・実装の工夫】

SVGによる和風アニメーションの最適化
おみくじを引く際のスムーズな挙動を実現するため、重いGIF画像は使わず、軽量なSVGとCSSアニメーションを組み合わせてパフォーマンスを向上させました。スマホの低速環境でも数秒でモヤモヤせず表示されます。

リダイレクトとキャッシュ対策
おみくじの結果が毎回ランダムで変わりつつも、ブラウザの「戻る」ボタンを押した際の挙動が不自然にならないよう、セッションストレージを活用して状態管理を工夫しました。

【今後の課題とアドバイスを頂きたい点】
現在、一部の古いAndroid端末（Chrome環境）で、おみくじのフェードイン演出が若干カクつく現象を確認しています。レンダリングを最適化するために、will-change プロパティ以外に効果的なCSS/JSの手法があれば、ぜひご教授いただきたいです。

実際の挙動やソースコードの構成について、デザイン面も含めてフロントエンドエンジニアの皆様からフィードバックをいただけますと幸いです。

実際のサイトはこちらになります。一禅堂の恋みくじ:

よろしくお願いいたします。

Comments

[yambejp]

今のままだとサンプルがサイトへの誘導となっており営業活動に見えてしまうので、問題箇所だけ明確にしてソースと動作が確認できる環境にアップしてもらうことは可能ですか？

[Lhankor_Mhy]

厳密にはマルチポストではないんでしょうけれども、かなり宣伝っぽさを感じます。
https://qiita.com/koimikuji
https://zenn.dev/myotz/articles/3fda8bfefa05a7
https://anond.hatelabo.jp/20260702150046
https://www.wantedly.com/users/200591527/post_articles/1031921

[jimbe]

>一部の古いAndroid端末（Chrome環境）

具体的な各種バージョンや機種名等を明示して頂くほうが良いと思います。

[tsetxu]

コメントありがとうございます。質問を修正したのでご確認よろしくお願いいたします。

[tsetxu]

コメントありがとうございます。⚪︎⚪︎を試したところ問題が解決しました！
ベストアンサーに選びたいので同じ内容を回答欄に投稿いただけますでしょうか？

[yambejp]

ベストアンサーにつながるような補足はなかったと思いますが・・・
自己解決で質問を閉じるとよろしいかと

[fiveHundred]

「Q&A」ではなく「意見交換」でやるべき内容です。
「Q&A」は「～を実装しているが、エラーが出る」などの質問をするための項目です。
アンケートや改善案募集は「意見交換」でやりましょう。

> ベストアンサーにつながるような補足はなかったと思いますが・・・
誤操作ではないかと思います。