[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"/api/social-links:{}":3,"/api/blogs/ai-markup-horizontal-expansion:{}":9},{"links":4},[5],{"platform":6,"url":7,"icon":8},"note","https://note.com/morinoupa2020","simple-icons:note",{"post":10,"relatedPosts":49,"prevPost":117,"nextPost":118},{"id":11,"slug":12,"title":13,"date":14,"modified":15,"excerpt":16,"content":17,"thumbnail":18,"categories":19,"tags":24,"difficulty":45,"tldr":46,"readingTime":47,"relatedTech":48},254,"ai-markup-horizontal-expansion","AIエージェントが一番確実に活躍できるフロントエンドの仕事 — マークアップの横展開","2026-03-25T19:01:28","2026-03-25T19:08:45","AIにコードを書かせる場面は増えてきました。ただ、「結局どこに使うのが一番効くの？」という問いに対して、まだ手探りの方も多いんじゃないかと思います。 自分はフリーランスのフロントエンドエンジニアとして、日常的にAIエージ […]","\u003Cp>AIにコードを書かせる場面は増えてきました。ただ、「結局どこに使うのが一番効くの？」という問いに対して、まだ手探りの方も多いんじゃないかと思います。\u003C/p>\n\u003Cp>自分はフリーランスのフロントエンドエンジニアとして、日常的にAIエージェントを開発に取り入れています。その中で、一番確実に成果が出ていると感じるのが\u003Cstrong>マークアップの横展開\u003C/strong>です。\u003C/p>\n\u003Cp>具体的に言うと、レイアウトパターンごとに数ページ分を人間が実装して、残りのページをAIに任せる。このやり方がとにかく速い。ここで言うマークアップはHTML構造の話で、CSSによるスタイリングは含みません。今回はその具体的な進め方と、実際にやってみて感じたことを書いてみます。\u003C/p>\n\u003Ch2>なぜマークアップなのか\u003C/h2>\n\u003Cp>フロントエンドの仕事にはいろいろな工程があります。設計、マークアップ、スタイリング、インタラクションの実装、パフォーマンスチューニング——どれもAIに手伝ってもらえる時代にはなりましたが、その中で「一番安定して任せられる」のがマークアップだと感じています。\u003C/p>\n\u003Cp>理由はシンプルで、\u003Cstrong>正解が明確だから\u003C/strong>です。\u003C/p>\n\u003Cp>デザインカンプがあって、そこに書かれた通りに組めばいい。テキストも画像も素材として揃っている。パターンが決まれば、あとは同じ構造の繰り返しです。AIにとっては理想的な条件が揃っています。\u003C/p>\n\u003Cp>そしてもうひとつ、人間の側の事情もあります。\u003C/p>\n\u003Cp>正直なところ、\u003Cstrong>単純作業ほどきつい仕事はありません\u003C/strong>。同じレイアウトのページを何枚もマークアップしていると、集中力は落ちるし、ケアレスミスは増えるし、何よりモチベーションが削られます。クリエイティブな判断が求められる工程ならまだ頑張れますが、「あと同じようなページが10枚ある」という状況は純粋にしんどい。\u003C/p>\n\u003Cp>AIはその「しんどさ」がありません。同じパターンのページを何枚作らせても精度が落ちない。人間が苦手なところをAIが補う、という意味で非常に相性がいい組み合わせです。\u003C/p>\n\u003Ch2>具体的な進め方\u003C/h2>\n\u003Cp>自分が実務でやっている流れを紹介します。\u003C/p>\n\u003Ch3>ステップ1：レイアウトパターンを洗い出す\u003C/h3>\n\u003Cp>まず下層ページのデザインを全体的に眺めて、レイアウトのパターンを分類します。\u003C/p>\n\u003Cp>Webサイトの下層ページは、見た目が違っていてもレイアウトの骨格は数パターンに集約されることが多いです。たとえば「テキスト主体の1カラム」「カード一覧+詳細」「画像とテキストの交互配置」といった具合です。このパターンがいくつあるかを最初に把握しておきます。\u003C/p>\n\u003Ch3>ステップ2：パターンごとにベースページを人間が実装する\u003C/h3>\n\u003Cp>パターンが3種類あれば、3ページ分は自分の手で実装します。\u003C/p>\n\u003Cp>ここが一番大事な工程です。単にマークアップするだけでなく、共通で使うコンポーネントの設計もこの段階で固めます。命名規則、コンポーネントの粒度、セマンティックな構造——こうした「プロジェクト全体のルール」が、ベースページに体現されている状態を作ります。\u003C/p>\n\u003Cp>AIに横展開を頼むとき、このベースページが「お手本」になります。お手本の品質が低いと、横展開の結果も当然ブレます。ここは手を抜かない方がいいです。\u003C/p>\n\u003Ch3>ステップ3：AIに横展開を依頼する\u003C/h3>\n\u003Cp>ベースページが揃ったら、AIに残りのページの作成を依頼します。\u003C/p>\n\u003Cp>指示の出し方はシンプルで、出来上がった複数ページの構成を見せて「このパターンで残りのページを作ってほしい。共通コンポーネントはちゃんと使い回して」と伝えるだけです。レイアウトの骨格がベースページに体現されているので、AIはそれを読み取って同じ構造で新しいページを組んでくれます。\u003C/p>\n\u003Cp>ここで地味に助かるのが、\u003Cstrong>画像やPDFからのテキスト取得\u003C/strong>です。以前のAIは画像内のテキストを読み取る精度がいまいちでしたが、最近はかなり正確になっています。デザインカンプからテキストを拾って、そのままマークアップに埋め込んでくれる。人間がやるとコピペやタイピングで地味に時間がかかる作業を、AIがさらっとこなしてくれます。\u003C/p>\n\u003Ch2>完璧ではない — でも十分速い\u003C/h2>\n\u003Cp>ここまで良いことを書きましたが、AIの出力がそのまま納品できるかと言えば、そうではありません。\u003C/p>\n\u003Cp>実際に経験した「ズレ」としては、こんなものがあります。\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>セクションの区切り方がデザインと微妙に違う\u003C/strong> — どこからどこまでがひとつのセクションなのか、デザインの意図とAIの解釈がずれることがあります\u003C/li>\n\u003Cli>\u003Cstrong>一覧のカード内の情報がデザイン通りでない\u003C/strong> — カードの枠組みはできているのに、中身をデザインから正確に拾わず、それっぽい内容で埋めてくることがあります\u003C/li>\n\u003C/ul>\n\u003Cp>つまり、大枠は合っているけれど、\u003Cstrong>デザインや原稿の通りに中身が入っているかは、人間の目でチェックする必要がある\u003C/strong>ということです。\u003C/p>\n\u003Cp>ただ、これは「使えない」という話ではありません。\u003C/p>\n\u003Cp>ゼロからマークアップする場合と比べてみてください。ページの骨格ができていて、テキストも画像も配置されていて、共通コンポーネントも使い回されている。その状態が一瞬で出来上がるわけです。あとは細部を調整するだけ。体感としては、8割のマークアップがすぐに出来上がって、残りの2割を人間が整えるイメージです。\u003C/p>\n\u003Cp>この「0→8割」の工程を人間がやるのか、AIに任せるのかで、作業時間はまるで変わります。\u003C/p>\n\u003Cp>ちなみに、ベースページ自体をAIにゼロから作らせる——いわゆる0→1のマークアップについては、まだまだ安定しないところが多いです。ここは常に様子を見ている段階で、今のところは人間が作ったお手本があってこそ横展開が活きる、という印象です。\u003C/p>\n\u003Ch2>マークアップ以外はどうか\u003C/h2>\n\u003Cp>もちろん、AIが活躍できるのはマークアップだけではありません。たとえばJavaScriptの実装やロジックの構築も、AIはかなりの速度でこなしてくれます。\u003C/p>\n\u003Cp>ただ、ロジック系の仕事は「正解が一つではない」場面が多くなります。たとえば状態管理の設計、エラーハンドリングの方針、パフォーマンスとのトレードオフ——こうした判断が入る工程では、AIの出力をそのまま使えるケースが減ります。レビューと修正の比重が大きくなるぶん、「任せて速くなった」という実感が薄れやすい。\u003C/p>\n\u003Cp>その点、マークアップの横展開は\u003Cstrong>「正解が目の前にある」\u003C/strong>状態で作業を進められます。ベースページというお手本があり、デザインカンプという答えがある。AIの精度が安定しやすい条件が揃っているからこそ、一番確実に効果を感じられるのだと思います。\u003C/p>\n\u003Ch2>まとめ\u003C/h2>\n\u003Cp>AIエージェントを開発に取り入れるとき、「どこに使うか」の選び方で効果は大きく変わります。\u003C/p>\n\u003Cp>自分の経験では、\u003Cstrong>単純作業で、かつ正解が明確な領域\u003C/strong>にAIを使うのが一番確実です。マークアップの横展開はまさにその条件に当てはまります。\u003C/p>\n\u003Cp>完璧を求める必要はありません。\u003Cstrong>「速く8割を仕上げて、残りを人間が整える」\u003C/strong>——この使い方が、実務では一番効きます。\u003C/p>\n\u003Cp>AIに仕事を奪われるという話ではなく、人間がやりたくない部分をAIに引き受けてもらう。その結果、自分はもっとクリエイティブな判断に集中できるようになる。マークアップの横展開は、そういう使い方の一番わかりやすい例だと感じています。\u003C/p>\n","",[20],{"id":21,"name":22,"slug":23},44,"技術深掘り","deep-dive",[25,29,33,37,41],{"id":26,"name":27,"slug":28},78,"AI協働","ai-collaboration",{"id":30,"name":31,"slug":32},81,"Claude Code","claude-code",{"id":34,"name":35,"slug":36},84,"フロントエンド","%e3%83%95%e3%83%ad%e3%83%b3%e3%83%88%e3%82%a8%e3%83%b3%e3%83%89",{"id":38,"name":39,"slug":40},85,"マークアップ","%e3%83%9e%e3%83%bc%e3%82%af%e3%82%a2%e3%83%83%e3%83%97",{"id":42,"name":43,"slug":44},86,"実務","%e5%ae%9f%e5%8b%99","beginner","フロントエンドの実務でAIエージェントが最も確実に力を発揮するのはマークアップの横展開。レイアウトパターンごとに数ページ人間が作り、残りをAIに任せると圧倒的に速い。完璧ではないが、単純作業の負担を大幅に減らせる。","6",[],[50,76,99],{"id":51,"slug":52,"title":53,"date":54,"excerpt":55,"thumbnail":18,"categories":56,"tags":58,"difficulty":73,"tldr":74,"readingTime":75},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の設計、管理画面のカスタマイズ。こうした作業は、仕様が明確でパターン化しやすい。 前回までの連載で「デザインやアニメーションなど、人間の感性に […]",[57],{"id":21,"name":22,"slug":23},[59,60,61,65,69],{"id":26,"name":27,"slug":28},{"id":30,"name":31,"slug":32},{"id":62,"name":63,"slug":64},82,"PHP","php",{"id":66,"name":67,"slug":68},83,"REST API","rest-api",{"id":70,"name":71,"slug":72},31,"WordPress","wordpress","intermediate","ポートフォリオサイトのWordPressバックエンド（テーマ・REST API・管理画面）をAIに全任せで実装。定型的なバックエンド作業はAIの得意領域だが、実際に使い始めると「キー名の不一致」「運用を想定していない設計」など、細かい修正が必要になる場面があった。","8",{"id":77,"slug":78,"title":79,"date":80,"excerpt":81,"thumbnail":18,"categories":82,"tags":84,"difficulty":73,"tldr":97,"readingTime":98},112,"free-spam-protection-turnstile-honeypot","お問い合わせフォームのスパム対策を無料で実装する — Cloudflare Turnstile × ハニーポットの2層防御","2026-02-28T02:12:59","お問い合わせフォームのスパム対策、後回しにしていませんか？Cloudflare Turnstileとハニーポットを組み合わせた2層防御を完全無料で実装する方法を、本番環境でのハマりポイントも含めて解説します。",[83],{"id":21,"name":22,"slug":23},[85,89,93],{"id":86,"name":87,"slug":88},20,"Nuxt","nuxt",{"id":90,"name":91,"slug":92},26,"TypeScript","typescript",{"id":94,"name":95,"slug":96},80,"セキュリティ","security","Cloudflare Turnstile（無料）とハニーポットの2層防御でお問い合わせフォームのスパム対策を実装。本番環境ではNitroが.envを読まない問題やPM2の環境変数反映に注意が必要。","7",{"id":100,"slug":101,"title":102,"date":103,"excerpt":104,"thumbnail":18,"categories":105,"tags":110,"difficulty":45,"tldr":116,"readingTime":47},246,"ai-web-dev-07-future-engineer","【AI×Web制作 #7】AI時代のエンジニア像 — これからの開発スタイル","2026-02-25T16:00:00","全7回の連載を振り返り、AI時代にエンジニアの価値はどう変わるかを考える。「使える人」から「引き出せる人」へ——新しい開発スタイルの提案。",[106],{"id":107,"name":108,"slug":109},38,"トレンド","trend",[111,112],{"id":26,"name":27,"slug":28},{"id":113,"name":114,"slug":115},79,"プロジェクト管理","project-management","AI時代のエンジニアの価値は「技術を使える」から「AIから最適な結果を引き出せる」へ。言語化力・判断力・PM力が鍵。",{"slug":52,"title":53,"thumbnail":18},null]