Web制作はAIでどこまでできるようになったのか
「作れる」と「任せられる」は、まだ同じではない
結論からいうと、Web制作はAIでかなりのところまでできるようになったと思います。
企画を考える。
ページ構成をつくる。
ワイヤーフレームをつくる。
デザインする。
コードを書く。
エラーを探す。
少し前まで、それぞれ専門的な知識やスキルが必要だった作業にも、いまはAIがかなり入ってきています。
実際、AIを使いながら進めれば、Webサイトを「形にする」ところまで一人で進められる範囲は大きく広がりました。
ただ、実際に使っていると、もうひとつ感じることがあります。
「AIで作れる」と「AIに任せていい」は、まだ同じではない。
そして、もうひとつ。
「AIを使う＝ChatGPTですべてやる」でもありません。
今回はWeb制作を、
企画 → ワイヤーフレーム → デザイン → コーディング → デバッグ
の5工程に分けながら、AIに任せやすいところと、人が判断したほうがよいところを整理してみます。
1．Web制作では、工程によって使うAIが違う
「AIでWebサイトをつくる」とひとことで言っても、実際にはいくつか種類があります。
たとえば、こんなイメージです。
企画・情報整理
→ 対話・推論型AI
例：ChatGPT、Claude、Gemini
ワイヤーフレーム
→ 対話型AI＋UI生成ツール
例：ChatGPT、Claude、Figma Make、v0
デザイン
→ UI生成・画像生成・デザインAI
例：Figma Make、画像生成AIなど
コーディング
→ コーディングエージェント
例：Codex、Claude Code
デバッグ
→ コーディングAI＋テスト支援
例：Codex、Claude Codeなど
厳密には「AIモデル」と「AIツール」は別物ですが、ここでは分かりやすくまとめてAIと呼びます。
大事なのは、
ひとつのAIに全部やらせるのではなく、仕事に合わせて使い分けること。
Web制作でも、この感覚がかなり重要になってきました。
2．まず整理すると、「作業」はAI、「判断」は人に残る
Web制作の各工程をざっくり整理すると、こんなイメージです。
企画
AIに任せやすさ：★★★☆☆
人が見る重要度：★★★★★ワイヤーフレーム
AIに任せやすさ：★★★★☆
人が見る重要度：★★★★☆デザイン
AIに任せやすさ：★★★★☆
人が見る重要度：★★★★★コーディング
AIに任せやすさ：★★★★★
人が見る重要度：★★★★☆デバッグ
AIに任せやすさ：★★★★☆
人が見る重要度：★★★★★
ざっくり言うと、AIが得意なのは、
「案を出す」「形にする」「作業を速くする」こと。
一方で、人に残るのは、
「何をつくるのか」「なぜそうするのか」「これでよいのか」を判断すること。
この違いは、工程ごとに見ていくと、より分かりやすくなります。
3．企画｜AIは答えを出せる。でも「問い」が間違っていたら意味がない
企画段階では、AIはかなり便利です。
たとえば、
ターゲット候補を整理する
競合を見る観点を洗い出す
必要なコンテンツを考える
ページ構成案を出す
キャッチコピーを複数考える
こうした作業は、一人でゼロから考えるよりかなり速く進みます。
特に僕が便利だと思うのは、正解を出してもらうというより、壁打ち相手として使うこと。
「このターゲット設定で抜けている視点は？」
「逆の立場から反論すると？」
「このサイトを見たユーザーが不安に思いそうなことは？」
と問いを重ねることで、自分の考えを整理できます。
ただし、
「30代向けの採用サイトをつくりたい」
と入力すれば、AIはそれらしい企画を考えてくれます。
でも、その前には、
本当に30代がターゲットなのか。
採用できない原因はWebサイトなのか。
そもそもサイトで何を解決したいのか。
という問いがあります。
AIが企画を助けてくれるようになったからこそ、最初の問いを設定する力はむしろ重要になった気がします。
4．ワイヤーフレーム｜AIに渡す「設計図」としての価値も大きくなった
ワイヤーフレームとは、簡単にいうとWebページの設計図です。
「どこに、何を、どんな順番で置くか」を決めます。
この工程はAIとの相性がかなりいい。
ページ構成
見出し
コンテンツのグループ分け
CTAの位置
情報の並び順
といった初稿は、かなり速くつくれます。
ただ、AI時代になってワイヤーフレームの意味がなくなったかというと、僕はむしろ逆だと思っています。
次工程のAIに、「こういうサイトをつくりたい」と伝えるための設計情報として価値が上がった。
ユーザーは最初に何を知りたいのか。
どの情報を見て次へ進むのか。
どこで不安を解消するのか。
最終的に何をしてほしいのか。
ここが整理されているほど、その後のデザイン生成もしやすくなります。
5．デザイン｜AIで速くなった。でも「一発で決まる」とは限らない
個人的に、AI活用の面白さと難しさを一番感じるのがデザインです。
AIを使えば、
デザイン方向のアイデア出し
レイアウト案
配色案
写真やイラスト
UIの初稿
別パターンの展開
などは、本当に速くなりました。
一方で僕自身は、
「プロンプトを入れたら、そのまま使えるデザインが一発で出てくる」
という経験は、そこまで多くありません。
これは最初、自分のAIの使い方が悪いのかなとも思いました。
でも現在のデザインAIを見ると、少し違うようです。
Figma Makeでも、デザインシステム、ガイドライン、既存のFigmaフレーム、ブランド資料などをAIに渡すことで、より一貫したアウトプットをつくる仕組みが用意されています。
つまり重要なのは、単に、
「かっこいいWebサイトをつくって」
と頼むことではありません。
その前に、
情報設計
ワイヤーフレーム
ムードボード
配色
フォント
ブランドのトーン
参考にするデザイン
やってはいけない表現
などを整理する。
AIの世界では、こうした前提情報をコンテキストと呼びます。
簡単にいえば、AIが判断するために渡しておく材料です。
AIの性能が上がるほど、プロンプトの言葉選びだけではなく、どんなコンテキストを渡しているかが重要になっているように感じます。
6．デザインでは「完成品をつくらせる」以外の使い方もかなり便利
もうひとつ、僕がAIを便利だと思っているのが、デザインの方向性を決める前の壁打ちです。
たとえば、
「信頼感を強くする方向」
「親しみを強くする方向」
「専門性を強くする方向」
の3案を出して比較する。
同じワイヤーフレームから異なるトーンをつくってみる。
ムードボードを見せて、
「このデザインが与える印象を言語化して」
と聞いてみる。
完成デザインをいきなりつくらせるだけでなく、人間同士でデザインをすり合わせるための材料をつくる用途です。
Figma自身も、AIで複数案を生成し、そこから再度プロンプトや手作業で調整していく反復型の使い方を案内しています。
ここは、AIデザインのかなり実務的な使い方ではないかと思っています。
7．コーディング｜「コードを書かせる」から「作業を任せる」へ
AIの進化を特に感じるのがコーディングです。
少し前までは、
「このHTMLを書いて」
「このCSSを直して」
とコードの一部を生成してもらう使い方が中心でした。
現在はそこから進んで、
プロジェクト全体を読み、複数ファイルを編集し、動作を確認しながら作業を進める
コーディングエージェントが使われるようになっています。
CodexやClaude Codeなどがその例です。
つまり、
AIにコードを書いてもらう
から、
AIに開発作業の一部を任せる
へ変わってきています。
これはかなり大きな違いです。
ただし、それでも、
保守しやすい構造か
セキュリティに問題はないか
表示速度は問題ないか
CMSと正しく連携するか
将来の変更に耐えられるか
といった判断は残ります。
動くコードと、運用できるコードは別。
ここはまだ意識しておきたいところです。
8．デバッグ｜AIが見つけ、人が最後に使ってみる
デバッグでもAIはかなり使えます。
エラー原因の調査。
コードレビュー。
修正案。
チェック項目の作成。
コーディングエージェントは、コードを読むだけでなく、実行や修正まで含めて進められるようになっています。
ただ、最終確認は人が実際に触る意味がまだ大きいと思っています。
スマートフォンで読みやすいか。
ボタンを押して迷わないか。
問い合わせフォームは送れるか。
想定していない操作をしても問題ないか。
コード上は正しくても、
「なんとなく使いにくい」
ことはあります。
Webサイトを見るのは人なので、最後は人として触ってみる。
ここは残しておきたい工程です。
9．AI時代は「プロンプトが上手い人」より、「仕事を分けられる人」なのかもしれない
AI活用というと、
「どんなプロンプトを書けばいいか」
に注目しがちです。
もちろん指示の出し方は重要です。
でもWeb制作をしていると、それだけではないように感じます。
どの工程をAIに任せるのか。
どのAIを使うのか。
何を事前情報として渡すのか。
どこで人が確認するのか。
つまり、
AIにうまく質問する力以上に、仕事そのものを分解する力が大事になる。
従来は、
人が考える
↓
人がつくる
↓
人が確認する
だったものが、
人が設計する
↓
AIと一緒につくる
↓
人が判断する
に変わってきています。
人の仕事がなくなるというより、
手を動かす時間が減り、設計と判断の重要性が上がっている。
そんな変化なのかもしれません。
まとめ｜AIで「作れる」からこそ、何を人が持つか
AIによって、Web制作のハードルはかなり下がりました。
そして、これからさらに「作れる範囲」は広がっていくと思います。
だからこそ大切になるのは、
AIができるか、できないか。
だけではなく、
何をAIに任せ、何を人が持っておくのか。
企画では「問い」を人が持つ。
ワイヤーでは「情報の順番」を考える。
デザインでは「方向性」を定める。
実装では「運用できるか」を確認する。
最後は人として実際に触ってみる。
AIを使う目的は、人の仕事を全部なくすことではなく、
人が考えるべきところに、もっと時間を使えるようにすること。
今のところ、僕はそのくらいの距離感が、AIとWeb制作のちょうどいい関係だと思っています。
あなたがWebサイトをつくるとしたら、
どこまでAIに任せて、どこから自分で判断しますか？
AIに「何を任せて、何を人が判断するのか」。
Web制作に限らず、仕事全体でのAIとの付き合い方についてはこちらの記事でも考えています。
▼AIを使う人と使わない人ではなく、「どう使うか」の差になる
AIは、完成品をつくらせるだけでなく、「人が考えやすい状態をつくる」ためにも使えます。
競合SNSの分析を例に、AIを整理・比較に使う方法はこちらで紹介しています。
▼競合SNSをAIで並べると、「空白」が見えてくる
