自社ウェブサイト制作 - baysgaia.com

## プロジェクト概要 株式会社ベイスガイアの公式ウェブサイト（[https://www.baysgaia.com](https://www.baysgaia.com)）を、最新のNext.js 15とAI開発ツールを活用して構築。約1000ページの大規模静的サイトでありながら、優れたパフォーマンスとユーザー体験を実現しています。 ## 技術スタック ### フロントエンド開発 - **Next.js 15**: App Router、静的サイト生成 - **TypeScript**: 厳格な型チェック（strict mode） - **SCSS Modules**: カスタムデザインシステム - **Three.js/VRM**: 3Dモデルビューア実装 ### AI開発ツール - **Cursor AI Editor**: MCP統合による効率的な開発 - **Claude/ChatGPT**: コード生成・レビュー - **GitHub Cursor**: インテリジェントな補完 - **MCP (Model Context Protocol)**: ツール間のシームレスな連携 ### インフラ・デプロイ - **AWS S3/CloudFront**: 高速配信とグローバルCDN - **GitHub Actions**: CI/CD自動化パイプライン - **Terraform**: Infrastructure as Code - **Lighthouse CI**: パフォーマンス監視 ## 実装の特徴 ### 階層的パフォーマンス最適化 サイトの階層に応じて、異なるパフォーマンス戦略を実装： 1. **ホームページ（レベル0）** - GSAP + ScrollTriggerによるリッチアニメーション - VRM 3Dモデルのインタラクティブ表示 - LCP目標: 2.5秒以下 2. **メインセクション（レベル1）** - Framer Motionによる洗練されたトランジション - 動的インポートによるコード分割 - LCP目標: 2.0秒以下 3. **カテゴリハブ（レベル2）** - 最小限のCSSアニメーション - プリロード戦略の最適化 - LCP目標: 1.5秒以下 4. **コンテンツページ（レベル3）** - デプススクロールによる読書体験向上 - 静的最適化の徹底 - LCP目標: 1.0秒以下 ### Cursor AIによる開発効率化 - **開発速度**: 従来の3倍に向上 - **コード品質**: AIレビューによるバグ80%削減 - **保守性**: 一貫したコーディング規約の自動適用 - **ドキュメント**: AI生成による包括的な技術文書 ### 静的サイト生成の最適化 ```typescript // 動的ルートの事前生成 export async function generateStaticParams() { const posts = await getAllPosts(); return posts.map((post) => ({ slug: post.slug, })); } // メタデータの動的生成 export async function generateMetadata({ params }) { const post = await getPostBySlug(params.slug); return { title: post.title, description: post.description, openGraph: { images: [post.ogImage], }, }; } ``` ### MDXコンテンツ管理システム - 階層的なコンテンツ構造 - フロントマターによるメタデータ管理 - 型安全なコンテンツAPI - ホットリロード対応の開発環境 ## パフォーマンス成果 ### Core Web Vitals - **LCP**: 全ページで目標値達成 - **FID**: 50ms以下（優秀） - **CLS**: 0.05以下（優秀） - **Lighthouse Score**: 95-100点 ### 開発効率 - **ビルド時間**: Turbopackで90%高速化 - **デプロイ時間**: 3分以内で本番反映 - **開発体験**: ホットリロード0.5秒以下 ## 運用・保守 ### 自動化された運用 - GitHub Actions による自動デプロイ - Dependabot による依存関係の自動更新 - Lighthouse CI による継続的なパフォーマンス監視 - エラー通知と自動復旧システム ### セキュリティ対策 - OWASP Top 10 対策の実装 - Content Security Policy の厳格な設定 - 定期的なセキュリティ監査 - AWS WAF による保護 ## 技術的な学び ### Cursor × MCP の威力 1. プロジェクト全体のコンテキスト理解 2. 一貫性のあるコード生成 3. リアルタイムのコードレビュー 4. ドキュメントの自動更新 ### 大規模静的サイトのベストプラクティス 1. インクリメンタル静的再生成の活用 2. 画像・フォントの最適化 3. Critical CSS の抽出 4. Service Worker によるオフライン対応 ## お客様への提供価値 このプロジェクトで実証された技術とプロセスは、以下のような価値をお客様に提供できます： - **高速なサイト構築**: AI活用で開発期間を大幅短縮 - **優れたパフォーマンス**: Core Web Vitals の最適化 - **低い運用コスト**: 静的サイトによるサーバーレス運用 - **高い保守性**: AI支援による継続的な品質向上 詳しくは[システム開発サービス](/services/system-development)をご覧ください。