5分で読めます

【AI×Web制作 #1】なぜ「AI×人間」でポートフォリオサイトを作ったのか

サイト構築AI協働Nuxt初級
TL;DR

技術スキルの羅列ではなく「AIと組んでプロジェクトを動かせる力」を見せるために、ポートフォリオサイト自体をAI協働で作ることにした。

はじめまして。フリーランスでフロントエンドエンジニアをしているmorinoupaです。

この度、自分のポートフォリオサイト（いま皆さんが見ているこのサイトです）をイチから作りました。

ただし今回は、ちょっと変わった方法で。企画からデザイン、コーディング、公開まで、すべての工程をAIエージェントと一緒に進めました。

このシリーズでは、そのプロセスをまるごとお見せしていきます。「AIと一緒に開発するって、実際どんな感じなんだろう？」——そんな疑問に、具体的な体験談でお答えできればと思います。

きっかけは、ちょっとした焦り

ポートフォリオサイトを作ろう、と思い立ったとき、最初に考えたのは「自分の技術力をアピールするサイトにしよう」ということでした。

「Nuxt（Vue.jsベースのフレームワーク）が得意です」「TypeScript（型のあるJavaScript）で安全なコードを書けます」「GSAPでかっこいいアニメーションが作れます」——こんな感じで。

でも、ふと立ち止まったんです。

「それって、これからの時代も通用するアピールなのかな？」

AIの進化で変わる「エンジニアの価値」

ここ数年、AIの進化はすごい勢いです。ChatGPTやClaude、GitHub Copilotといったツールが登場して、コードを書くこと自体は、AIがかなり上手にやってくれるようになりました。

もちろん、今すぐ人間のエンジニアが不要になるわけではありません。でも、「〇〇が書けます」というスキルの羅列だけでは、だんだん差別化が難しくなっていく。これは多くの人が感じていることだと思います。

じゃあ、これからのエンジニアには何が求められるのか？

僕なりの答えはこうです。

「AIと組んで、プロジェクトを確実に完遂できる力」

もう少し具体的に言うと

たとえば、こういうことができるエンジニアです。

  • プロジェクト全体の方向性を描ける（AIはここが苦手です）
  • AIに分かりやすい指示を出せる
  • AIが作ったものを正しく評価できる
  • 「ここは違うな」と軌道修正できる
  • 最終的な品質に責任を持てる

技術力はもちろん大前提。その上で、「AIという優秀なパートナーをうまく活かせるかどうか」が、これからのエンジニアの価値を大きく左右するんじゃないかと思っています。

このサイト自体が「AI協働の実例」です

そこで、方針を変えました。

このポートフォリオサイト自体を、「AIと人間が一緒に作ったプロジェクト」の実例にしようと。

メインで使ったのは、Claude Code（Anthropic社のAIエージェント）。その中の「Agent Teams」という機能を活用して、複数のAIエージェントをチーム編成して開発を進めました。

このプロジェクトで一番面白いポイントは、AIエージェントを「PM（プロジェクトマネージャー）」に任命したことです。

つまり、僕は「顧客」のような立場で要望を伝える。PMであるAIがその要望を受け取って、タスクを分解し、自分の判断でチームメンバー（実装担当や確認担当のエージェント）を編成して作業を割り振る。企画段階から実装・テスト・デプロイまで、この体制で進めました。

最初にやったのは、PMと一緒にプロジェクト全体を4つのフェーズに分ける計画を立てたことです。

  1. 企画・構想: サイトの方向性・構成・技術選定を決める
  2. デザイン・設計: UIデザイン方針と技術アーキテクチャを固める
  3. 実装: 設計に基づいてサイトを構築する
  4. テスト・デプロイ: 品質を確認して本番公開

この計画をベースに、各フェーズで具体的にやったことはこんな感じです——

  • 企画: 「どんなサイトにするか」をAI PMと一緒にブレスト
  • 技術選定: PMが選択肢を出してくれて、僕が判断
  • デザイン: 「こういう雰囲気にしたい」を伝えて、PMがチームに実装を指示
  • 実装: PMが実装担当と確認担当をペアに編成し、常にダブルチェック
  • アニメーション: スクロール演出などをAIチームと試行錯誤
  • インフラ: フロントエンドはVPS、バックエンド（WordPress）はレンタルサーバーという2台構成
  • デプロイ: それぞれのサーバーへの自動公開の仕組みをAIチームが構築

一人で全部やるより、ずっと速くて質の高いものができました。でも、「AIに全部お任せ」とは全然違います。そのリアルなバランス感覚を、この連載を通じてお伝えしていきます。

この連載の構成

全7回で、プロジェクトの全体像をお見せします。

  1. 今回: なぜAI×人間でサイトを作ったのか（この記事）
  2. 第2回: AIエージェントとの「役割分担」をどう設計したか
  3. 第3回: 技術スタック（使う技術の組み合わせ）をAIとどう選んだか
  4. 第4回: 実装フェーズ——AIとのペアプログラミングの実際
  5. 第5回: デザインやアニメーション——人間の感性×AIの実装力
  6. 第6回: 品質管理・テスト・公開までの流れ
  7. 第7回: AI時代のエンジニア像——これからの開発スタイル

技術的な話もありますが、できるだけ噛み砕いて書いていきます。エンジニアでない方にも「こういう風にプロジェクトって進むんだ」と感じてもらえたら嬉しいです。

こんな方に読んでほしい

  • AIを開発にどう取り入れたらいいか知りたいエンジニアの方
  • Web制作を依頼するとき、AI時代にどんなエンジニアを選べばいいか考えている方
  • 「AIと人間の協働」のリアルに興味がある方

それでは、次回から具体的なプロセスに入っていきます。まずは「AIエージェントとの役割分担をどう決めたか」というお話から。

ぜひ最後までお付き合いください。

関連記事