PR当サイトにはアフィリエイト広告が含まれています。料金・機能・キャンペーンは申し込み前に公式サイトでご確認ください。
私は制作会社やエンジニアではありません。それでもAIを使って調査・構成・文章・コード・デザイン案を作り、HTMLサイトを更新してきました。この記事では、AIへ任せたこと、任せなかったこと、実際の制作フロー、失敗から学んだ指示の出し方を紹介します。
- 作りたい1ページだけ決める — まずはトップ、サービス紹介、問い合わせのどれか1つ。
- AIに完成品ではなく下書きを頼む — 対象読者・目的・必要情報を渡して、構成や文章案から始めます。
- 公開せずに自分で確認する — 内容・リンク・スマホ表示を見て、問題なければ小さく反映します。
僕も一気に完成させたわけではありません。小さく作って、確認して、直す。この繰り返しなら、専門の制作会社でなくても進められました。
重要：AIの出力そのものを成果物と考えず、「確認して公開し、実際の反応を見て直す」までを制作工程に含めます。
YOHAKU LIVE TEST｜実際の修正記録
実演｜関連記事の画像が消えた問題をAIと切り分けた
| 検証日 | 2026年9月24日 |
|---|---|
| 使ったAI | ChatGPT（WordPress連携を利用） |
| 入力した課題 | 関連記事のアイキャッチが見えない、紺色背景で文字が見えにくい箇所があるため、原因確認と安全な修正を行う |
| AIが見つけた原因 | 関連記事の画像データは残っていた一方、CSSにdisplay:none!importantで関連記事やサムネイルを隠す指定が残っていた |
| 人が決めたこと | WAF全体を切らず、該当記事の非表示指定だけを外す。大きな一括変更は避ける |
| 結果 | 同系統の非表示指定があった7記事を修正。公開HTML側で関連記事の画像要素が残っていることも確認した |
| かかった時間 | 未計測。今後の実演では「AI作業＋人の確認」を分けて記録する |
| 判定 | AIだけで直さず、原因候補の抽出→小さい差分→公開側確認まで人が管理するのが有効 |
AIだけでホームページは作れる？
この記事は、AIを使って実際にホームページを作り、公開後まで直した実体験記事です。ChatGPT・Claudeなどへページ構成、文章、コード、FAQ、SEO設定、改善案を相談しながら進めましたが、AIだけで完成させず、人が表示・事実・導線を確認しています。作り方の選択肢を比較する場合は自作・AI・外注の比較、公開前の確認は公開前チェックリストへ分けます。
ただし、「一度頼めば完成」という意味ではありません。表示崩れ、リンク切れ、誤情報、文章の重複、スマホでの見切れ、意図しない装飾が実際に発生しました。
構成、文章案、コード、比較表、FAQを短時間で作れます。
内容が正しいか、事業方針と合うか、公開してよい表現かを判断します。
タイトル、見出し、導線、デザイン案を複数出せます。
スマホ表示、フォーム、リンク、速度は実機で確認します。
私がホームページ制作で使ったAI
ChatGPT
記事構成、文章整理、HTML・CSS、FAQ、内部リンク案、アイキャッチ案など幅広い相談に使いました。初心者にも分かる言葉へ直すことや、ページ全体の流れを見直すときに役立ちました。
Claude
長いコードや複数ファイルを扱う作業、既存ページの修正、役割ごとの作業分担で活用しました。ターミナル環境で、調査・SEO・デザイン・最終確認などの役割を分けて指示を出す運用も行いました。
私のHTMLサイト運営では、ClaudeなどのAIに修正案やコードを作らせた後、そのまま本番へ送らず、変更範囲を確認してからFileZillaでアップロードします。基本は「変更前を保存 → AIで修正案 → ローカル確認 → FileZillaで対象ファイルだけ転送 → スマホ・PCで公開確認」です。接続情報や公開フォルダをAIへ渡す必要はありません。FileZillaの接続・転送・反映トラブルは、FileZillaでホームページを更新する方法で症状別に整理しています。
別のAIで再確認
一つのAIだけで判断せず、別の視点や追加調査が必要なときに他のAIも使いました。複数のAIが同じ結論を出しても正しいとは限らないため、重要事項は公式情報と実際の画面で確認しました。
AIへ任せたこと・任せなかったこと
| 作業 | AIへ任せた部分 | 自分で確認した部分 |
|---|---|---|
| リサーチ | 調べる項目、比較軸、質問案 | 公式情報、最新料金、実際の画面 |
| 文章 | 構成、見出し、たたき台、言い換え | 実体験、数字、事業内容、誇張表現 |
| コード | HTML・CSS・修正案 | 表示、動作、スマホ、リンク、バックアップ |
| SEO | キーワード候補、タイトル、内部リンク案 | 検索意図、競合、Search Consoleの実データ |
| デザイン | 配色、UI、レイアウト、画像案 | 見切れ、文字量、ブランドとの整合性 |
実際の制作フロー
1．目的を決める
「誰に、何を伝え、最後に何をしてほしいか」を決めます。ここが曖昧なまま「最高のページを作って」と頼むと、見た目だけのページになりやすいです。
2．AIへ具体的に依頼する
対象者、目的、必要な情報、デザイン、禁止事項、スマホ対応、リンク先まで具体的に伝えます。
対象：個人事業主でホームページ初心者 目的：AIでサイトを作る方法を説明する 読了後の行動：関連記事を読み、必要ならサーバーを比較する 必須内容：手順、費用、失敗例、注意点、FAQ デザイン：白背景、青アクセント、スマホ対応 禁止：誇張、確認できない断定、意味のない装飾 出力：Cocoonへ貼れるHTMLとCSS
3．実体験へ置き換える
AIの文章は一般論になりやすいため、実際に行った作業、失敗、選んだ理由、今なら変える点を加えます。
4．FileZillaで公開する
WordPressを使わないHTMLサイトでは、編集したファイルをFileZillaでアップロードしました。更新前にバックアップを取り、ファイル名とアップロード先を確認します。
5．Search Consoleで改善する
表示回数、クリック数、検索キーワードを確認し、AIが作った記事を公開して終わりにせず、実データを見て修正します。
AIへの指示で失敗したこと
装飾が多く、意味のない図形が増えました。
別の部分まで変わり、以前の機能が壊れました。
営業時間や価格など、事実と違う文章が生まれました。
文字切れ、リンク切れ、スマホ崩れが残りました。
良い指示を出す7つのコツ
- 対象読者を具体的に伝える
- ページの目的と最終行動を一つ決める
- 変更範囲と変更禁止箇所を明記する
- 事実情報と要確認情報を分ける
- スマートフォンの表示条件を指定する
- 修正は小さく分けてプレビューする
- 公開前チェックもAIへ作らせる
WordPressとHTMLサイトの比較
| 比較 | WordPress | HTMLサイト |
|---|---|---|
| 更新 | 管理画面から更新しやすい | ファイル編集とアップロードが必要 |
| AIコード | テーマやプラグインとの競合に注意 | 直接反映しやすいが自己管理が必要 |
| 自由度 | テーマの仕組みに左右される | 高い |
| 保守 | 本体・テーマ・プラグイン更新 | ファイル・サーバー・バックアップ管理 |
| 向く人 | 記事更新を簡単にしたい人 | コードを学び細かく作りたい人 |
AIで作る・WordPressで自作する・外注するでは、必要なサーバーや管理方法も変わります。先に制作方法を整理し、WordPressで進めると決めた場合だけサーバー比較へ進むと無駄な契約を減らせます。
自作・AI・外注の違いを整理する →公開前チェックリスト
- 事業名、料金、営業時間、連絡先が正しい
- 確認できない断定がない
- スマホで文字と画像が切れていない
- 問い合わせフォームとリンクが動く
- 画像のaltが内容に合っている
- 変更前のバックアップがある
- 広告にPR表記と適切なrel属性がある
- 公開後にSearch Consoleで確認する
この体験を自分の制作に応用するときの記録
本文の体験談と、読者自身の環境で再現できることは分けて考えます。次の項目を記録して、小さな変更から試してください。
| 確認項目 | 確認・記録する内容 |
|---|---|
| 依頼する範囲 | 対象ページ、変更する箇所、変更しない箇所 |
| AIへ渡す根拠 | 確認済みの原稿・画像・仕様 |
| 比較するもの | 変更前後の表示、操作、差分 |
| 採用する条件 | 要求を満たすこと、誤情報や不具合がないこと |
うまくいかなかった指示も残すと、次の修正で同じ問題を説明し直す負担を減らせます。AIが「確認しました」と返しても、実際の検証記録がなければ、動作確認済みとして扱わないようにしましょう。
AI / HUMAN RESPONSIBILITY
AIに任せる作業と、人が最終確認する作業を分ける
| AIへ任せやすい | 人が確認する |
|---|---|
| 構成案・下書き・言い換え・コード案 | 事実・料金・権利・リンク先・公開可否 |
生成できたことと、公開してよいことは別です。公開判断はAIに委ねず、サイト運営者が確認します。
実運用ログ｜2026-09-25
AIで直した後、公開ページを再計測して採否を決めた
| 使用 | ChatGPT（GPT-5.6 Sol）＋WordPress接続 |
|---|---|
| AIへ任せたこと | 英語装飾・重複CSS・重い画像・404候補の抽出、修正案の作成 |
| 人が決めたこと | WAFを全体OFFにしない、実名や勤務先を勝手に公開しない、削除・統合を検索データなしで進めない |
| 変更後の再計測 | トップ：Performance 96 / Accessibility 100 / LCP 2.6秒。FileZilla記事：94 / 100 / LCP 2.9秒 |
| 所要時間 | 未計測。時間短縮の割合はこの作業からは算出しない |
AIが修正案を出したことと、改善したことは同義ではありません。公開後の表示・速度・リンクを再確認して採否を決めています。
モデル名について：「GPT-5.6 Sol」はこの実運用ログで使用した時点の記録です。AIサービスのモデル構成・提供プランは変わるため、この記事を「現在使える全モデルの一覧」としては扱いません。操作時は各サービスの最新画面・公式案内を確認します。
よくある質問
未経験でもAIでホームページを作れますか？
簡単なページからなら可能です。ただし、コード確認、バックアップ、アップロード、動作確認の基本知識は必要です。
ChatGPTとClaudeはどちらを使えばよいですか？
目的により使い分けます。同じ課題を試し、使いやすい方を選びましょう。重要な判断をAI名だけで決めないことが大切です。
AIだけでSEO対策もできますか？
構成やタイトル案の補助には使えますが、検索意図、競合、Search Consoleの実データ、独自経験は人が確認します。
AIの文章をそのまま公開してよいですか？
おすすめしません。事実、著作権、重複、誇張、古い情報、読みやすさを確認し、自分の経験を加えてください。
AIを使えば制作会社は不要ですか？
複雑なシステム、セキュリティ、ブランド設計、法的要件、短納期では専門家への依頼が安全です。
まとめ｜AIを共同作業者として使う
AIを使うと、初心者でもホームページ制作の最初の一歩を踏み出しやすくなります。私も、調査、文章、コード、デザイン、SEO改善を相談しながらサイトを作ってきました。
ただし、AIへ任せるほど人の確認が不要になるわけではありません。実体験、事業情報、公開判断、法的・医療的な表現、動作確認は自分で責任を持ちます。
YOHAKU SELECT
次に進めたいことから選ぶ
この記事とあわせて、必要なテーマを確認しましょう。
AIで作った作品も見る
Webサイト以外の制作実例として、AIを活用したLINEスタンプも紹介しています。映画・フリマ・介護職など、使う場面を絞った作品の見本と購入先をまとめました。
使いたい作品を探している方は、家族・仕事・趣味から24作品を選べるLINEスタンプガイドへ進めます。
制作方法を決める前なら自作・AI・外注の比較、具体的なWordPress制作手順はWordPress自作ガイド、AIへの指示文はプロンプト集へ分けます。AIを仕事全体へどう入れるかはAI事務効率化の親ガイドへ戻れます。
