私はWeb制作でもAIを使っていますが、「LPの構成案を作る」「HTMLを書かせる」だけでは制作自動化とは考えていません。
実際のWeb制作は、その後が長いからです。
ヒアリングして、構成を決め、デザインの方向を決め、画像を用意し、HTML/CSSを実装し、スマホで崩れないように直し、WordPressへ反映し、最後に公開状態と導線を確認する。
途中までAIで速くなっても、公開直前で止まるなら、全体としてはあまり楽になりません。
そこで私は、Web制作を「ページを作る作業」ではなく、「ヒアリングから公開確認までをつなぐ工程」として自動化・半自動化するようにしています。
AIでLPやWebページを作るときは、構成やHTML生成だけで区切らず、公開確認までを一つの制作フローにつなげると途中で止まりにくくなります。
AIで構成やHTMLを作れても、Web制作はそこで終わらない
AIを使えば、LPの構成案や文章、HTML/CSSはかなり速く作れます。
ただし、実務ではそれだけでは公開できません。
私の制作フローでは、ヒアリング、構成作成、デザインカンプ案、画像プロンプト、HTML/CSS実装、スマホ表示調整、WordPress用メタ、REST APIでの反映までを一連の作業として扱います。
WordPressを外部ツールから安全に操作するときの基礎仕様は、WordPress REST API Handbookで確認できます。実際の更新では、サイト側の権限・投稿タイプ・テーマ仕様を確認してから使います。
Web制作は、生成した瞬間より、その後に崩さず公開できるかの方が重要です。
最初にヒアリングして、ページの目的と導線を決める
私は最初からデザインを作り始めません。
まず、誰に何を伝え、最終的に何をしてほしいページなのかを確認します。
たとえばLPなら、最低限でも次のような情報を整理します。
- 商品・サービスは何か
- 誰向けなのか
- どんな悩みを解決するのか
- 何が強みなのか
- 最終的なCTAは何か
- 問い合わせ・購入までどう進むのか
ここが曖昧なままだと、AIがきれいなページを作っても、何をしてほしいのか分からないLPになります。
先に目的と導線を決め、その後で構成やデザインを作る。 これが最初の工程です。
構成・デザイン案・画像指示を先にそろえる
目的が決まったら、次にページ全体の構成を作ります。
私は、いきなりHTMLを書かせるより、先に「どの順番で何を見せるか」を固めます。
そのうえで、デザインカンプの方向、必要な画像、図解、CTAの位置などを整理します。
私の制作フローでは、LP構成作成、商品LPの展開、Webページ構成案、必要な画像プロンプト作成までをHTML実装の前工程としてまとめています。
HTMLを書く前に、ページの設計図をAIと人間で共有しておく。 これだけでも後戻りを減らせます。
HTML/CSS実装ではPCだけでなくスマホ表示まで確認する
HTML/CSSが生成できても、PCで一度見て終わりにはしません。
実際のページでは、スマホ表示で崩れることがあります。
たとえば、
- 見出しが不自然な位置で改行される
- ボタンが横にはみ出す
- 画像が画面幅を超える
- 表やカードで横スクロールが出る
- PCでは読みやすいが、スマホでは余白が広すぎる
私の確認項目には、PC/SPでの改行差、横スクロール、ボタンや画像のはみ出しも入れています。
Web制作では「コードが動く」ではなく、「実際の画面サイズで読める」までが実装です。
WordPressへ入れるときはテーマとの干渉も確認する
HTMLファイル単体で正しく表示されても、WordPressへ入れた瞬間にデザインが崩れることがあります。
テーマやプラグイン側のCSSが、見出し、ボタン、余白、表などへ影響するためです。
私のWordPress実装では、投稿用HTMLの作成、REST APIでの反映、テーマCSSとの干渉確認、必要な場合のデザイン保護までを同じ制作フローに入れています。
ここで大事なのは、最初から何でも隔離すればいいわけではないことです。
通常の記事ならサイト側の既存デザインを活かした方が自然な場合もあります。独自LPのようにデザインを強く守る必要がある場合だけ、干渉対策を選びます。
公開後は表示・リンク・導線まで確認する
WordPressへ反映できたら、それで終わりではありません。
私は最後に、実際の公開ページで確認します。
- PCで崩れていないか
- スマホで横スクロールが出ていないか
- CTAボタンが押せるか
- リンク先が正しいか
- フォームや問い合わせ導線が分かるか
- 重要な見出しや文章が読みにくくなっていないか
公開URLで確認するところまでを、制作工程に含めます。
ここを省くと、「デプロイ成功」と「ページが実際に使える」を混同してしまいます。
AIへ任せるのは制作工程、人間は目的と最終判断を持つ
AIでWeb制作を自動化しても、人間が不要になるわけではありません。
AIへ任せやすいのは、構成案、文章案、画像指示、HTML/CSS実装、形式変換、チェック項目の洗い出しといった作業です。
一方で、
- 誰へ売るのか
- 何を約束するのか
- どのデザインを採用するのか
- 本当に公開していいか
- 導線が事業目的に合っているか
は人間側で判断します。
AIに丸投げするのではなく、人間が設計し、AIで制作工程を速く回す。 私はこの分担で使っています。
まとめ：Web制作の自動化は「公開まで止まらない流れ」を作ること
私がWeb・LP制作で自動化しているのは、HTML生成だけではありません。
- ヒアリングする
- ページの目的とCTAを決める
- 構成とデザイン方向を作る
- 画像指示を作る
- HTML/CSSを実装する
- PC・スマホ表示を確認する
- WordPressへ反映する
- 公開ページの表示・リンク・導線を確認する
私がこの工程を一つにつないでいる理由は、Web制作がデザインだけでは終わらず、実装・表示調整・WordPress反映・導線確認まで完了して初めて使えるページになるからです。
AIでWeb制作を速くするなら、一部分を速くするより、最初から最後まで止まらない工程を作る。
私はこの形で、LPやWebページ制作を自動化・半自動化しています。
記事制作を音声メモからHTML・他媒体展開までつなぐ流れは、AIで記事制作を自動化する方法｜音声メモから構成・HTML・他媒体展開までつなぐで説明しています。
また、一つの記事を媒体別に作り直す方法は、同じ記事をX・note・Amebloへそのまま貼らない｜AIで媒体ごとに作り直す方法で紹介しています。
コメント