[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"/api/social-links:{}":3,"/api/blogs/ai-web-dev-01-why-ai-collaboration:{}":9},{"links":4},[5],{"platform":6,"url":7,"icon":8},"note","https://note.com/morinoupa2020","simple-icons:note",{"post":10,"relatedPosts":36,"prevPost":114,"nextPost":115},{"id":11,"slug":12,"title":13,"date":14,"excerpt":15,"content":16,"thumbnail":17,"categories":18,"tags":23,"difficulty":32,"tldr":33,"readingTime":34,"relatedTech":35},41,"ai-web-dev-01-why-ai-collaboration","【AI×Web制作 #1】なぜ「AI×人間」でポートフォリオサイトを作ったのか","2026-02-25T10:00:00","「Nuxt使えます」「TypeScript書けます」——スキルの羅列が響かなくなる時代に、何を見せるべきか。AI協働でサイトを作ることにした理由を語ります。","\u003Cp>はじめまして。フリーランスでフロントエンドエンジニアをしているmorinoupaです。\u003C/p>\n\u003Cp>この度、自分のポートフォリオサイト（いま皆さんが見ているこのサイトです）をイチから作りました。\u003C/p>\n\u003Cp>ただし今回は、ちょっと変わった方法で。\u003Cstrong>企画からデザイン、コーディング、公開まで、すべての工程をAIエージェントと一緒に進めました。\u003C/strong>\u003C/p>\n\u003Cp>このシリーズでは、そのプロセスをまるごとお見せしていきます。「AIと一緒に開発するって、実際どんな感じなんだろう？」——そんな疑問に、具体的な体験談でお答えできればと思います。\u003C/p>\n\u003Ch2>きっかけは、ちょっとした焦り\u003C/h2>\n\u003Cp>ポートフォリオサイトを作ろう、と思い立ったとき、最初に考えたのは「自分の技術力をアピールするサイトにしよう」ということでした。\u003C/p>\n\u003Cp>「Nuxt（Vue.jsベースのフレームワーク）が得意です」「TypeScript（型のあるJavaScript）で安全なコードを書けます」「GSAPでかっこいいアニメーションが作れます」——こんな感じで。\u003C/p>\n\u003Cp>でも、ふと立ち止まったんです。\u003C/p>\n\u003Cp>\u003Cstrong>「それって、これからの時代も通用するアピールなのかな？」\u003C/strong>\u003C/p>\n\u003Ch2>AIの進化で変わる「エンジニアの価値」\u003C/h2>\n\u003Cp>ここ数年、AIの進化はすごい勢いです。ChatGPTやClaude、GitHub Copilotといったツールが登場して、\u003Cstrong>コードを書くこと自体は、AIがかなり上手にやってくれる\u003C/strong>ようになりました。\u003C/p>\n\u003Cp>もちろん、今すぐ人間のエンジニアが不要になるわけではありません。でも、「〇〇が書けます」というスキルの羅列だけでは、だんだん差別化が難しくなっていく。これは多くの人が感じていることだと思います。\u003C/p>\n\u003Cp>じゃあ、これからのエンジニアには何が求められるのか？\u003C/p>\n\u003Cp>僕なりの答えはこうです。\u003C/p>\n\u003Cp>\u003Cstrong>「AIと組んで、プロジェクトを確実に完遂できる力」\u003C/strong>\u003C/p>\n\u003Ch2>もう少し具体的に言うと\u003C/h2>\n\u003Cp>たとえば、こういうことができるエンジニアです。\u003C/p>\n\u003Cul>\n\u003Cli>プロジェクト全体の方向性を描ける（AIはここが苦手です）\u003C/li>\n\u003Cli>AIに分かりやすい指示を出せる\u003C/li>\n\u003Cli>AIが作ったものを正しく評価できる\u003C/li>\n\u003Cli>「ここは違うな」と軌道修正できる\u003C/li>\n\u003Cli>最終的な品質に責任を持てる\u003C/li>\n\u003C/ul>\n\u003Cp>技術力はもちろん大前提。その上で、\u003Cstrong>「AIという優秀なパートナーをうまく活かせるかどうか」\u003C/strong>が、これからのエンジニアの価値を大きく左右するんじゃないかと思っています。\u003C/p>\n\u003Ch2>このサイト自体が「AI協働の実例」です\u003C/h2>\n\u003Cp>そこで、方針を変えました。\u003C/p>\n\u003Cp>このポートフォリオサイト自体を、\u003Cstrong>「AIと人間が一緒に作ったプロジェクト」の実例にしよう\u003C/strong>と。\u003C/p>\n\u003Cp>メインで使ったのは、Claude Code（Anthropic社のAIエージェント）。その中の\u003Cstrong>「Agent Teams」\u003C/strong>という機能を活用して、複数のAIエージェントをチーム編成して開発を進めました。\u003C/p>\n\u003Cp>このプロジェクトで一番面白いポイントは、\u003Cstrong>AIエージェントを「PM（プロジェクトマネージャー）」に任命した\u003C/strong>ことです。\u003C/p>\n\u003Cp>つまり、僕は「顧客」のような立場で要望を伝える。PMであるAIがその要望を受け取って、タスクを分解し、自分の判断でチームメンバー（実装担当や確認担当のエージェント）を編成して作業を割り振る。企画段階から実装・テスト・デプロイまで、この体制で進めました。\u003C/p>\n\u003Cp>最初にやったのは、PMと一緒に\u003Cstrong>プロジェクト全体を4つのフェーズに分ける計画\u003C/strong>を立てたことです。\u003C/p>\n\u003Col>\n\u003Cli>\u003Cstrong>企画・構想\u003C/strong>: サイトの方向性・構成・技術選定を決める\u003C/li>\n\u003Cli>\u003Cstrong>デザイン・設計\u003C/strong>: UIデザイン方針と技術アーキテクチャを固める\u003C/li>\n\u003Cli>\u003Cstrong>実装\u003C/strong>: 設計に基づいてサイトを構築する\u003C/li>\n\u003Cli>\u003Cstrong>テスト・デプロイ\u003C/strong>: 品質を確認して本番公開\u003C/li>\n\u003C/ol>\n\u003Cp>この計画をベースに、各フェーズで具体的にやったことはこんな感じです——\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>企画\u003C/strong>: 「どんなサイトにするか」をAI PMと一緒にブレスト\u003C/li>\n\u003Cli>\u003Cstrong>技術選定\u003C/strong>: PMが選択肢を出してくれて、僕が判断\u003C/li>\n\u003Cli>\u003Cstrong>デザイン\u003C/strong>: 「こういう雰囲気にしたい」を伝えて、PMがチームに実装を指示\u003C/li>\n\u003Cli>\u003Cstrong>実装\u003C/strong>: PMが実装担当と確認担当をペアに編成し、常にダブルチェック\u003C/li>\n\u003Cli>\u003Cstrong>アニメーション\u003C/strong>: スクロール演出などをAIチームと試行錯誤\u003C/li>\n\u003Cli>\u003Cstrong>インフラ\u003C/strong>: フロントエンドはVPS、バックエンド（WordPress）はレンタルサーバーという2台構成\u003C/li>\n\u003Cli>\u003Cstrong>デプロイ\u003C/strong>: それぞれのサーバーへの自動公開の仕組みをAIチームが構築\u003C/li>\n\u003C/ul>\n\u003Cp>一人で全部やるより、ずっと速くて質の高いものができました。でも、「AIに全部お任せ」とは全然違います。\u003Cstrong>そのリアルなバランス感覚を、この連載を通じてお伝えしていきます。\u003C/strong>\u003C/p>\n\u003Ch2>この連載の構成\u003C/h2>\n\u003Cp>全7回で、プロジェクトの全体像をお見せします。\u003C/p>\n\u003Col>\n\u003Cli>\u003Cstrong>今回\u003C/strong>: なぜAI×人間でサイトを作ったのか（この記事）\u003C/li>\n\u003Cli>\u003Cstrong>第2回\u003C/strong>: AIエージェントとの「役割分担」をどう設計したか\u003C/li>\n\u003Cli>\u003Cstrong>第3回\u003C/strong>: 技術スタック（使う技術の組み合わせ）をAIとどう選んだか\u003C/li>\n\u003Cli>\u003Cstrong>第4回\u003C/strong>: 実装フェーズ——AIとのペアプログラミングの実際\u003C/li>\n\u003Cli>\u003Cstrong>第5回\u003C/strong>: デザインやアニメーション——人間の感性×AIの実装力\u003C/li>\n\u003Cli>\u003Cstrong>第6回\u003C/strong>: 品質管理・テスト・公開までの流れ\u003C/li>\n\u003Cli>\u003Cstrong>第7回\u003C/strong>: AI時代のエンジニア像——これからの開発スタイル\u003C/li>\n\u003C/ol>\n\u003Cp>技術的な話もありますが、できるだけ噛み砕いて書いていきます。エンジニアでない方にも「こういう風にプロジェクトって進むんだ」と感じてもらえたら嬉しいです。\u003C/p>\n\u003Ch2>こんな方に読んでほしい\u003C/h2>\n\u003Cul>\n\u003Cli>AIを開発にどう取り入れたらいいか知りたいエンジニアの方\u003C/li>\n\u003Cli>Web制作を依頼するとき、AI時代にどんなエンジニアを選べばいいか考えている方\u003C/li>\n\u003Cli>「AIと人間の協働」のリアルに興味がある方\u003C/li>\n\u003C/ul>\n\u003Cp>それでは、次回から具体的なプロセスに入っていきます。まずは「AIエージェントとの役割分担をどう決めたか」というお話から。\u003C/p>\n\u003Cp>ぜひ最後までお付き合いください。\u003C/p>\n","",[19],{"id":20,"name":21,"slug":22},35,"サイト構築","site-building",[24,28],{"id":25,"name":26,"slug":27},78,"AI協働","ai-collaboration",{"id":29,"name":30,"slug":31},20,"Nuxt","nuxt","beginner","技術スキルの羅列ではなく「AIと組んでプロジェクトを動かせる力」を見せるために、ポートフォリオサイト自体をAI協働で作ることにした。","5",[],[37,68,94],{"id":38,"slug":39,"title":40,"date":41,"excerpt":42,"thumbnail":17,"categories":43,"tags":48,"difficulty":32,"tldr":66,"readingTime":67},254,"ai-markup-horizontal-expansion","AIエージェントが一番確実に活躍できるフロントエンドの仕事 — マークアップの横展開","2026-03-25T19:01:28","AIにコードを書かせる場面は増えてきました。ただ、「結局どこに使うのが一番効くの？」という問いに対して、まだ手探りの方も多いんじゃないかと思います。 自分はフリーランスのフロントエンドエンジニアとして、日常的にAIエージ […]",[44],{"id":45,"name":46,"slug":47},44,"技術深掘り","deep-dive",[49,50,54,58,62],{"id":25,"name":26,"slug":27},{"id":51,"name":52,"slug":53},81,"Claude Code","claude-code",{"id":55,"name":56,"slug":57},84,"フロントエンド","%e3%83%95%e3%83%ad%e3%83%b3%e3%83%88%e3%82%a8%e3%83%b3%e3%83%89",{"id":59,"name":60,"slug":61},85,"マークアップ","%e3%83%9e%e3%83%bc%e3%82%af%e3%82%a2%e3%83%83%e3%83%97",{"id":63,"name":64,"slug":65},86,"実務","%e5%ae%9f%e5%8b%99","フロントエンドの実務でAIエージェントが最も確実に力を発揮するのはマークアップの横展開。レイアウトパターンごとに数ページ人間が作り、残りをAIに任せると圧倒的に速い。完璧ではないが、単純作業の負担を大幅に減らせる。","6",{"id":69,"slug":70,"title":71,"date":72,"excerpt":73,"thumbnail":17,"categories":74,"tags":76,"difficulty":91,"tldr":92,"readingTime":93},252,"wordpress%e3%83%90%e3%83%83%e3%82%af%e3%82%a8%e3%83%b3%e3%83%89%e3%82%92ai%e3%81%ab%e5%85%a8%e4%bb%bb%e3%81%9b%e3%81%97%e3%81%a6%e3%81%bf%e3%81%9f-%e6%84%9f%e6%80%a7%e3%81%8c%e8%a6%81","WordPressバックエンドをAIに全任せしてみた — 感性が要らない領域こそAI向きなのか検証する","2026-03-15T02:38:53","WordPressのバックエンド——カスタム投稿タイプの定義、REST APIの設計、管理画面のカスタマイズ。こうした作業は、仕様が明確でパターン化しやすい。 前回までの連載で「デザインやアニメーションなど、人間の感性に […]",[75],{"id":45,"name":46,"slug":47},[77,78,79,83,87],{"id":25,"name":26,"slug":27},{"id":51,"name":52,"slug":53},{"id":80,"name":81,"slug":82},82,"PHP","php",{"id":84,"name":85,"slug":86},83,"REST API","rest-api",{"id":88,"name":89,"slug":90},31,"WordPress","wordpress","intermediate","ポートフォリオサイトのWordPressバックエンド（テーマ・REST API・管理画面）をAIに全任せで実装。定型的なバックエンド作業はAIの得意領域だが、実際に使い始めると「キー名の不一致」「運用を想定していない設計」など、細かい修正が必要になる場面があった。","8",{"id":95,"slug":96,"title":97,"date":98,"excerpt":99,"thumbnail":17,"categories":100,"tags":102,"difficulty":91,"tldr":112,"readingTime":113},112,"free-spam-protection-turnstile-honeypot","お問い合わせフォームのスパム対策を無料で実装する — Cloudflare Turnstile × ハニーポットの2層防御","2026-02-28T02:12:59","お問い合わせフォームのスパム対策、後回しにしていませんか？Cloudflare Turnstileとハニーポットを組み合わせた2層防御を完全無料で実装する方法を、本番環境でのハマりポイントも含めて解説します。",[101],{"id":45,"name":46,"slug":47},[103,104,108],{"id":29,"name":30,"slug":31},{"id":105,"name":106,"slug":107},26,"TypeScript","typescript",{"id":109,"name":110,"slug":111},80,"セキュリティ","security","Cloudflare Turnstile（無料）とハニーポットの2層防御でお問い合わせフォームのスパム対策を実装。本番環境ではNitroが.envを読まない問題やPM2の環境変数反映に注意が必要。","7",null,{"slug":116,"title":117,"thumbnail":17},"ai-web-dev-02-role-design","【AI×Web制作 #2】AIエージェントとの「役割分担」を設計する"]