morinoupaポートフォリオサイト

このポートフォリオサイト自体が、AI×人間の協働で制作したプロジェクトです。Claude Codeの「Agent Teams」機能を活用し、AIエージェントをPM（プロジェクトマネージャー）に任命。企画からデザイン・実装・テスト・デプロイまで、一貫してAIチーム体制で開発を進めました。

プロジェクトの特徴

• AI PMによるプロジェクト管理——人間は「顧客」の立場で要望を伝え、AI PMがタスク分解・チーム編成・進行管理を担当
• Agent Teamsによるチーム開発——実装担当と確認担当のエージェントを常にペアにし、一人開発でもダブルチェック体制を実現
• ヘッドレスCMS構成——WordPress REST APIをバックエンドに、Nuxt（Nitro）をBFF層として、フロントエンドとコンテンツ管理を分離
• スクロール連動アニメーション——GSAP + ScrollTriggerによるインタラクティブな演出
• 2台構成のインフラ——フロントエンドはVPS（PM2 + Nginx）、バックエンドはレンタルサーバーで運用

技術構成

フロントエンド

• Nuxt（Vue.js） + TypeScript
• SSR（サーバーサイドレンダリング）+ Nitroキャッシュによる高速表示
• GSAP + ScrollTrigger + Lenis（スムーススクロール）
• View Transitions APIによるページ遷移演出
• レスポンシブ対応、アクセシビリティ対応（prefers-reduced-motion等）

バックエンド

• WordPress（ヘッドレスCMS）+ ACF（カスタムフィールド）
• カスタム投稿タイプ: blog, work, skill, experience, FAQ等
• REST APIによるコンテンツ配信

インフラ・デプロイ

• フロントエンド: VPS + PM2 + Nginx（SSH経由で自動デプロイ）
• バックエンド: レンタルサーバー（FTP経由で自動デプロイ）
• GitHub Actions: pathsフィルタで変更箇所に応じたワークフローを自動実行

AI協働

• Claude Code + Agent Teams
• AI PMによるプロジェクト管理・タスク割り振り
• 実装/確認エージェントのペア体制による品質担保

AI協働の制作プロセス

制作の詳細は技術ブログの「AI×Web制作」シリーズ（全7回）で公開しています。

1. プロジェクトの方向性を人間が決め、AI PMに共有
2. AI PMがタスクを分解し、Agent Teamsでチーム編成
3. 実装担当がコードを書き、確認担当がレビュー
4. 人間がブラウザで確認し、最終判断・方向修正
5. GitHub Actionsで自動デプロイ