カンプからコードへの変換はAIの影響が先行・要件整理と検収は人の仕事・実装力に掛ける3つ(動きの設計／上流工程の言語化／Web解析)
コーダーという仕事そのものは、2026年10月時点でなくなっていません。ただし、AIの影響は仕事の中身に均等には及びません。完成したデザインカンプ(完成イメージ図)をHTML/CSSに置き換えるだけの作業は、影響を先に受けると当校は見ています。発注者の要望の整理、納品前の品質確認、修正対応、公開後の改善は、2026年10月時点では人が担う仕事です。
「コーダー 将来性」で検索すると、現役コーダー個人の体感談が多く並びます。この記事では体感ではなく、AIコーディングツールの公式ドキュメントと公開されている調査データを根拠に線を引きます。データから言えない部分は、当校の見立てだと分かるように書きました。
ここでいうコーダーは、Web制作でHTML/CSS/JavaScriptを使ってサイトを実装する職種です。フロントエンドエンジニアとの違いはコーダーとフロントエンドエンジニアの違いの記事に譲ります。副業として今から始めるかを迷っている方は、生成AIで「やめとけ」はどう変わったかを先に読んでください。本記事は職種としての将来性に絞り、次の5つを書きます。
- 2026年10月時点で、AIがコーディングのどこまでを担うか
- なくなりやすい作業と人に残る仕事の、作業単位の線引き
- AIの初稿がそのまま納品物にならない理由と、検収で見る項目
- これからのWeb制作で効く、スキルの掛け合わせ3つ
- 学習中の人と現役コーダーが、それぞれ今やること
2026年10月時点で、AIはコーディングのどこまでを担うか
カンプを渡してコードの初稿を受け取るところまでは、公式のツールでできるようになりました。ただし、出力の正確さを信頼している開発者は3人に1人です。
まずツールの側です。Figmaが公式に提供するMCPサーバー(AIツールと外部サービスをつなぐ仕組み)は、Figma上で選んだフレームからコードを生成できます。変数やコンポーネント、レイアウトの情報もAIツールへ渡せます(Figma公式ヘルプ)。AnthropicのClaude Codeは、プロジェクトのコード一式を読み、ファイルを編集し、コマンドを実行するツールだと公式に説明されています。複数ファイルにまたがる実装と動作確認までが守備範囲です。
次に、その使われ方です。Anthropicは、同社のAI(Claude.aiとClaude Code)でのコーディング関連の対話50万件を分析し、2025年4月に公表しました。依頼の内訳は、JavaScriptとTypeScriptが合わせて31%、HTMLとCSSが合わせて28%です。用途別では、UI/UXコンポーネントの開発が12%で上位5つに入りました(Anthropic Economic Index)。同社は推測と断ったうえで、AIに任せて作る開発が主流になれば、シンプルなアプリやユーザーインターフェースを作る仕事は早い時期に影響を受けるかもしれないと述べています。1社のAIの利用記録で、業界全体の統計ではありません。それでもこの範囲では、Web制作でも使う言語が依頼の6割近くを占めています。
ただ、書かれたコードがそのまま信頼されているわけではありません。Stack Overflowの2025年の開発者調査では、AIツールを使用中または使用予定の回答者が84%でした。その一方で、出力の正確さを信頼する人は33%、信頼しない人は46%です。不満の1位は「ほぼ合っているが、完全ではない」(66%)でした(Stack Overflow Developer Survey 2025)。回答者は開発者全般で、Web制作に限った数字ではありません。
速さについても、数字は一定しません。AIの評価を行う非営利の研究機関METRは、2025年7月に実験結果を公表しました。経験豊富なオープンソース開発者16人が2025年前半のAIツールを使ったところ、作業完了までの時間は19%長くなりました。本人たちは「20%速くなった」と感じていました(METRの2025年7月の報告)。2026年2月の続報は、2025年の推定よりも速くなっている可能性が高いと述べています。ただし、AIなしで作業したくない開発者が参加を避けるといった偏りがあり、伸び幅についてはごく弱い証拠しかないとしています(METRの2026年2月の続報)。対象は大規模なオープンソース開発で、Web制作ではありません。それでも「体感の速さと実測の速さはずれる」という結果は、体感談を読むときの注意点になります。
公開データから言えるのはここまでです。「何年後にコーダーの求人が何割減る」という数字は、本記事の調査の範囲では、根拠のあるものを確認できませんでした。
なくなりやすい作業と人に残る仕事を、作業単位で線引きする
線を引く基準は、「入力」と「正解」が先に決まっているかどうかです。両方が決まっている作業ほどAIに移りやすく、どちらかが曖昧な作業ほど人に残りやすい、というのが当校の見立てです。
| 作業 | 入力と正解 | AIの影響 | 人に残る部分 |
|---|---|---|---|
| 静的ページの初稿 (カンプ→HTML/CSS) |
両方ある(カンプが完成図) | 大 | 出力を読んで直す作業 |
| 定型パーツの実装 (メニュー開閉・スライダー) |
両方ある(定番の書き方がある) | 大 | 既存コードとの整合、操作性の確認 |
| レスポンシブ対応 | 正解が一部ない(カンプに無い画面幅) | 中 | 描かれていない幅でどう見せるかの判断 |
| 動きの実装 (スクロール連動など) |
正解がカンプに描けない | 中 | いつ・どの速さで動かすかの設計と調整 |
| 既存サイトの改修・修正 | 入力が散らばっている(過去の経緯、既存の書き方) | 中 | 影響範囲の見極め、発注者とのやり取り |
| 要件整理・ヒアリング | 入力が曖昧 | 小 | 要望を構成と機能に書き起こす |
| 検収 (端末・速度・操作性) |
正解を自分で定義する | 小 | 納品物への責任 |
| 公開後の計測と改善提案 | 正解は公開後のデータにしかない | 小 | 何を成果とするかの合意と、次の打ち手 |
「AIの影響」の大・中・小は、当校の講師陣が実務で生成AIを使ってきた範囲での、2026年10月時点の見立てです。統計ではなく、案件の種類によって変わります。
表の上2行は、完成図があり書き方も決まっている作業です。冒頭で「影響を先に受ける」と書いたのはこの部分で、ここだけを切り出して請ける働き方ほど影響が早いと見ています。職種が消えるというより、見積書の「コーディング一式」という行が細っていく形です。
下3行は逆です。ヒアリングには相手がいて、検収には責任があり、改善には公開後のデータが要ります。AIは下書きや洗い出しを手伝えます。それでも「何をもって完成とするか」を決める役は、2026年10月時点ではAIに渡しにくいままです。スクールの課題と実案件の違いとして別の記事で挙げた4つの変数(要件・修正・納期・相手)は、そのままAIに渡しにくい4つでもあります。
中段の3行は、AIが初稿を出せる一方で、仕上がりの差が人によって大きく開く作業です。後半の「掛け合わせ」は、この中段と下段を自分の仕事にする話です。
AIの初稿が、そのまま納品物にならない理由
AIの初稿は「見た目がほぼ合っている」段階で止まりやすく、納品物として通るかどうかは、見た目の外側にある項目で決まります。
米ユタ州立大学の非営利組織WebAIMは、2026年2月に上位100万サイトのホームページを機械的に検査しました。95.9%で、アクセシビリティ(障害の有無や利用環境を問わず使えること)の基準であるWCAG 2への不適合が検出されています。文字のコントラスト不足(83.9%)、画像の代替テキストの欠落(53.1%)、フォームのラベル欠落(51%)など6種類が、検出されたエラーの96%を占めます(The WebAIM Million 2026)。AIが書いたコードだけを調べた調査ではありません。ただ、不適合の割合は2025年の94.8%から増えました。WebAIMは、ページの複雑化が進んだ背景に、外部のフレームワークやライブラリへの依存と、AIを使ったコーディングの広がりがある可能性が高いと述べています。
納品前の検収で見る項目を、AIの初稿を前提に並べると次のとおりです。
- カンプに無い画面幅: 375pxと768pxの間や、1920pxを超える幅で崩れないか
- 操作: キーボードだけでメニューとフォームを操作できるか。画像の代替テキストと文字のコントラストは足りているか
- 表示速度: Core Web Vitals(Googleが定める表示速度・応答性・レイアウト安定性の指標)の目安に収まるか。LCP 2.5秒以内、INP 200ミリ秒以下、CLS 0.1以下(web.devの解説)
- フォーム: 送信、入力エラーの表示、完了画面までが一連で動くか
- 既存コードとの整合: クラスの命名やファイル構成が既存サイトの書き方に揃っているか。使っていないCSSやJavaScriptが残っていないか
- 動き: OSで動きを減らす設定にしている利用者に配慮しているか(CSSのprefers-reduced-motion)
この一覧を自分で確かめるには、コードを読めることが前提になります。読めないコードは、どこを直せばよいかが分かりません。AIの出力をそのまま納品して検収で突き返される例があることは、副業の「やめとけ」を扱った記事でも監修エンジニアが補足しています。
AddedPallasのカリキュラムは、STEP3でピクセルパーフェクト(カンプと1px単位で揃える実装)と保守性のあるコードを扱います。最後のSTEP5では、納期つきのテスト案件を「商品レベルのサイトになっているか」で評価します(カリキュラム)。検収する側の目は、検収される経験を重ねて育ちます。
発注者がAIで自作すれば、コーダーは要らなくなるのか
企業全般を対象にした2026年3月の調査では、生成AIを業務で使う企業は3社に1社ほどで、用途の中心は文章作成です。
帝国データバンクが2026年3月に実施した調査(有効回答1万312社)では、生成AIを業務で活用している企業は34.5%でした。規模別では、中小企業が32.4%、小規模企業が28.0%です。活用企業3,560社の主な用途は「文章の作成・要約・校正」が45.1%で最も多く、「コード生成などのプログラミング支援」は5.9%でした。懸念や課題(3つまでの複数回答)は「情報の正確性」が50.4%で最も多く、次が「専門人材・ノウハウ不足」の41.3%です(帝国データバンク「生成AIに関する企業の動向調査(2026年3月)」)。
個人で受けるWeb制作の発注者は、個人店のオーナーや中小企業の担当者が中心です(発注者が何を見ているかの記事)。調査でこの層に近いのは中小企業と小規模企業の数字で、活用は3割前後です。懸念の上位は規模別ではなく全体の集計ですが、「出てきたものが正しいか」「分かる人がいるか」に集まっています。AIでサイトの形を作れることと、それが自社の商売に合っているかを判断できることは別です。コーダーに頼む理由は、「コードを書いてもらう」から「正しく動く状態にして、責任を持って引き渡してもらう」へ寄っていく、と当校は読んでいます。
この読みには限界もあります。調査は企業全般が対象で、Web制作の発注や個人店に限った数字ではありません。活用率が上がれば状況は変わります。当てにするのは「発注者は自作できない」ことではなく、自作した発注者からも相談される力のほうです。
これからのWeb制作で生き残る、スキルの掛け合わせ3つ
当校が2026年10月時点で勧める掛け合わせは3つあります。土台は、自分の手で書けるHTML/CSS/JavaScriptです。掛け算なので、土台がゼロなら何を掛けてもゼロになります。
| 掛け合わせ | できるようになること | AIに渡しにくい理由 | 最初に作る成果物 |
|---|---|---|---|
| ①実装力× 動きの設計 |
カンプに描けない「時間」を実装する。目を惹き、かつ重くならないサイト | 動きの正解は画面を触って決めるしかなく、指示文に書き切れない | スクロール連動の演出を1つ、表示速度の目安を守って実装した作品 |
| ②実装力× 上流工程の言語化 |
曖昧な要望を、構成・機能・やらないことに書き起こす | 相手の事情は、相手に聞かないと出てこない | 想定発注者と目的を1枚にまとめた要件メモ |
| ③実装力× Web解析・成果データ |
公開後に計測し、数字をもとに次の改善を提案する | 何を成果とするかは、発注者との合意で決まる | 計測する項目と改善案を書いた運用メモ |
①実装力×動きの設計(高度なJavaScript)
カンプは静止画です。要素がいつ現れ、どの速さで動き、スクロールの何に連動するかは描かれていません。ここは実装する人が決める領域で、数値を変えては画面で確かめる往復が仕上がりを左右します。AIは「スクロールでフェードインさせる」程度の初稿なら出せます。サイト全体の動きに一貫したリズムを与える判断は、動きの仕組みを理解している人の仕事です。
AIが定型の実装を引き受けるほど、定型の外側にある実装で差がつきやすくなります。当校はSTEP4で、JavaScriptを使った複雑な動きの構築まで扱います。高度なJavaScriptと目を惹くサイトで差がつくという当校の考えは、生成AIが普及した2026年10月時点でも同じです。動きを足したら、前章の表示速度の目安を崩していないかまで確かめてください。
②実装力×上流工程の言語化
発注者の最初の要望は、「いい感じのサイトにしたい」のように曖昧なことが多いものです。これを「誰に何をしてもらうサイトか」「何ページ必要か」「今回やらないことは何か」に書き起こす作業が要件整理です。実装の経験がある人が書くと、「その機能は既存のフォームで足りる」「その動きは表示速度に響く」といった判断が同じ文書に入ります。
この力は、AIへの指示にもそのまま使えます。AIに渡す指示文は、要件を言葉にしたものだからです。曖昧な指示からは曖昧なコードが返ります。当校のチャットサポートは質問を無制限に受けていて、質問を文章にする過程で言語化の力も育つと考えています(サポート体制)。
③実装力×Web解析・成果データ
公開後の数字を読めるコーダーは、納品の次の仕事を自分から提案できます。GA4(Googleのアクセス解析ツール)やヒートマップ(読まれた場所を色で示すツール)で公開後の動きを計測します。そのうえで、たとえば「料金表まで読まれているのに問い合わせが少ないので、フォームの入力項目を減らしましょう」と提案する形です。
改善提案は、提案した本人がすぐ実装できると通りやすくなります。数字を見て、直して、また数字を見る。この1周を1人で回せるからです。クライアントの売上や成果に効いたという実感は、この1周の中で得られます。
3つの掛け合わせを1本の作品に落とす手順は、卒業制作を作り替える5ステップに書いています。
学習中の人と現役コーダーが、今やること
やることは立場で変わります。共通するのは、AIを避けないことと、手で書く量を減らさないことです。
これからコーダーを目指す人
学ぶ量は、AIがあっても減らないと当校は考えています。当サイトの独学ロードマップは、5ステップの合計を250〜350時間と見積もっています(期間の目安)。AIに書かせて省いた分は、読めないコードとして後から返ってきます。学習の時間をデザインとコーディングにどう割るかで迷っている方は、両方を短期間で学ぶと起きやすいことを先に確認してください。
学習段階でのAIの使い方は、HTML/CSSとJavaScriptの各ロードマップに書いた「書くのは自分、聞くのはAI」が基本です。土台ができたら、掛け合わせの①に進むことを勧めます。動きの実装は作品を開いた瞬間に伝わるので、最初の仕事の入口になりやすいからです。仕事を始める段階でJavaScriptをどこまで学べば足りるかは、卒業判定チェックで確認できます。
すでにコーダーとして働いている人
- 自分の工程にAIを入れ、初稿にかかる時間を測る: 体感ではなく実測で比べる。METRの実験では、速くなった感覚と実測がずれていた
- 見積もりの内訳を分ける: 「コーディング一式」を、実装・検収・修正対応・公開後の確認に分けて書く。AIで縮むのは主に定型の実装にかかる時間で、検収や修正対応の行は発注者に見える形で残る
- 発注者と直接話す機会を1件作る: 制作会社経由の案件でも、打ち合わせへの同席を申し出る。要件整理の経験は、その場にいないと積めない
コーディングだけを請けてきた人には、②の上流工程から掛けることを勧めます。発注者と話せるコーダーになると、任される範囲が広がりやすいからです。フロントエンドエンジニアへ進む道もあります。必要なスキルの違いはコーダーとフロントエンドエンジニアの違いの記事で比べています。
よくある質問
- コーダーの仕事はAIでなくなりますか？
- 職種がなくなるという根拠は、2026年10月時点で確認できていません。影響が大きいと当校が見ているのは、デザインカンプを静的なHTML/CSSに置き換える作業と、定型パーツの実装です。要件整理、検収、修正対応、公開後の改善は、2026年10月時点では人が担っています。
- 今からHTML/CSSやJavaScriptを学ぶ意味はありますか？
- あります。AIの出力は確認してから納品する必要があり、確認にはコードを読む力が要るからです。Stack Overflowの2025年の開発者調査でも、AIへの不満の1位は「ほぼ合っているが、完全ではない」(66%)でした。学ぶ量は減りませんが、AIを解説役に使えば、エラーで止まる時間は短くできます。
- AIでホームページを作れるなら、発注者は自分で作りませんか？
- 自作する発注者はいます。ただ、帝国データバンクが企業全般を対象に行った2026年3月の調査では、生成AIを業務で活用する企業は34.5%、小規模企業では28.0%でした。懸念の1位は「情報の正確性」(50.4%)です。形は作れても、正しく動くか、自社の商売に合っているかは別に確かめる必要があります。
- コーダーとフロントエンドエンジニア、AI時代に目指すならどちらですか？
- 作りたいものがWebサイトならコーダー、Webアプリならフロントエンドエンジニアが向いています。AIの影響はどちらの仕事にも及んでいるので、職種名より「実装力に何を掛けるか」で考えてください。仕事内容と必要スキルの違いはコーダーとフロントエンドエンジニアの違いの記事にまとめています。
まとめ｜AIの影響が先に及ぶのは「変換だけ」の作業
コーダーの将来性について、2026年10月時点で言えることは4つです。
- AIの影響を先に受けるのは職種全体ではなく、カンプから静的ページへの変換と定型パーツ(当校の見立て)
- AIの初稿は確認してから納品する。要件整理・検収・修正対応・公開後の改善は、2026年10月時点で人の仕事として残っている
- 土台は手で書けるHTML/CSS/JavaScript。そこに動きの設計、上流工程の言語化、Web解析のいずれかを掛ける
- 「あと何年でなくなる」という予測に、根拠のある数字は確認できていない。体感談ではなく、自分の工程を実測して判断する
無料カウンセリングでは、現在の学習状況や仕事の内容を聞いたうえで、いまのスキルに何を掛けるか、最初の成果物を何にするかを相談できます。