モーション導入サイト
スクロール連動アニメーションと画像遅延読み込みを備えたNext.js × Tailwind CSS × microCMS のプロジェクトです。 React Hookを使用した動的なコンテンツ制作と、IntersectionObserver・Swiper.js・GSAPを活用したモーション実装の学習を目的として制作しました。
サイトURL
https://micro-motion-case.vercel.app/GitHub URL
https://github.com/kaze-wind-dev/micro-motion-case制作期間
2025/06/22 ～ 2025/06/29
制作背景・課題
このプロジェクトは、React Hookを使用したサイト制作、特にモーションライブラリを活用した動的なコンテンツ作成スキルの習得を目的として制作しました。 ■学習目標 ・React Hookの実践的な使用方法の習得 ・各種モーションライブラリの特性理解と使い分け ・TypeScriptによる型安全なAPI連携の実装 ・microCMS SDKを使わない独自関数でのAPI連携理解 ■解決したい技術課題 ・クライアントコンポーネントでのモーションライブラリの適切な実装 ・IntersectionObserverを使った効果的なパフォーマンス制御 ・レスポンシブ対応したアニメーション設計
学んだこと・成果
■React Hook・Next.js設計の理解 ライブラリ系の処理はクライアントコンポーネントとして分離し、useEffectで適切に初期化する必要があることを実践的に理解できました。特にSSR環境でのDOM操作系ライブラリの扱い方について深く学習できました。 ■モーションライブラリの特性把握 各ライブラリの得意分野を実装を通じて理解を深めることができました。 ・GSAP: 複雑で高度なアニメーション制御 ・IntersectionObserver: パフォーマンスを考慮した要素監視 ・Swiper: 用途に応じたカルーセル実装 ■TypeScript・API設計の実践 microCMS SDKを使わずに独自実装することで、TypeScriptの型定義やfetch関数の構造、API連携の基礎概念をより深く理解することができました。 ■クライアント・サーバーサイドの使い分け Next.jsのSSR環境において、どの機能をクライアントサイドで処理すべきか、適切な分離方法について実践的な知見を得られました。
技術スタック
- Next.js
- microCMS
- TypeScript
- GitHub
- Vercel
- Tailwind.css