PR当サイトにはアフィリエイト広告が含まれています。料金・機能・キャンペーンは申し込み前に公式サイトでご確認ください。
私は制作会社やエンジニアではありません。それでもAIを使って調査・構成・文章・コード・デザイン案を作り、HTMLサイトを更新してきました。この記事では、AIへ任せたこと、任せなかったこと、実際の制作フロー、失敗から学んだ指示の出し方を紹介します。
重要：AIの出力そのものを成果物と考えず、「確認して公開し、実際の反応を見て直す」までを制作工程に含めます。
AIだけでホームページは作れる？
AIを使えば、HTMLやCSSを一からすべて手書きしなくてもホームページの土台を作れます。私も、ページ構成、文章、コード、FAQ、SEO設定、改善案を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でホームページを作れますか？
簡単なページからなら可能です。ただし、コード確認、バックアップ、アップロード、動作確認の基本知識は必要です。
ChatGPTとClaudeはどちらを使えばよいですか？
目的により使い分けます。同じ課題を試し、使いやすい方を選びましょう。重要な判断をAI名だけで決めないことが大切です。
AIだけでSEO対策もできますか？
構成やタイトル案の補助には使えますが、検索意図、競合、Search Consoleの実データ、独自経験は人が確認します。
AIの文章をそのまま公開してよいですか？
おすすめしません。事実、著作権、重複、誇張、古い情報、読みやすさを確認し、自分の経験を加えてください。
AIを使えば制作会社は不要ですか？
複雑なシステム、セキュリティ、ブランド設計、法的要件、短納期では専門家への依頼が安全です。
まとめ｜AIを共同作業者として使う
AIを使うと、初心者でもホームページ制作の最初の一歩を踏み出しやすくなります。私も、調査、文章、コード、デザイン、SEO改善を相談しながらサイトを作ってきました。
ただし、AIへ任せるほど人の確認が不要になるわけではありません。実体験、事業情報、公開判断、法的・医療的な表現、動作確認は自分で責任を持ちます。
YOHAKU SELECT
次に進めたいことから選ぶ
この記事とあわせて、必要なテーマを確認しましょう。
