一般社団法人 全国個人事業主支援協会

COLUMN コラム

  • Web制作がコーディングだけではなくなっている話

Web制作におけるAI活用の現状

コーディングだけでなく、デザイン領域まで進化している

Web制作分野におけるAI活用は、当初はコーディング支援が中心でした。
現在も、コード生成や修正、リファクタリングといった領域では、AIはすでに実務で広く使われています。

一方で、デザイン領域については、
「見た目は整っているが、実制作に使うには精度が足りない」
「構造が整理されておらず、CMSへの組み込みが難しい」
といった課題が指摘されてきました。

しかし、Web制作系AIサービスは日々大きく変化しています。
個人的には、WP指定で制作の依頼を受けた際、なかなかWPに直結するAI Web制作ツールが見つからずに困っていたのですが、最近はWPサイトでも作業の90%をAIで行うことができています。


デザイン生成とファイル構造の変化

最近のWeb制作向けAIでは、以下の点が明確に改善されています。

  • レイアウト、余白、配色などの視覚設計の精度向上

  • コンポーネント単位でのHTML/CSS生成

  • 再利用を前提としたファイル分割

  • クラス設計や階層構造の整理

これにより、**単なるデザイン案ではなく、「実装を前提とした成果物」**が生成されるケースが増えています。

特にWordPress制作においては、

  • テーマ構造(header / footer / main / components)を理解したうえで

  • AIが生成したHTML・CSSを部分的に移植する

といった運用が現実的になっています。
WordPressの基礎構造を把握していれば、AIで制作したファイルをそのまま移植するだけでWPサイトも制作することができます。


制作要件整理は引き続き人の作業領域、かもしれない

技術的に可能な範囲が広がっている一方で、
AIが自動的に最適解を判断するわけではありません。

現時点でも、以下の情報は人が整理して与える必要があります。

  • ターゲット(BtoB / BtoC、業種、利用シーン)

  • ページの目的(集客、問い合わせ、購入など)

  • 必要なページ構成や要素

  • トーンやUIの方向性

これらが曖昧な場合、アウトプットの精度は大きく下がります。
つまり、要件定義は依然として人が担う工程であり、
実装・試作部分をAIが補完する形に近づいていると言えます。
しかしながら、これらの部分も自動で最適化するAIが出てこないとは言い切れないのが現状です。


Web制作で利用されている主なAIサービス

ChatGPT

HTML/CSS/JavaScriptの生成だけでなく、
ページ構成案、要件整理、UIテキスト作成など、設計フェーズにも利用されています。

GitHub Copilot

既存コードを文脈として理解しながら補完・修正を行うため、
保守や改修フェーズとの相性が良いツールです。

Framer

AIによるデザイン生成とレイアウト提案が強化されており、
構造化されたデザインをそのまま公開レベルまで引き上げられます。

Webflow

ビジュアル編集とコード構造が連動しており、
AI生成デザインを実装ベースで扱いやすい点が特徴です。

Genspark AI

要件入力からページ生成までを一気通貫で行うタイプのAIサービスです。
構成・デザイン・コードをまとめて生成するため、
プロトタイプ作成や初期構成検討のリソースとして利用しやすい点が特徴です。


まとめ:Web制作におけるAIの位置づけ

現時点で整理すると、Web制作におけるAI活用は以下の状態にあります。

  • コーディング支援:すでに実務レベルで定着

  • デザイン生成:実装前提で使える水準に到達しつつある

  • ファイル構造:CMSへの転用を前提とした生成が可能になってきている

一方で、

  • 要件定義

  • 構成判断

  • CMSへの最終実装

といった工程は、引き続き人の判断が必要です。

Web制作は「AIにすべて任せる」段階ではありませんが、
作業リソースの一部としてAIを組み込むことが前提になる段階には入っています。

この記事をシェアする

  • Twitterでシェア
  • Facebookでシェア
  • LINEでシェア