第１ AIでホームページを作るときの出発点
AIを使うホームページ制作は，目的と掲載情報を決め，確認用のページを作り，公開する仕組みに組み込み，表示と機能を確かめる，という順で進めると整理しやすい。
画面が完成したことと，問い合わせが担当者へ届くことは，別々に確認する必要がある。
本記事では，既存のWordPressサイトに，サービスの紹介と問い合わせ先を載せる１ページを追加する場面を例に，ChatGPTでの相談からCodex・Claude Code等での制作，WordPressへの組込み及び公開前の確認までを説明する。
特定のモデル，料金プラン又はテーマの優劣を比較するものではなく，実際の操作画面や使用できる機能は，利用環境ごとの確認を要する。
AIに記事の公開や管理画面の操作を任せるかどうかは，原稿や確認用ファイルの作成とは別に決める。
複数のAIで本番更新を行う場合の単一書込者，編集ロック及び保存後の検証については，複数のAIエージェントでWordPressを安全に更新する方法を参照されたい。
第２ 最初に公開先と編集方法を決める
１ 既存WordPressに追加する場合
継続して自分で文章や料金表を書き換えるページであれば，まず，既存のテーマと標準ブロックで作れる構成を検討する。
独自のHTMLやCSSを増やすほど，テーマとの組合せや後日の修正方法も引継ぎの対象になるからである。
依頼時には，既存の投稿・固定ページのどちらに追加するか，本文欄だけを編集するか，共通ヘッダーやメニューにも手を加えるかを具体化する。
公開中の既存ページを置き換える場合は，そのURLを維持するかどうかも先に決めておく。
２ 独立したサイトを作る場合
WordPressを使わず，生成したファイルをホスティングサービスで公開する方法もある。
この場合は，公開先，独自ドメイン，問い合わせ処理，更新方法及び継続費用を，画面デザインと併せて選ぶ。
ChatGPT Sitesにも作成，編集及び公開の機能があるが，同サービス内の操作と，既存WordPressへの記事の保存は区別する必要がある。
普通のチャットでHTMLを回答させただけで，既存サイトの公開作業まで完了したと扱うことはできない。
サービス固有の手順は，OpenAIのChatGPT Sitesの公式説明を確認されたい。
第３ AIへ渡す制作指示を作る
１ デザインより先に載せる情報を確定する
最初の指示には，想定読者，ページの目的，掲載してよい事実，必要な見出し及び完成条件を記載する。
法律事務所のページなら，所在地，取扱業務，費用，相談方法及び受付時間は，公開してよい確定情報を渡す。
実績，資格，料金や対応可能な業務をAIに補わせず，不明な事項は確認用の空欄として残す。
例えば，次のような指示を出し，最初は公開せずに確認用の１ページを作らせることが考えられる。
① 既存WordPressに追加するサービス紹介ページの構成案を作成する。
読者は初めて相談先を探す人とし，サービスの対象，費用の考え方，相談までの流れ，よくある質問及び問い合わせ先を順に配置する。
② 未提供の料金，資格，実績及び営業時間は創作しない。
仮の文章と確定情報を区別し，参考サイトの文章や画像をそのまま使わない。
③ 最初に構成案を提示し，次に確認用ファイルを作成する。
生成したファイルの一覧，開き方，文章を修正する場所及び未実装の機能を説明する。
④ 本番の管理画面へのログイン，公開中のページの変更及び問い合わせメールの送信は，今回の制作指示に含めない。
それらが必要な場合は，対象と操作内容を示して別途確認する。
これは制作指示の一例であり，使用するAIの機能や権限を設定する操作そのものを代替するものではない。
２ 作業フォルダーとアクセス権限を区別する
CodexやClaude Codeでファイルを扱う場合は，制作対象を専用フォルダーへまとめ，関係のない資料を置かない運用が考えられる。
ただし，専用フォルダーを選んだという事情だけで，その外側のファイルを技術的に一切読めないと断定することはできない。
Codexではサンドボックスと承認設定，Claude Codeでは権限設定や追加ディレクトリーなど，実際の実行環境の設定を確認する。
Claude CodeのCLAUDE.mdは作業上の指示を記載する仕組みであり，その文章を書いただけで強制的なアクセス制御が成立するものではない。
根拠となる公式説明は，Codexの承認とセキュリティ，Claude Codeの権限及びClaude CodeのメモリとCLAUDE.mdである。
第４ 確認用ページを作って修正する
まず１ページを対象にし，見出しの順序，本文の量，問い合わせへの導線及びスマートフォンでの読みやすさを確かめる。
一度にサイト全体を作り直す指示に広げると，変更箇所と確認対象が増えるため，最初の完成条件を明確にしておくことが有用である。
HTMLは文章や見出し等の構造，CSSは見た目，JavaScriptは操作に応じた処理を担当する。
例えば，質問を開閉する見た目を確認できても，問い合わせの送信処理まで実装されたとは限らない。
修正指示は，「きれいにする」だけでなく，「料金の説明を問い合わせボタンより前に置く」「スマートフォンで見出しが不自然に分かれないようにする」など，確認できる形にする。
修正後は，変更したファイルと画面上の変更を対応させ，採用する版を特定する。
納品を受ける場合には，確認用URLや画像だけでなく，編集用データ，ソースコード，必要な設定及び更新方法の説明を，契約上どこまで受け取るか決めておく。
これは紛争予防のための契約上の提案であり，どの制作契約でも同じ納品義務が当然に生じるという意味ではない。
ドメインやサーバーの契約者，公開作業の担当，公開後の不具合への対応及び外部サービスの継続費用も，制作代金に含まれる範囲と併せて確認することが考えられる。
第５ 生成したHTMLをWordPressに組み込む
１ 本文として必要な範囲を取り出す
AIが独立したHTMLファイルを作った場合，その全体をWordPressの本文欄へ貼り付ける前に，既存テーマのどの部分と組み合わせるかを確認する。
ページ全体を構成するhtml，head，body等の要素と，記事本文として必要な内容は区別して扱う。
文章と見出しを標準ブロックへ移す方法，必要な部分だけをカスタムHTMLブロックで扱う方法，テーマ側で実装する方法を，維持管理の担当者と選ぶ。
共通の見た目に影響するCSSや，外部への通信を伴うJavaScriptを，本文だけの変更として見落とさないことが大切である。
２ 権限と保存後の内容を確認する
WordPressのカスタムHTMLブロックの公式説明では，７．０以降のHTML・CSS・JavaScriptの編集パネルと，unfiltered_html権限による制限が説明されている。
利用者の権限によっては，保存時に許可されない要素が除去されるため，入力前のコードだけで動作を判断しない。
権限の範囲は，WordPressのロールと権限の公式説明も参照して確認する。
本番と異なる確認用ページでは，テーマ，プラグイン，権限及び既存CSSの差によって結果が変わり得る。
本番更新を別途実施するときは，保存された内容と公開表示の双方を確かめる工程を用意する。
第６ 問い合わせフォームを実際の送信処理につなぐ
１ 装飾用フォームとContact Form 7のフォームを区別する
AIが作った入力欄と送信ボタンが表示されても，その画面だけでメール送信ができるとは限らない。
Contact Form 7を使うなら，同プラグインで作成した実際のフォームを，対象ページに組み込む。
Contact Form 7の公式FAQでは，専用のコンタクトフォームブロックと，ショートコードによる配置が案内されている。
対象サイトで作成されたフォームを選び，ショートコードを使う場合も実際のフォームを識別する値を使用する。
説明用の架空のIDをそのまま本番へ貼り付けない。
２ 入力欄と送信メールの設定を対応させる
Contact Form 7のフォームタグは入力欄等を生成し，メールタグは送信メールに入力内容等を反映する役割を持つ。
入力欄を増やした場合は，担当者が受け取るメールにも必要な項目が含まれるかを確かめる。
宛先，差出人，件名及び本文の設定を確認し，差出人アドレスはサイトのドメインに属するアドレスを使うという公式の案内も踏まえる。
相談者が入力したアドレスをそのまま差出人へ入れる設定にせず，返信先の設定と区別して検討する。
具体的な項目は，Contact Form 7のメール設定を参照されたい。
第７ 表示，送信処理及び実受信を別々に試験する
１ 画面上の確認
パソコンとスマートフォンで，入力欄の名前，必須項目，エラー表示，送信ボタン及び完了メッセージを確認する。
電話番号，メールへのリンク，ページ内リンクについても，表示されている文字と実際のリンク先が一致するかを確かめる。
２ 担当者の受信箱まで確認する
Contact Form 7の公式FAQは，緑色の完了表示が出ても，メールが受信箱に届かない場合があることを説明している。
また，Contact Form 7単体では，送信されたメッセージを保存しないとされている。
完了表示だけをもって，問い合わせの受信や控えの保存まで確認したと扱わない。
試験用の識別文字と架空の問い合わせ内容を用い，受信担当者，宛先及び送信する時点を決めた上で，実際の受信箱で到達と内容を確かめる。
自動返信を設定している場合は，その宛先と受信内容も別に確認する。
実際の依頼者の相談内容や個人情報を動作確認の材料に使う必要はない。
受信しない場合は，フォームの設定，メールの設定，サーバー側の送信環境及び迷惑メールの扱いを順に確認する。
未着の原因を調べずに送信ボタンを繰り返し押す運用は避ける。
第８ 公開中のページを維持しながら改稿する
WordPressの投稿ステータスの公式説明では，公開と下書きは異なる状態である。
公開済みの元記事自体を下書きへ戻す操作と，改稿案を別に保存する作業は区別する必要がある。
改稿案は，ローカルの原稿ファイル，公開しない別の作業用ページ，又は利用環境で確認した改稿管理の仕組み等で管理し，公開中の記事の状態を維持する方法を選ぶ。
どの方法でも，変更対象のID，採用する版及び公開切替えの担当者を明確にする。
WordPressには公開済み記事をプレビューする際の自動保存に関する処理もあるが，その存在だけで，承認済みの改稿案を長期保存・共同管理する運用が完成するわけではない。
詳細な更新手順は，WordPressを安全に更新する方法と，使用環境の仕様を併せて確認されたい。
第９ 素材の権利，入力情報及び公開内容を確認する
参考サイトは，構成や機能を相談する手掛かりにできる一方，そこにある文章，写真，図，ロゴ又はコードを利用する際には，それぞれの権利と利用条件を確認する。
AIを介在させたというだけで，入力した素材や生成物の公開に関する確認が不要になるわけではない。
権利を確認した素材を使い，参考ページの取得，入力，生成，修正及び公開した版を対応させておくと，表現の由来を後から検討しやすくなる。
著作権法３０条の４や４７条の５を含む工程ごとの検討は，AI処理の著作権を工程とログから確認するを参照されたい。
AIへ渡す資料には，公開ページの情報だけでなく，問い合わせ記録，管理画面の情報又はアクセス解析のデータが混在し得る。
公開してよい資料と，別の検討を要する情報を分け，利用するサービスの条件と業務上の義務を確認してから入力する。
弁護士等の業務利用については，OpenAIのdotsと守秘義務等を扱う記事も参照されたい。
Googleは，生成AIコンテンツに関する公式ガイドで，正確性，品質及び関連性を重視し，利用者への価値を加えずに多数のページを生成することがスパムポリシーに抵触し得ると説明している。
AIで作ったという事情だけから，検索順位やアクセス数の増加を保証することはできない。
掲載内容，説明文，画像の説明及び問い合わせ導線を，実際の読者が目的を達成できるかという観点で点検する。
第１０ 関連記事と参考資料
本記事の着想となった「ChatGPT・Claudeでホームページを作る｜画面つきガイド」は，制作者による画面付きの実践解説である。
本記事では，同解説の作例や体験談を一般的な性能の実証結果とは扱わず，製品の権限，WordPressの公開状態及び問い合わせ機能の仕様を，本文中の各公式資料で確認して整理した。
仕様に関する確認日は令和８年１０月３０日であり，実際に採用する環境では最新の公式説明を確認されたい。