[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"/api/social-links:{}":3,"/api/blogs/ai-web-dev-02-role-design:{}":9},{"links":4},[5],{"platform":6,"url":7,"icon":8},"note","https://note.com/morinoupa2020","simple-icons:note",{"post":10,"relatedPosts":36,"prevPost":116,"nextPost":119},{"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},241,"ai-web-dev-02-role-design","【AI×Web制作 #2】AIエージェントとの「役割分担」を設計する","2026-02-25T11:00:00","AIに「作って」と言うだけでは良いものはできない。プロジェクト成功の鍵は、人間とAIの役割分担の設計にある。実際のタスク分解と指示の出し方を公開。","\u003Cp>前回は、このサイトをAI協働で作ることにした理由をお話ししました。\u003C/p>\n\u003Cp>今回は、プロジェクトの出発点——\u003Cstrong>「AIエージェントとの役割分担をどう設計したか」\u003C/strong>について書きます。\u003C/p>\n\u003Cp>実はこれ、AI協働プロジェクトで一番大事な部分かもしれません。\u003C/p>\n\u003Ch2>いきなりAIに「作って」と言ってはいけない理由\u003C/h2>\n\u003Cp>AIに「ポートフォリオサイト作って」とお願いしたら、何かしらのものは出てきます。でも、たいていは「なんか違う……」となります。\u003C/p>\n\u003Cp>これ、人間のチームでも同じですよね。新しいメンバーに「このプロジェクトよろしく」と丸投げしたら、うまくいくはずがない。\u003C/p>\n\u003Cp>\u003Cstrong>まず「誰が、何を、どこまで担当するか」を決める。\u003C/strong>当たり前のことですが、AI相手でもこれは変わりません。むしろ、AIは自分で判断して動けない分、より丁寧な設計が必要です。\u003C/p>\n\u003Ch2>最初にやったこと——全体像のスケッチ\u003C/h2>\n\u003Cp>プロジェクトを始めるにあたって、まず僕がやったのは全体像の整理でした。\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>サイトの目的\u003C/strong>: ポートフォリオ＋技術ブログ＋お問い合わせ導線\u003C/li>\n\u003Cli>\u003Cstrong>必要なページ\u003C/strong>: トップ、Works（実績）、ブログ、お問い合わせ\u003C/li>\n\u003Cli>\u003Cstrong>サイトのトーン\u003C/strong>: ダークテーマで、落ち着いた雰囲気。でも堅すぎない\u003C/li>\n\u003Cli>\u003Cstrong>ざっくりスケジュール\u003C/strong>: 数週間で公開まで持っていきたい\u003C/li>\n\u003C/ul>\n\u003Cp>この\u003Cstrong>「方向性を決める」という仕事は、人間がやるべき部分\u003C/strong>です。\u003C/p>\n\u003Cp>なぜかというと、AIは「要求に応える」のは得意ですが、「そもそも何を作るべきか？」を考えるのは苦手だからです。料理に例えるなら、AIは腕の良いシェフ。でも「今日のメニューは何にする？」はオーナー（人間）が決めないといけません。\u003C/p>\n\u003Ch2>AIを「PM」に任命する——このプロジェクトの肝\u003C/h2>\n\u003Cp>このプロジェクトで一番大きな決断は、\u003Cstrong>AIエージェントを「PM（プロジェクトマネージャー）」に任命した\u003C/strong>ことです。\u003C/p>\n\u003Cp>普通のAI活用って、「人間がAIに指示を出して、結果を受け取る」というイメージですよね。でも、このプロジェクトでは違うアプローチを取りました。\u003C/p>\n\u003Cp>\u003Cstrong>僕は「顧客」のような立場で要望を伝える。PMであるAIエージェントがその要望を受け取って、自分の判断でプロジェクトを回す。\u003C/strong>\u003C/p>\n\u003Cp>使ったのは、Claude Codeの\u003Cstrong>「Agent Teams」\u003C/strong>という機能。複数のAIエージェントをチームとして同時に動かせる仕組みで、それぞれが独立したセッションを持ちつつ、メッセージのやりとりや共有タスクリストを通じて協調して作業を進められます。\u003C/p>\n\u003Cp>具体的な体制はこうです——\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>僕（人間）\u003C/strong>——「こういうサイトにしたい」と要望を伝える。いわば顧客の立場\u003C/li>\n\u003Cli>\u003Cstrong>PMエージェント\u003C/strong>——プロジェクトを管理する司令塔。僕の要望を受けて、タスクの分解・チーム編成・作業の割り振りを\u003Cstrong>自分の判断で\u003C/strong>行う\u003C/li>\n\u003Cli>\u003Cstrong>実装担当エージェント\u003C/strong>——PMの指示を受けて、コンポーネントやAPI処理をコーディング\u003C/li>\n\u003Cli>\u003Cstrong>確認担当エージェント\u003C/strong>——実装されたコードのレビュー、品質チェック\u003C/li>\n\u003C/ul>\n\u003Cp>一人開発なのに、登場人物が4者いるんです。\u003C/p>\n\u003Cp>\u003Cstrong>「人間（顧客）→ PM → 実装/確認チーム」\u003C/strong>——実際の開発現場に近い階層構造。\u003C/p>\n\u003Cp>たとえば僕が「Worksページを作りたい」と伝えると、PMがそれを「データ構造の設計」「API作成」「UIコンポーネント」「レスポンシブ対応」……と分解して、チームメンバーに振り分けてくれる。実装が終われば確認担当がレビューして、問題があればPM経由でフィードバックが返ってくる。僕はPMからの報告を見て、最終判断をするだけ。\u003C/p>\n\u003Cp>これ、普通に顧客としてWeb制作会社に依頼するのとほぼ同じ流れなんですよね。違うのは、チームメンバーが全員AIだということだけ。\u003C/p>\n\u003Ch3>なぜPMをAIに任せたのか\u003C/h3>\n\u003Cp>「自分でPMをやればいいのでは？」と思うかもしれません。でも、あえてAIに任せた理由があります。\u003C/p>\n\u003Cp>一人開発の弱点は、\u003Cstrong>「作る人」と「管理する人」が同一人物\u003C/strong>になってしまうこと。コードを書いていると、つい目の前の実装に没頭して、全体の進捗や優先順位を見失いがちです。\u003C/p>\n\u003Cp>PMをAIに任せることで、僕は\u003Cstrong>「何を作りたいか」「これでいいか」という判断に集中\u003C/strong>できました。タスクの分解やチームの割り振りは、PMが回してくれる。この分業が、想像以上にうまく機能したんです。\u003C/p>\n\u003Ch3>各メンバーの役割\u003C/h3>\n\u003Cp>改めて、それぞれの担当範囲をまとめます。\u003C/p>\n\u003Ch4>人間（僕）——顧客であり、最終決裁者\u003C/h4>\n\u003Cul>\n\u003Cli>\u003Cstrong>方向性の決定\u003C/strong>——何を作るか、何を優先するか\u003C/li>\n\u003Cli>\u003Cstrong>品質の最終判断\u003C/strong>——「これでOK」と言うか「やり直し」と言うか\u003C/li>\n\u003Cli>\u003Cstrong>ユーザーの気持ちを想像する\u003C/strong>——「サイトを見た人はどう感じるだろう？」\u003C/li>\n\u003Cli>\u003Cstrong>自分だけの知識\u003C/strong>——フリーランスとしてのリアルな経験や事情\u003C/li>\n\u003C/ul>\n\u003Ch4>PMエージェント——プロジェクトの司令塔\u003C/h4>\n\u003Cul>\n\u003Cli>\u003Cstrong>プロジェクト管理\u003C/strong>——タスクの分解・優先順位づけ・進捗管理\u003C/li>\n\u003Cli>\u003Cstrong>チーム編成\u003C/strong>——タスクの内容に応じて、適切なメンバーを割り振る\u003C/li>\n\u003Cli>\u003Cstrong>認識合わせ\u003C/strong>——僕の意図をチームメンバーに正確に伝える\u003C/li>\n\u003Cli>\u003Cstrong>調査・提案\u003C/strong>——技術選定やアーキテクチャの選択肢を出す\u003C/li>\n\u003C/ul>\n\u003Ch4>実装/確認エージェント——手を動かすメンバー\u003C/h4>\n\u003Cul>\n\u003Cli>\u003Cstrong>コードを書く\u003C/strong>——コンポーネントやAPI処理の実装\u003C/li>\n\u003Cli>\u003Cstrong>コードレビュー\u003C/strong>——書いたコードを別の視点でチェック\u003C/li>\n\u003Cli>\u003Cstrong>ドキュメント作成\u003C/strong>——設計書や型定義などの文書化\u003C/li>\n\u003Cli>\u003Cstrong>デバッグ\u003C/strong>——エラーの原因調査、修正案の提示\u003C/li>\n\u003C/ul>\n\u003Cp>ひとことで言えば、\u003Cstrong>「要望は人間、管理はPM、実行はチーム」\u003C/strong>。僕がいちいち細かい指示を出さなくても、PMが判断してチームを動かしてくれる。これが基本ラインです。\u003C/p>\n\u003Ch3>フェーズごとにチーム編成が変わる\u003C/h3>\n\u003Cp>ここが面白いところなんですが、「実装担当＋確認担当」はあくまで基本構成。\u003Cstrong>PMはフェーズの内容に合わせて、チーム編成を柔軟に変えて\u003C/strong>いました。\u003C/p>\n\u003Cp>たとえば——\u003C/p>\n\u003Cp>\u003Cstrong>企画フェーズ\u003C/strong>では、コードを書く人は不要。代わりに「サイト構成を考える人」「コンテンツ戦略を練る人」「技術候補を調査する人」の3名体制。サイトの方向性を固めることに集中したチームです。\u003C/p>\n\u003Cp>\u003Cstrong>設計フェーズ\u003C/strong>では、「デザイン方針を決める人（カラー・タイポグラフィ・コンポーネント設計）」と「技術アーキテクチャを設計する人（ディレクトリ構成・API設計・キャッシュ戦略）」の2名体制。作る前の「設計図」を固めるチーム。\u003C/p>\n\u003Cp>\u003Cstrong>実装フェーズ\u003C/strong>では、さらに分業して「フロントエンド担当」「WordPress API担当」「アニメーション担当」「ページ統合担当」の4名体制。それぞれが専門領域に集中できるようにしていました。\u003C/p>\n\u003Cp>\u003Cstrong>テスト・品質チェックフェーズ\u003C/strong>では、「ビルド検証」「コード品質チェック」「ユニットテスト」「コンポーネントテスト」と、観点別に4名体制。\u003C/p>\n\u003Cp>そして公開後のUI改善では、「デザイン調査担当」「実装担当」「レビュー担当」の小規模チームを都度立ち上げて対応——といった具合です。\u003C/p>\n\u003Cp>\u003Cstrong>チーム編成を固定せず、フェーズに合った専門チームを組む。\u003C/strong>\u003C/p>\n\u003Cp>これはPMの判断で行われていて、僕が「次は〇〇担当を入れて」と細かく指示したわけではありません。タスクの性質を見て、PMが最適な編成を考えてくれる。ここにPMを任せた価値が出ていると感じました。\u003C/p>\n\u003Ch2>タスクの分解——AIに頼みやすいサイズにする\u003C/h2>\n\u003Cp>役割分担が決まったら、次は「やること」をリストアップして分解します。\u003C/p>\n\u003Cp>たとえば「Worksページ（実績紹介）を作る」というタスク。これをそのままAIに投げると、ぼんやりしたものが返ってきます。そこで、こんな風に分解しました。\u003C/p>\n\u003Col>\n\u003Cli>WordPressのデータ構造を設計する → \u003Cstrong>AIに設計案を作ってもらう\u003C/strong>\u003C/li>\n\u003Cli>データの入力項目を決める → \u003Cstrong>設計案を見て、僕が判断する\u003C/strong>\u003C/li>\n\u003Cli>サーバー側のAPI（データ取得処理）を作る → \u003Cstrong>AIにコードを書いてもらう\u003C/strong>\u003C/li>\n\u003Cli>カード型のUI部品を作る → \u003Cstrong>AIにコードを書いてもらう\u003C/strong>\u003C/li>\n\u003Cli>フィルタリング（絞り込み）機能 → \u003Cstrong>AIにコードを書いてもらい、使い勝手は僕が調整\u003C/strong>\u003C/li>\n\u003Cli>スマホ対応とアクセシビリティ → \u003Cstrong>AIと一緒にチェック\u003C/strong>\u003C/li>\n\u003C/ol>\n\u003Cp>ポイントは、\u003Cstrong>各タスクが「AIに頼みやすいサイズ」になっていること\u003C/strong>。大きすぎると焦点がぼやけるし、小さすぎると効率が悪い。ちょうどいい粒度にするのが、人間の腕の見せどころです。\u003C/p>\n\u003Ch2>指示の出し方で、結果が大きく変わる\u003C/h2>\n\u003Cp>AI協働で一番大事だなと感じたのが、\u003Cstrong>「指示の出し方」\u003C/strong>です。\u003C/p>\n\u003Cp>ちょっと比べてみてください。\u003C/p>\n\u003Cp>\u003Cstrong>ふわっとした指示:\u003C/strong>\u003Cbr />\n「いい感じのカードコンポーネント作って」\u003C/p>\n\u003Cp>\u003Cstrong>具体的な指示:\u003C/strong>\u003Cbr />\n「Works用のカードコンポーネントを作って。表示項目はプロジェクト名・サムネイル画像・技術タグ・概要文。ダークテーマ対応、スマホでも見やすいレイアウトで。色やサイズは既存のCSS変数（–color-accent, –space-4など）を使って」\u003C/p>\n\u003Cp>後者のほうが、圧倒的に良い結果が返ってきます。\u003C/p>\n\u003Cp>これは「AIの性能が低いから」ではなく、\u003Cstrong>「何を作りたいかを明確にする」こと自体が、良いものを作るための第一歩\u003C/strong>だからです。人間のデザイナーやエンジニアに依頼するときも、同じですよね。\u003C/p>\n\u003Ch2>プロジェクトの「地図」を共有する\u003C/h2>\n\u003Cp>Claude Codeには\u003Ccode>CLAUDE.md\u003C/code>というファイルを通じて、プロジェクトの情報をAIに共有できる仕組みがあります。ここに、こんなことを書いておきました。\u003C/p>\n\u003Cul>\n\u003Cli>プロジェクトの全体構成\u003C/li>\n\u003Cli>使っている技術\u003C/li>\n\u003Cli>フォルダ構造\u003C/li>\n\u003Cli>デザインの方針\u003C/li>\n\u003Cli>設計ドキュメントへのリンク\u003C/li>\n\u003C/ul>\n\u003Cp>イメージとしては、\u003Cstrong>「新しく入ったチームメンバーに渡すオンボーディング資料」\u003C/strong>に近いです。これがあるとAIが迷わず作業できるようになるので、出力の質がぐっと上がります。\u003C/p>\n\u003Ch2>うまくいかなかった場面も、正直に\u003C/h2>\n\u003Cp>もちろん、全部スムーズだったわけではありません。\u003C/p>\n\u003Cp>たとえば、「ページ遷移のアニメーションを作って」とお願いしたとき。技術的には動くものが出てきたんですが、実際にブラウザで見ると「うーん、なんか違うな……」と。\u003C/p>\n\u003Cp>AIは言われた通りのものを作るのは上手です。でも、\u003Cstrong>「これを見た人はどう感じるか？」「本当に使いやすいか？」という判断は、やっぱり人間がしないといけない\u003C/strong>。\u003C/p>\n\u003Cp>この話は第5回（デザイン・演出編）で詳しくお話しします。\u003C/p>\n\u003Ch2>まとめ——「PM任命」で開発の景色が変わる\u003C/h2>\n\u003Cp>このプロジェクトの肝は、AIを単なるコード生成ツールとして使うのではなく、\u003Cstrong>PMとして任命してプロジェクト全体を任せた\u003C/strong>こと。\u003C/p>\n\u003Cp>そうすることで、僕は——\u003C/p>\n\u003Cul>\n\u003Cli>タスクの分解や割り振りを自分でやらなくていい\u003C/li>\n\u003Cli>「何を作りたいか」と「これでいいか」の判断に集中できる\u003C/li>\n\u003Cli>チームメンバー間の調整もPMが回してくれる\u003C/li>\n\u003Cli>結果を確認して、必要なら方向を修正すればいい\u003C/li>\n\u003C/ul>\n\u003Cp>つまり、\u003Cstrong>顧客のような立場で、AIチームにプロジェクトを進めてもらう\u003C/strong>という体制。人間のチームに仕事を依頼するのとほぼ同じ感覚です。\u003C/p>\n\u003Cp>この体制をうまく機能させるために大事なのは、「全体像を描くこと」と「要望を言葉にすること」。逆に言えば、それさえできればAI PMが動いてくれる。\u003Cstrong>マネジメントの経験がある人ほど、AI協働はうまくいく\u003C/strong>と思います。\u003C/p>\n\u003Cp>次回は、技術選定のお話です。「NuxtとNext.js、どっちにする？」「CMSはどうする？」——そんな判断をAIとどう進めたかをご紹介します。\u003C/p>\n","",[19],{"id":20,"name":21,"slug":22},42,"ワークスタイル","workstyle",[24,28],{"id":25,"name":26,"slug":27},78,"AI協働","ai-collaboration",{"id":29,"name":30,"slug":31},79,"プロジェクト管理","project-management","beginner","AI協働のプロジェクトは「判断は人間、実行はAI」が基本。タスクの分解粒度と指示の具体性が成果を左右する。","7",[],[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":115,"readingTime":34},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,107,111],{"id":104,"name":105,"slug":106},20,"Nuxt","nuxt",{"id":108,"name":109,"slug":110},26,"TypeScript","typescript",{"id":112,"name":113,"slug":114},80,"セキュリティ","security","Cloudflare Turnstile（無料）とハニーポットの2層防御でお問い合わせフォームのスパム対策を実装。本番環境ではNitroが.envを読まない問題やPM2の環境変数反映に注意が必要。",{"slug":117,"title":118,"thumbnail":17},"ai-web-dev-01-why-ai-collaboration","【AI×Web制作 #1】なぜ「AI×人間」でポートフォリオサイトを作ったのか",{"slug":120,"title":121,"thumbnail":17},"ai-web-dev-03-tech-selection","【AI×Web制作 #3】AIと一緒に技術スタックを選ぶ"]