― 10秒の自動変換と、15分の手作業。残ったものが違いました

生成AIにHTMLを作らせることは、もう難しくありません。難しいのはその次で、 「これをどうやって公開できるWordPressサイトにするか」で止まる方が増えています。

方法は大きく2つあります。公開URLを入れれば自動でWordPressテーマに変換してくれるサービスを使うか、 人が組み直すか。どちらが良いのかを、同じHTML 1枚を両方に通して確かめました。その記録です。

先にお伝えしておくと、自動変換サービスは思っていたより優秀でした。 この記事は他社サービスを貶すためのものではありません。10秒で終わる工程と、10秒では終わらない工程が はっきり分かれたという話です。

0. 題材について

比較するには、同じ入力を両方に通す必要があります。実際のお客様のサイトを使うわけにはいかないので、 架空の会社を1社つくりました。

株式会社セイエイ機工（架空） 埼玉県川口市の産業機械商社。工作機械・産業用ロボット・搬送装置の販売、据付、保守。 創業1978年、従業員28名。

実在の企業ではありません。電話番号も住所も実在しないものです。 この会社の紹介ページを生成AIに作らせ、出てきたHTML 1枚を題材にしました。
AIに渡した指示は、こういうものです。全文をそのまま載せます。

産業機械の商社です。会社を紹介するページを1枚作ってください。

- 会社名：株式会社セイエイ機工
- 事業内容：工作機械・産業用ロボット・搬送装置の販売、据付、保守
- 創業：1978年／従業員28名
- 所在地：埼玉県川口市領家1-2-3
- おもなお客様：自動車部品、金属加工、食品機械のメーカー（従業員20〜200名くらいの工場）
- うちの強み：
  - 特定メーカーの系列ではないので、用途に合う機械をメーカー横断で選べる
  - 販売して終わりではなく、据付も保守も自社の技術者が行う
  - 入れ替えのときは中古機の下取りもする
- 載せたいもの：取扱製品、対応できる業種、導入までの流れ、会社概要、問い合わせ
- 問い合わせは電話とメールフォームの両方
- 見た目は落ち着いた、信頼感のあるものにしてください

「Webページ」とも「チラシ」とも書いていません。これは意図的です。

以前、別の案件で「A4のチラシを作って」と生成AIに頼んで出てきたHTMLが、そのままWebページとして 使われようとしていたことがありました。開いてみると、印刷用の紙のサイズ指定が入っていて、 画面幅に応じてレイアウトを変える指定は1つもない。スマートフォンで見ると崩れる状態でした。 AIは指示どおりチラシを作っただけで、間違えたのは指示のほうです。

媒体の取り違えは、発注する側で起きます。だから今回は指定しないまま投げて、何が出てくるかを見ました。

出てきたもの

結論から言うと、今回はWebページが出てきました。

• メディアクエリ2本（900px / 640px）。375pxの画面で横スクロールなし
• 印刷用の指定はゼロ（@page なし、pt・mm の単位も0件）
• レイアウトは CSS Grid と Flexbox。<table> は会社概要の1つだけ
• <main> <header> <footer> <section> を使った構造。<h1> は1本
• 日本語フォントの指定あり
• 問い合わせフォームには本物の <input> があり、<label for=""> も正しく対応していた

先ほど触れたチラシのHTMLは、印刷用CSSとテーブルレイアウトで、しかもフォームの入力欄が <div> で作られた「絵」でした（クリックしても文字が打てない）。 同じ「生成AIの出力」でも、出てくるものはかなり違います。「AIの出力はこうだ」と一般化はできません。

足りないものもありました。OGP・構造化データ・canonical・favicon はいずれもゼロ。 そしてフォームは、こう書かれていました。

// デモページのため、実際の送信は行いません。
e.preventDefault();
msg.textContent = 'デモページのため、実際には送信されません。（本番環境では送信処理を接続してください）';

入力欄は本物。でも送信されない。しかも今回は「送りません」と自分で書いている分だけ、 黙って動かないフォームよりは誠実です。ただし、この文言が最後まで残ることになります（後述）。

1. 自動変換サービスに通してみる

公開URLを入れてボタンを押すだけ、というサービスがあります。ベータ期間中は無料で、 アカウント登録も要りませんでした。

10秒でZIPが出てきました。

front-page.php  functions.php  style.css  theme.json  header.php  footer.php
index.php  page.php  single.php  archive.php  search.php  404.php
assets/css/main.css   acf-json/ ×6   patterns/ ×6   ほか  計29ファイル

壊れた出力ではありません。PHPの構文チェックは全ファイル通過、JSONもすべて妥当。 Gutenbergのブロックパターン、Elementorのテンプレート、カスタムフィールドの自動登録まで入っています。 「テーマの形にする」という工程については、正直に言って速くて確実です。

日本語のフォント指定も維持されていました。ここは崩れると思っていたので、意外でした。

そのうえで、残っていたもの

中身を1ファイルずつ読みました。3つ見つかりました。

① 編集欄を1つ直すと、9箇所が変わる

自動生成された編集欄は19項目。ここまでは想定内です。問題は反映のしかたでした。

ページ全体をいったん組み立てたあと、「元の文字列」を探して置き換える方式になっていました。 たとえば「お問い合わせ」という見出しを別の言葉に変えると、**同じ文字列を持つナビゲーション、 ボタン、フッターまで一斉に書き換わります。**このページでは9箇所ありました。

「取扱製品」は4箇所、「会社概要」は3箇所。管理画面を見ているだけでは、絶対に気づけません。

② <title> が2つ出る

WordPressにタイトルを任せる設定と、直接書かれたタイトルが同居していました。 HTMLとしてタイトルが2つある状態になります。

③ 「デモページのため、実際には送信されません」が、そのまま入っている

先ほどのJSが、文言ごと出力テーマに入っていました。メール送信の仕組みは接続されていません。 このまま公開すると、問い合わせフォームに「デモページのため」と表示される本番サイトができます。

④ 元のHTMLにあった説明文（description）が消えた

これは足りないというより、持っていたものを失ったケースです。

2. 自分で組んでみる

同じHTMLを、今度は自社のテーマをベースに組み直しました。15分3秒でした。

やったことは4つです。

編集できる欄を86項目つくる。見出し、本文、箇条書き、会社概要の表、電話番号、受付時間まで。 そのうえで、86項目すべてが実際にページに反映されることを機械的に確認しました。 入力欄はあるのに表示に使われていない、という状態を作らないためです。これは過去に実際に見たことがあります。

項目名も気をつけました。自動変換の出力では section-4_para_2 のような名前が並んでいて、 どれがページのどこか、名前からは分かりません。こちらは「STEP 3 見出し」のように、 管理画面のラベルだけで場所が特定できるようにしています。

フォームを実際に送れるようにする。設置して終わりにせず、実際に送信し、 管理者宛のメールと自動返信の2通が届くところまで確認しました。

このとき、全角で入力された電話番号が弾かれる問題も一緒に対処しました。

定番のフォームプラグインには、電話番号を半角数字だけで判定する仕組みが入っています。 そのため ０４８－９００－１２３４ のように全角で打つと「不正な番号」と判定されて送信できません。 半角ならハイフンでも空白でもカッコでも通るのに、全角だけが通らない。 日本語入力の環境では全角のまま数字を打つ方は珍しくありませんし、 その方は「送信ボタンを押したのに送れない」状態になり、サイト運営側からはまったく見えません。 問い合わせが届かないので、「今月は反応がないな」と思うだけです。

送信された番号を全角から半角に直してから判定するようにして、実際に全角で送信し、 通ることと、届いたメールの中で 048-900-1234 と半角に直っていることまで確認しました。

元のページと同じ内容が出ることを確かめる。組み直したページと元のHTMLの文字を突き合わせて、 一致率99.6%。違っていたのはタイトルだけで、これはWordPress側が組み立てる分です。

3. 工程で並べる

同じ入力に対して、どの工程が誰の仕事として残るかを並べました。

最初の行は完敗です。10秒対15分に、言い訳のしようがありません。 そして「日本語の文字組み」にも○が付いています。ここは崩れると予想していた行でした。

最後の行にも触れておきます。この自動変換サービスは、変換元が公開URLであることを求めます。 つまり「サーバーを用意して公開する」作業は、変換を始める前にもう終わっていなければなりません。 「公開できずに止まっている」状態の人は、そもそもこのサービスを使えません。

4. SEOの工程について、ひとつ

「構造化データを入れる」を工程として書くとき、入れないという判断も工程に含まれます。

たとえばFAQの構造化データは、以前は検索結果でよく見かけました。 Googleは2023年8月に表示対象を大きく絞り、2026年5月に対象から完全に外しています。 いま入れても、検索結果には何も出ません。

私たちもこの記事を書く途中で確認し直して、実装しかけていた分を取りやめました。 多く書くことではなく、いま何が効いて何が効かないかを知っていることが、この工程の中身です。

5. まとめ

自動変換サービスは、使えます。10秒で29ファイルのテーマが出てきて、壊れていません。 CSSも日本語フォントも維持されます。私たちも道具として使いますし、 この工程が今後さらに速くなることも間違いないと思います。

そのうえで、変換が終わったあとに残るものがあります。

1. 出てきたものを読んで確かめる（編集欄を1つ直すと9箇所変わる、といったことは中を読まないと分からない）
2. フォームが本当に届くか、送って確かめる（設置しただけでは「動いている」とは言えません）
3. 編集できる範囲を、壊れない形に設計する（数の問題ではなく、拾い漏れと副作用の問題です）
4. 公開してからの更新・バックアップ・本体の追従を続ける

もし今、生成AIで作ったHTMLが手元にあるなら、自動変換サービスを試してみるのは良い判断だと思います。 無料で10秒です。そのうえで、出てきたテーマを公開する前に、問い合わせフォームから自分宛に1通送ってみてください。 届かなければ、そこがまだ終わっていない工程です。

生成AIで作ったHTMLの公開・運用でお困りの方は、[こちら] からご相談ください。サーバー・ドメインの取得から公開後の更新まで、まとめてお請けしています。

自己紹介

松田 大と申しますm(_ _)m
インディーズでミュージシャンをやっていたのですがいつのまにか…

とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。

「Excel VBA」からスタートして、Yamaha RTX シリーズで VPN環境構築、Hyper-V環境構築、Windowsアプリ開発などを経験した後、「 WordPress 」に出会い、どっぷりハマっています。

現在勤めているETBS合同会社では、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

宮崎県 都城市 出身。東京都 葛飾区 在住。現在、代表兼二児のパパ。子育てを通じて、こどもたちにもプログラミングの楽しさに触れてほしいと思うようになり、「 こどもICTかつしか教室 」を開講中。最近は童心に帰り、簡単なゲーム制作なんかも楽しんでいます(^_^)。

お問い合わせ