― 生成AIが出力したHTML 1枚を、実際にWordPressサイトにするまで

社内の別事業（店舗向けの防犯カメラ設置サービス）のランディングページを作ることになりました。出発点は、担当が生成AIに作らせたHTMLファイル1枚です。ブラウザで開くと、見出しがあり、カメラのイラストがあり、料金表があり、問い合わせフォームまで並んでいる。見た目は完成しています。

このHTMLを、実際に公開できるWordPressサイトにしました。その過程で何が必要だったかを、省略せずに書きます。生成AIでWebページを作った方が、次に何をすればいいのかの見取り図になれば幸いです。なお先にお伝えしておくと、私たちも同じツールを使います。この記事は「生成AIではダメだ」という話ではありません。生成AIが作るものと、公開できるサイトの間に何があるかの話です。（事例なのでいつもの技術記事より細かく説明しています。）

1. 開けてみて分かったこと

① Webページではなく、印刷物として作られていた

CSSの冒頭にこう書かれていました。

@page {
    size: A4 portrait;
    margin: 5mm 7mm;
}
body {
    font-size: 8pt;
}

`@page` は印刷時のページ設定です。`8pt`、`5mm` という単位も紙のためのもの。そして横並びのレイアウトは、すべて `<table>` で組まれていました。

決定的だったのは、メディアクエリが1つもなかったことです。画面幅に応じてレイアウトを変える指定がゼロ。つまりスマートフォンで見ると崩れます。

これは自然な結果です。「A4のチラシを作って」と頼めば、AIはA4のチラシを作ります。紙とWebでは要求が違うことを、出力されたHTMLは知りません。

② 問い合わせフォームが、フォームの絵だった

HTMLを検索して分かったのですが、このファイルには `<input>` タグが1つもありませんでした。

<td class="form-label">メールアドレス <span class="required">必須</span></td>
<td><div class="form-input-box">例：example@etbs.jp</div></td>

入力欄に見えているのは `<div>` です。中に例文が書いてあるだけで、クリックしても文字は打てません。送信ボタンも `<div class=”form-submit-btn”>` で、押しても何も起きません。見た目のうえでは、これは完璧なフォームです。動作だけがありません。

③ 書かれている内容が正しいかどうかは、保証されない

これが一番重要です。

生成AIは、渡された情報をもとに文章とレイアウトを組み立てます。しかし、その情報が最新なのか、互いに矛盾していないか、そもそも事実なのかは確かめません。

たとえば、検討の途中で変わった条件が指示に反映されていなければ、古い条件のまま、きれいに仕上がります。1つの資料の中で前半と後半の説明が食い違っていても、両方をそのまま美しく配置します。根拠のない数字を渡せば、根拠のない数字が整った表になって出てきます。

今回のHTMLにも、そのまま公開する前に確認が必要な記述が含まれていました。サービスの仕組みに関わる部分と、料金の条件に関わる部分です。いずれも、気づかずに公開していればお客様との認識のずれになっていた種類のものです。

そして厄介なのは、整っているほど、内容の誤りは見つけにくくなることです。

手書きのメモに書かれた矛盾には気づけても、きれいに組まれた料金表の中の矛盾には気づきにくい。レイアウトが完成していると、内容まで完成しているように見えてしまいます。

④ ①〜③は、AIの失敗ではない

念のため書いておくと、これらは「AIが間違えた」という話ではありません。紙のレイアウトを頼まれれば紙のレイアウトを作りますし、フォームの見た目を頼まれれば見た目を作ります。渡された条件が古ければ、古い条件のまま美しく仕上げます。指示どおりです。問題は、「見た目ができている」と「公開できる」の間に、指示されなかった作業が残っていることです。

2. 実際にやったこと

引き継いだもの／捨てたもの

CSSはスマートフォンの幅から書き起こし、768px以上でグリッドに展開する形にしました。結果として、ステップの導線はスマホでは縦積み、PCでは横並びになります。

「自分で更新できる」ようにする

WordPress化の目的は、公開後に自分で直せることです。そのために、書き換える可能性のある文言を86項目の入力欄に切り出しました。見出し、キャッチコピー、料金、FAQ、施工事例の写真とキャプション、電話番号、LINEのURL。管理画面から編集でき、HTMLを触る必要はありません。ここで意識したのは、編集できる範囲を絞ることです。

サイト全体をどこでも編集できる作りにすると、更新のたびに壊れる危険が生まれます。「この欄だけ変えられる」形にしておくほうが、結果的に安全に運用できます。そして納品時には、どの入力欄がページのどこに出るのかをご説明します。入力欄が86個並んでいても、どれを触ればどこが変わるのか分からなければ、結局こちらに依頼することになってしまうからです。

気づいた食い違いは、お伝えします

もうひとつ、私たちがしていることがあります。制作中に、記述の食い違いに気づいたらお伝えすることです。先ほど触れたとおり、今回のHTMLにも確認が必要な記述が残っていました。こうした点は、HTMLの中を見ても答えが出ません。事業を運営されている方に聞いて初めて決まります。そして聞かなければ、書かれているとおりに作られ、書かれているとおりに公開されます。確認をお願いした結果、掲載内容を4箇所修正することになりました。どれも公開してから「話が違う」となる種類の項目です。

判断するのは事業を運営されている方であって、私たちではありません。ただ、気づいたまま黙って作ることはしません。

言われたとおりのものをそのまま形にするだけであれば、いまは生成AIがしてくれます。

3. 「動く」の確認は、思っているより広い

フォームを設置して、実際に送信してみました。そこで別の問題が出ました。問い合わせフォームには Contact Form 7 という定番のプラグインを使っています。その電話番号の検証機能が、全角で入力された番号を「不正」と判定するのです。

実際に試した結果です。

半角ならどの書き方でも通るのに、全角だけが通りません。プラグインの中身を読むと、判定が `[0-9]` という半角数字の指定になっていました。日本語入力の環境では、全角のまま数字を打つ方は珍しくありません。その方は「送信ボタンを押したのに送れない」状態になります。そして最も困るのは、この事象がサイト運営側からはまったく見えないことです。送信されていないのですから、問い合わせは届きません。ただ「問い合わせが来ないな」と思うだけです。対処として、送信された電話番号を全角から半角に自動変換してから検証するようにしました。（プラグイン本体は書き換えず、公式に用意されている拡張点を使っています。本体を直接編集すると、次の更新で消えるためです）

フォームは、設置しただけでは「動いている」とは言えません。実際に送信して、メールが届くところまで確認して初めて動いていると言えます。

4. どのくらいかかったか

HTMLをWordPressの形にする作業そのものは、約30分でした。テーマの作成、フォームの設置、動作の確認までを含めた時間です。このほかに、掲載内容を確定させるやりとりの時間がかかっています。ただしこれは通常のご依頼では、お客様の側で先に決まっているものです。今回は社内の事業で、内容を詰めながら作ったため、ここに時間が乗りました。つまり、原稿と素材が揃っていれば、WordPress化そのものは長くかかりません。

道具の進歩で、この部分は今後さらに速くなっていくと思います。時間がかかるとすれば、それは制作ではなく「何を載せるか」を決めるところです。そしてそこは、私たちが代わりに決められる場所ではありません。

5. まとめ

生成AIが出力したHTMLから、実際に公開できるサイトにするまでに必要だったのは、次の4つでした。

1. 画面幅への対応（印刷用に作られていたレイアウトを、Web用に組み直す）
2. フォームを実際に動くものにする（見た目だけの入力欄を、送信できるものに）
3. 公開後に自分で更新できる作りにする（86項目の編集欄と、その説明）
4. 記述の食い違いを見つけたら伝える（今回は4箇所を修正いただきました）

1と2は、手順が決まっているので短時間で終わります。3は設計の話です。そして4は、決めるのはお客様で、私たちの役割は気づいたことをお伝えするところまでです。もし今、生成AIで作ったHTMLが手元にあって「これをどうやって公開すればいいのか」で止まっているなら、まず1と2を確認してみてください。画面幅の対応と、フォームが本当に送信できるかどうかです。この2つは、開いてすぐ確かめられます。見た目が整っているほど、内容の誤りは見つけにくくなります。公開してから気づくと、直すコストはずっと大きくなります。

この記事で扱ったLPは [サロン向け防犯カメラ設置サービス] として公開しています。

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

自己紹介

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

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

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

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

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

お問い合わせ