[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"/api/social-links:{}":3,"/api/blogs/ai-web-dev-07-future-engineer:{}":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},246,"ai-web-dev-07-future-engineer","【AI×Web制作 #7】AI時代のエンジニア像 — これからの開発スタイル","2026-02-25T16:00:00","全7回の連載を振り返り、AI時代にエンジニアの価値はどう変わるかを考える。「使える人」から「引き出せる人」へ——新しい開発スタイルの提案。","\u003Cp>シリーズ最終回です。ここまで6回にわたって、AI協働でポートフォリオサイトを作ったプロセスを書いてきました。\u003C/p>\n\u003Cp>最終回では少し視点を広げて、\u003Cstrong>「AI時代のエンジニアの役割はどう変わるのか」\u003C/strong>について、このプロジェクトを通じて感じたことを素直に書いてみます。\u003C/p>\n\u003Ch2>振り返って思うこと\u003C/h2>\n\u003Cp>正直な感想を言うと、\u003Cstrong>AI協働は「楽」ではなかったけど、「一人では到達できなかった完成度」に達した\u003C/strong>と思っています。\u003C/p>\n\u003Cp>「楽ではなかった」のは、AIへの指示出し、出力のレビュー、方向修正——これらが想像以上に頭を使う作業だったから。「AIに丸投げ」は、少なくとも今の時点では無理です。\u003C/p>\n\u003Cp>でも、Agent Teamsで複数のエージェントをチーム編成し、企画から実装・テスト・デプロイまで一貫してチーム体制で進めたことで、一人で全部やったら何ヶ月かかるか分からなかった作業が形になりました。設計書、型定義、アクセシビリティ対応、SEO用の構造化データ、自動デプロイ——\u003Cstrong>「やったほうがいいけど、一人だと手が回らない」部分をAIチームがカバーしてくれた\u003C/strong>んです。\u003C/p>\n\u003Ch3>計画はどこまで守れたのか\u003C/h3>\n\u003Cp>第1回で紹介した\u003Cstrong>4フェーズの計画（企画→設計→実装→テスト・デプロイ）\u003C/strong>は、振り返ってみると骨格はかなり正確に実行できました。各フェーズのチーム構成も計画通り、成果物もほぼ想定通り。\u003C/p>\n\u003Cp>ただし、\u003Cstrong>計画にはなかった作業\u003C/strong>もそれなりに発生しました。WordPressのローカル開発環境の構築、公開後のUI改善・ブラッシュアップ、別のAIエージェントとの連携体制の整備——いわゆる「やってみたら必要だった」系の作業です。ヒーロー演出をCanvas/WebGLのジェネラティブアートからYouTube動画に変更するという方針転換もありました。\u003C/p>\n\u003Cp>興味深いのは、こうした計画外の作業が出てきたときに、\u003Cstrong>PMが都度判断して適切なチームを編成し、対処してくれた\u003C/strong>こと。計画を立てること自体も大事だけど、計画から外れたときに柔軟に対応できる体制——それこそが、PMをAIに任せた一番の価値だったかもしれません。\u003C/p>\n\u003Ch3>正直に言えば、まだ届いていない部分もある\u003C/h3>\n\u003Cp>一方で、\u003Cstrong>デザインやエフェクト（視覚的な演出）については、自分が思い描いているものにはまだ到達できていない\u003C/strong>というのが正直なところです。\u003C/p>\n\u003Cp>第5回で書いた通り、「気持ちいいスムーズさ」や「ガクッとならない動き」といった感覚的な部分は、言葉で伝えてもAIとの間でどうしてもギャップが生まれる。機能面やコード品質ではAIの力を大いに活かせたけれど、\u003Cstrong>ビジュアルの細かなニュアンスは、今のAIの能力ではまだ難しい領域\u003C/strong>だと感じました。\u003C/p>\n\u003Cp>ただ、これは「今は」の話です。AIのデザイン能力は日々進化しています。画像生成AIの進歩を見ても分かるように、\u003Cstrong>感覚的な表現を理解して出力する能力は、これから大きく伸びていく分野\u003C/strong>だと思います。今回のプロジェクトで「ここがまだ足りない」と感じた部分が、次にやるときには解決しているかもしれない。その可能性にはワクワクしています。\u003C/p>\n\u003Ch2>「使える人」から「引き出せる人」へ\u003C/h2>\n\u003Cp>このプロジェクトを通じて確信したことがあります。\u003C/p>\n\u003Cp>エンジニアの価値の軸が、少しずつ変わりつつある、ということ。\u003C/p>\n\u003Cp>\u003Cstrong>これまで:\u003C/strong> 「〇〇（フレームワーク名）を使える人」——特定の技術に詳しいことが価値\u003C/p>\n\u003Cp>\u003Cstrong>これから:\u003C/strong> 「AIから最適な結果を引き出せる人」——問題を分解し、的確に指示を出し、出力を評価できることが価値\u003C/p>\n\u003Cp>誤解しないでいただきたいのは、\u003Cstrong>技術力はこれからも必要\u003C/strong>だということ。TypeScriptの型の仕組みを理解していないと、AIが作った型定義の良し悪しが分からない。CSSの仕様を知らないと、AIが提案したレイアウトの問題に気づけない。\u003C/p>\n\u003Cp>つまり、技術力は「AIを使いこなすために」も必要なんです。ただし、技術力「だけ」では足りなくなっていく。\u003C/p>\n\u003Ch2>これから価値が高まる4つの力\u003C/h2>\n\u003Cp>このプロジェクトの経験から、AI時代に特に価値が高まると感じた力を4つ挙げます。\u003C/p>\n\u003Ch3>1. 言語化する力\u003C/h3>\n\u003Cp>「こういうものが欲しい」を具体的な言葉にする力。これは、AIへの指示の質に直結します。\u003C/p>\n\u003Cp>デザインの方向性、ユーザー体験の理想、技術的な制約——\u003Cstrong>頭の中のイメージを言葉に変換できるエンジニア\u003C/strong>の生産性は、AI時代にさらに伸びると思います。\u003C/p>\n\u003Ch3>2. 判断する力\u003C/h3>\n\u003Cp>AIは選択肢をたくさん出してくれます。でも、「どれを選ぶか」は人間の仕事です。\u003C/p>\n\u003Cp>プロジェクトの状況、ユーザーの期待、予算、スケジュール……。\u003Cstrong>複数の要素を総合して「これでいく」と決断する力\u003C/strong>は、AIには代替できません。\u003C/p>\n\u003Ch3>3. 「やめる」判断力\u003C/h3>\n\u003Cp>第5回でも触れましたが、AIは「できること」をどんどん提案してくれます。でも、良いプロダクトは引き算で作るもの。\u003C/p>\n\u003Cp>\u003Cstrong>「技術的にはできるけど、あえてやらない」という判断\u003C/strong>。これは経験と感性がないとできません。\u003C/p>\n\u003Ch3>4. プロジェクトを前に進める力\u003C/h3>\n\u003Cp>技術選定、スケジュール管理、優先順位づけ、関係者とのコミュニケーション——いわゆるプロジェクトマネジメントの力です。\u003C/p>\n\u003Cp>AIという強力なリソースが使えるようになった分、\u003Cstrong>それを活かす「マネジメント力」の差が、成果の差\u003C/strong>になっていきます。\u003C/p>\n\u003Ch2>フリーランスにとっての意味\u003C/h2>\n\u003Cp>フリーランスのエンジニアとして、AI協働はビジネス面でも大きなインパクトがあります。\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>開発期間が圧倒的に短くなる\u003C/strong>——今回のプロジェクトでは、企画から実装・テストまでを一人で手作業でやったら何ヶ月もかかる規模の作業が、AIチームとの協働で想像以上に短い期間で形になった。このスピード感はフリーランスにとって大きな武器になる\u003C/li>\n\u003Cli>\u003Cstrong>品質が底上げされる\u003C/strong>——一人では手が回らなかったテスト・レビュー・アクセシビリティ対応もカバーできる\u003C/li>\n\u003Cli>\u003Cstrong>対応範囲が広がる\u003C/strong>——「これもできますよ」と提案できることが増える\u003C/li>\n\u003C/ul>\n\u003Cp>お客さんにとっては、\u003Cstrong>「AIをうまく使って、短い期間で質の高いものを作ってくれるエンジニア」に頼むのが合理的\u003C/strong>です。AIを使いこなせること自体が、フリーランスの競争力になります。\u003C/p>\n\u003Ch2>この連載を読んでくださった皆さんへ\u003C/h2>\n\u003Cp>7回にわたる連載を読んでいただき、本当にありがとうございました。\u003C/p>\n\u003Cp>この連載で一番伝えたかったのは、「AIすごい」でも「人間いらない」でもありません。\u003C/p>\n\u003Cp>\u003Cstrong>「AIと人間が組むと、こういう仕事ができるよ」\u003C/strong>というリアルな話です。\u003C/p>\n\u003Cp>AIは確かにすごいツールです。でも、ただのツールではなく、対話ができて、提案もしてくれて、一緒に問題を解決してくれるパートナー。\u003C/p>\n\u003Cp>この新しいパートナーとの付き合い方を模索していくのは、エンジニアにとってワクワクすることだと思います。少なくとも、僕はとても楽しかったです。\u003C/p>\n\u003Cp>もしこの連載を読んで「こういうエンジニアに相談してみたい」と思っていただけたら、お気軽にお問い合わせください。AIとのチーム体制で、あなたのプロジェクトを一緒に形にします。\u003C/p>\n\u003Cp>それでは、また次の記事でお会いしましょう。\u003C/p>\n","",[19],{"id":20,"name":21,"slug":22},38,"トレンド","trend",[24,28],{"id":25,"name":26,"slug":27},78,"AI協働","ai-collaboration",{"id":29,"name":30,"slug":31},79,"プロジェクト管理","project-management","beginner","AI時代のエンジニアの価値は「技術を使える」から「AIから最適な結果を引き出せる」へ。言語化力・判断力・PM力が鍵。","6",[],[37,67,93],{"id":38,"slug":39,"title":40,"date":41,"excerpt":42,"thumbnail":17,"categories":43,"tags":48,"difficulty":32,"tldr":66,"readingTime":34},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に任せると圧倒的に速い。完璧ではないが、単純作業の負担を大幅に減らせる。",{"id":68,"slug":69,"title":70,"date":71,"excerpt":72,"thumbnail":17,"categories":73,"tags":75,"difficulty":90,"tldr":91,"readingTime":92},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の設計、管理画面のカスタマイズ。こうした作業は、仕様が明確でパターン化しやすい。 前回までの連載で「デザインやアニメーションなど、人間の感性に […]",[74],{"id":45,"name":46,"slug":47},[76,77,78,82,86],{"id":25,"name":26,"slug":27},{"id":51,"name":52,"slug":53},{"id":79,"name":80,"slug":81},82,"PHP","php",{"id":83,"name":84,"slug":85},83,"REST API","rest-api",{"id":87,"name":88,"slug":89},31,"WordPress","wordpress","intermediate","ポートフォリオサイトのWordPressバックエンド（テーマ・REST API・管理画面）をAIに全任せで実装。定型的なバックエンド作業はAIの得意領域だが、実際に使い始めると「キー名の不一致」「運用を想定していない設計」など、細かい修正が必要になる場面があった。","8",{"id":94,"slug":95,"title":96,"date":97,"excerpt":98,"thumbnail":17,"categories":99,"tags":101,"difficulty":90,"tldr":114,"readingTime":115},112,"free-spam-protection-turnstile-honeypot","お問い合わせフォームのスパム対策を無料で実装する — Cloudflare Turnstile × ハニーポットの2層防御","2026-02-28T02:12:59","お問い合わせフォームのスパム対策、後回しにしていませんか？Cloudflare Turnstileとハニーポットを組み合わせた2層防御を完全無料で実装する方法を、本番環境でのハマりポイントも含めて解説します。",[100],{"id":45,"name":46,"slug":47},[102,106,110],{"id":103,"name":104,"slug":105},20,"Nuxt","nuxt",{"id":107,"name":108,"slug":109},26,"TypeScript","typescript",{"id":111,"name":112,"slug":113},80,"セキュリティ","security","Cloudflare Turnstile（無料）とハニーポットの2層防御でお問い合わせフォームのスパム対策を実装。本番環境ではNitroが.envを読まない問題やPM2の環境変数反映に注意が必要。","7",{"slug":117,"title":118,"thumbnail":17},"ai-web-dev-06-quality-and-deploy","【AI×Web制作 #6】AIと品質を守る — レビュー・テスト・デプロイ",{"slug":95,"title":96,"thumbnail":17}]