担当領域
ライティング、デザイン/実装
開発
Next.js tailwindCSS Three.js GSAP AOS Lenis.js
プロジェクト概要
モダンな技術スタックを活用し、パフォーマンスとユーザー体験を重視したポートフォリオサイトを制作
制作期間
5ヶ月
実装内容
開発環境とコード設計
- 静的サイト生成（SSG）による高速なページロードを実現するため、Next.jsを採用。
- 管理のしやすさを重視し、①コンポーネントは機能ごとにフォルダ分けし再利用性を考慮 ②複雑なJavaScript処理はutilityフォルダに格納し、メンテナンス性を向上を意識した。
モダンCSSの使用
- Next.jsとの相性が良いTailwindCSSを採用し、効率的な開発を行なった。
- コンポーネント単位でスタイルを完結させることで、修正・更新がしやすい設計を心がけた。
インタラクティブ要素とアニメーションの実装
- Three.jsを活用し、ファーストビューに印象的な3Dオブジェクト(デザインから開発まで拡張し、透明性や繊細さを意図したガラスオブジェクト)を実装した。
- シンプルなデザインの中に適度なギミックを取り入れ、記憶に残るサイトを目指した。
