AIにコードを書かせる場面は増えてきました。ただ、「結局どこに使うのが一番効くの？」という問いに対して、まだ手探りの方も多いんじゃないかと思います。
自分はフリーランスのフロントエンドエンジニアとして、日常的にAIエージェントを開発に取り入れています。その中で、一番確実に成果が出ていると感じるのがマークアップの横展開です。
具体的に言うと、レイアウトパターンごとに数ページ分を人間が実装して、残りのページをAIに任せる。このやり方がとにかく速い。ここで言うマークアップはHTML構造の話で、CSSによるスタイリングは含みません。今回はその具体的な進め方と、実際にやってみて感じたことを書いてみます。
なぜマークアップなのか
フロントエンドの仕事にはいろいろな工程があります。設計、マークアップ、スタイリング、インタラクションの実装、パフォーマンスチューニング——どれもAIに手伝ってもらえる時代にはなりましたが、その中で「一番安定して任せられる」のがマークアップだと感じています。
理由はシンプルで、正解が明確だからです。
デザインカンプがあって、そこに書かれた通りに組めばいい。テキストも画像も素材として揃っている。パターンが決まれば、あとは同じ構造の繰り返しです。AIにとっては理想的な条件が揃っています。
そしてもうひとつ、人間の側の事情もあります。
正直なところ、単純作業ほどきつい仕事はありません。同じレイアウトのページを何枚もマークアップしていると、集中力は落ちるし、ケアレスミスは増えるし、何よりモチベーションが削られます。クリエイティブな判断が求められる工程ならまだ頑張れますが、「あと同じようなページが10枚ある」という状況は純粋にしんどい。
AIはその「しんどさ」がありません。同じパターンのページを何枚作らせても精度が落ちない。人間が苦手なところをAIが補う、という意味で非常に相性がいい組み合わせです。
具体的な進め方
自分が実務でやっている流れを紹介します。
ステップ1：レイアウトパターンを洗い出す
まず下層ページのデザインを全体的に眺めて、レイアウトのパターンを分類します。
Webサイトの下層ページは、見た目が違っていてもレイアウトの骨格は数パターンに集約されることが多いです。たとえば「テキスト主体の1カラム」「カード一覧+詳細」「画像とテキストの交互配置」といった具合です。このパターンがいくつあるかを最初に把握しておきます。
ステップ2：パターンごとにベースページを人間が実装する
パターンが3種類あれば、3ページ分は自分の手で実装します。
ここが一番大事な工程です。単にマークアップするだけでなく、共通で使うコンポーネントの設計もこの段階で固めます。命名規則、コンポーネントの粒度、セマンティックな構造——こうした「プロジェクト全体のルール」が、ベースページに体現されている状態を作ります。
AIに横展開を頼むとき、このベースページが「お手本」になります。お手本の品質が低いと、横展開の結果も当然ブレます。ここは手を抜かない方がいいです。
ステップ3：AIに横展開を依頼する
ベースページが揃ったら、AIに残りのページの作成を依頼します。
指示の出し方はシンプルで、出来上がった複数ページの構成を見せて「このパターンで残りのページを作ってほしい。共通コンポーネントはちゃんと使い回して」と伝えるだけです。レイアウトの骨格がベースページに体現されているので、AIはそれを読み取って同じ構造で新しいページを組んでくれます。
ここで地味に助かるのが、画像やPDFからのテキスト取得です。以前のAIは画像内のテキストを読み取る精度がいまいちでしたが、最近はかなり正確になっています。デザインカンプからテキストを拾って、そのままマークアップに埋め込んでくれる。人間がやるとコピペやタイピングで地味に時間がかかる作業を、AIがさらっとこなしてくれます。
完璧ではない — でも十分速い
ここまで良いことを書きましたが、AIの出力がそのまま納品できるかと言えば、そうではありません。
実際に経験した「ズレ」としては、こんなものがあります。
- セクションの区切り方がデザインと微妙に違う — どこからどこまでがひとつのセクションなのか、デザインの意図とAIの解釈がずれることがあります
- 一覧のカード内の情報がデザイン通りでない — カードの枠組みはできているのに、中身をデザインから正確に拾わず、それっぽい内容で埋めてくることがあります
つまり、大枠は合っているけれど、デザインや原稿の通りに中身が入っているかは、人間の目でチェックする必要があるということです。
ただ、これは「使えない」という話ではありません。
ゼロからマークアップする場合と比べてみてください。ページの骨格ができていて、テキストも画像も配置されていて、共通コンポーネントも使い回されている。その状態が一瞬で出来上がるわけです。あとは細部を調整するだけ。体感としては、8割のマークアップがすぐに出来上がって、残りの2割を人間が整えるイメージです。
この「0→8割」の工程を人間がやるのか、AIに任せるのかで、作業時間はまるで変わります。
ちなみに、ベースページ自体をAIにゼロから作らせる——いわゆる0→1のマークアップについては、まだまだ安定しないところが多いです。ここは常に様子を見ている段階で、今のところは人間が作ったお手本があってこそ横展開が活きる、という印象です。
マークアップ以外はどうか
もちろん、AIが活躍できるのはマークアップだけではありません。たとえばJavaScriptの実装やロジックの構築も、AIはかなりの速度でこなしてくれます。
ただ、ロジック系の仕事は「正解が一つではない」場面が多くなります。たとえば状態管理の設計、エラーハンドリングの方針、パフォーマンスとのトレードオフ——こうした判断が入る工程では、AIの出力をそのまま使えるケースが減ります。レビューと修正の比重が大きくなるぶん、「任せて速くなった」という実感が薄れやすい。
その点、マークアップの横展開は「正解が目の前にある」状態で作業を進められます。ベースページというお手本があり、デザインカンプという答えがある。AIの精度が安定しやすい条件が揃っているからこそ、一番確実に効果を感じられるのだと思います。
まとめ
AIエージェントを開発に取り入れるとき、「どこに使うか」の選び方で効果は大きく変わります。
自分の経験では、単純作業で、かつ正解が明確な領域にAIを使うのが一番確実です。マークアップの横展開はまさにその条件に当てはまります。
完璧を求める必要はありません。「速く8割を仕上げて、残りを人間が整える」——この使い方が、実務では一番効きます。
AIに仕事を奪われるという話ではなく、人間がやりたくない部分をAIに引き受けてもらう。その結果、自分はもっとクリエイティブな判断に集中できるようになる。マークアップの横展開は、そういう使い方の一番わかりやすい例だと感じています。