CSSアニメーションで魅せるインテリアショーケース
フロントエンドデザインとインテリアスタイルの感覚を組み合わせた、実践的なアプローチを学べる内容です。
カリキュラム
全体の構成と学習の流れを確認してください。
開発ステップ
- アニメーション要件の整理とスケッチ
- Figmaでのプロトタイプ確認
- CSSアニメーション実装（keyframes・transition）
- Intersection Observer連携
- prefers-reduced-motion対応
- パフォーマンス計測と最適化
計測結果の概要
- JSバンドルサイズ
- 4KB（gzip後）
- Lighthouseパフォーマンス
- 96点
- 対応ブラウザ
- Chrome・Firefox・Safari最新3バージョン
なぜCSSだけにこだわったのか
アニメーションといえばGSAPやFramer Motionが定番ですが、あえてCSS onlyの制約で制作しました。理由はシンプルで、ライブラリへの依存を減らすことでページの読み込みを軽くしたかったからです。結果として合計JSバンドルサイズは4KBに収まりました。
実装したアニメーションの種類
スクロール連動のフェードインにはIntersection Observer APIを最小限のJSで組み合わせ、アニメーション本体はCSSのtransitionとkeyframesで処理しています。インテリアスタイルの各部屋写真が画面に入るとスライドしながら表示される動きは、transform: translateX()とopacityの組み合わせで実現しました。
パフォーマンスへの配慮
will-changeプロパティの扱いには注意が必要で、全要素に設定するとかえってメモリを圧迫します。実際に使用したのはアニメーション直前にclassを付与する方式で、終了後は削除する設計にしました。
prefers-reduced-motionへの対応も組み込み、アニメーションが不要なユーザーには静的表示に切り替わります。アクセシビリティとパフォーマンスを両立できたことが、このプロジェクトで一番の収穫でした。
動きがうるさくなく、インテリアスタイルの雰囲気を壊さない点が良かった。レビュー担当・桐島文哉
この記事は参考になりましたか？
フィードバックをありがとうございました。