はじめに
ここまで、
WordPressでホームページを作るために、
たくさんのことを学んできました。
サーバー。
ドメイン。
WordPress。
Theme。
Plugin。
ページ。
SEO。
セキュリティ。
バックアップ。
Search Console。
Google Analytics。
改善。
トラブルシューティング。
全部を一人で覚えようとすると、
かなり大変です。
でも現在は、
ここにもう一つ、
強力な道具があります。
AIです。
AIを使えば、
分からない言葉を質問する。
文章を整理する。
構成を考える。
コードを確認する。
エラーを調べる。
データを整理する。
といった作業を、
一緒に進められます。
ただし、
AIへ全部任せれば、
良いホームページが自動的に完成するわけではありません。
今回は、
AIを「答えを出す機械」ではなく、ホームページ制作の相棒として使う方法
を整理します。
AIはホームページを作れる？
はい。
現在のAIは、
HTML、
CSS、
JavaScript、
文章、
画像案、
SEO案、
構成案など、
ホームページ制作に関わる多くの作業を支援できます。
しかし、
「作れる」
と、
「あなたに合った良いホームページを作れる」
は、
同じではありません。
AIはあなたのビジネスを最初から知らない
AIは、
あなたが何を大切にしているか、
最初から完全には知りません。
たとえば美容室なら、
同じ「縮毛矯正」でも、
- 料金重視
- 速度重視
- デザイン重視
- ダメージ Care重視
- Natural Finish重視
- High-end サービス
など、
考え方は違います。
文脈がなければ、
AIは一般的な答えを作りやすくなります。
AIに必要なのは文脈
AIとホームページを作るとき、
とても重要なのが、
文脈
です。
たとえば、
誰のサイト？
何のビジネス？
誰に来てほしい？
何を伝えたい？
何をしてほしい？
何を大切にしている？
今どこまで作った？こうした情報を渡すほど、
AIは目的に合った提案をしやすくなります。
プロンプトだけが重要なのではない
AI活用というと、
「すごいプロンプトを書くこと」
が重要だと思われがちです。
もちろん、
指示の仕方は大切です。
でも、
それ以上に重要なのは、
AIへ渡す材料の質
です。
短い魔法のプロンプトより、
実際のサービス内容、
顧客の質問、
現在のページ、
Search Console データ、
写真、
ブランド方針などを渡した方が、
良い結果につながる場合があります。
AIにできることを分けて考える
ホームページ制作では、
AIを大きく、
次のような役割に分けて使えます。
1. 調べる
2. 考える
3. 作る
4. 確認する
5. 分析する
6. 記録する一つずつ見ていきます。
調べる
分からない言葉や、
仕組みを理解するときに使えます。
たとえば、
DNSとは？301と302の違いは？GA4のKey イベントとは？などです。
ただし、
WordPress、
Google、
Plugin、
ホスティングなどの仕様は、
時間とともに変わります。
最新情報が重要な場合は、
公式情報も確認します。
AIに「初心者向けに説明して」と頼む
公式ドキュメントは、
正確でも、
初心者には難しいことがあります。
そんなとき、
AIへ、
この内容をWordPress初心者向けに説明してください。
専門用語は残し、その直後に意味を説明してください。と頼む方法があります。
AIを、
難しい情報と自分の間の翻訳者
として使います。
考える
AIは、
選択肢を整理する作業にも使えます。
たとえば、
固定ページと投稿、どちらにする？このページは分けるべき？CTAはどこに置く？この構成で不足している情報は？などです。
ここでは、
AIに最終決定させるというより、
考える材料を増やします。
「おすすめは？」だけで聞かない
たとえば、
おすすめのWordPress Themeは？だけでは、
一般的な人気Themeが出てくるかもしれません。
代わりに、
美容室の小規模サイト
自分で更新する
ブログを続ける
表示速度を重視
予約は外部サービス
デザインはシンプルなど、
条件を渡します。
すると、
比較の質が上がります。
作る
AIは、
実際の制作にも使えます。
たとえば、
- ページ構成
- 見出し
- 本文下書き
- FAQ
- メタディスクリプション案
- CTA案
- HTML
- CSS
- JavaScript
- Schema案
- 画像 プロンプト
などです。
ただし、
生成されたものを、
そのまま公開する前に確認します。
記事作成にAIを使う
AIは、
記事の下書き作成が得意です。
しかし、
「縮毛矯正の記事を書いて」だけでは、
一般論になりやすくなります。
そこで、
実際の知識や経験を渡します。
自分の材料を先に出す
たとえば、
この記事で伝えたいこと
実際によくある質問
自分たちの考え方
施術で大切にしていること
対象顧客
避けたい表現を先に渡します。
すると、
AIは、
自分の知識を文章へ変える補助
として使えます。
AIに「経験」を作らせない
自分が経験していないことを、
AIが、
「私たちは何百人ものお客様を見てきました」
のように書く場合があります。
実績、
お客様の声、
数字、
資格、
経験などは、
事実を確認して使います。
AIに存在しない実績を作らせません。
SEOにAIを使う
SEOでも、
AIは役立ちます。
たとえば、
- 検索意図整理
- Query分類
- コンテンツの不足
- タイトル案
- 見出し整理
- 内部リンク候補
- 重複コンテンツ確認
- Search Console データ整理
などです。
ただし、
「キーワードをたくさん入れて」
という使い方だけでは、
良いコンテンツにはなりません。
Search Console データをAIへ渡す
たとえば、
Search Consoleから、
Queryとページのデータを確認した。
それをAIへ渡して、
想定していた検索意図と、
実際のQueryの違いを整理してください。と頼むことができます。
すると、
新しい記事を書く前に、
既存ページへ何を追加すべきか見つかる場合があります。
アクセス解析にも使える
GA4の数字を、
AIと一緒に整理することもできます。
たとえば、
ランディングページ別
セッション
CTAクリック
Key イベントを比較する。
AIへ、
「どのページが良い？」
だけではなく、
事実
仮説
追加で確認すべきデータに分けてもらうと、
断定しすぎるのを防げます。
AIに「原因」を決めつけさせない
たとえば、
CTAクリック率が低い。
AIが、
「ボタンの色が原因です」
と言った。
これは、
仮説にはなります。
でも、
証明された原因ではありません。
データから分かることと、
推測を分けます。
コード作成にAIを使う
AIは、
HTML、
CSS、
JavaScript、
PHPなども生成できます。
たとえば、
ボタンの余白を調整したい特定ページだけCSSを変えたいなどです。
しかし、
コードは、
実際のサイトへ影響します。
AIが書いたコードをいきなり本番へ入れない
特に、
PHP、
.htaccess、
データベース、
サーバー設定、
functions.php、
wp-config.php
などは、
サイト全体へ影響する可能性があります。
意味を理解せず、
本番へコピー & Pasteしないようにします。
コードを頼むときは「変更範囲」を伝える
たとえば、
WordPressの特定ページだけで、
ボタンのmargin-topを16pxにしたい。
他ページへ影響させたくない。
追加CSSで対応したい。と伝えます。
「CSS書いて」
だけより、
安全な提案を得やすくなります。
AIにコードの説明もさせる
コードを受け取ったら、
このコードが何を変更するか、
初心者向けに1行ずつ説明してください。と頼めます。
分からないコードを、
少しずつ理解しながら使います。
トラブルシューティングにAIを使う
第47章で学んだように、
AIはエラー調査にも使えます。
重要なのは、
エラー
バージョン
直前の変更
再現手順
環境
試したことを渡すことです。
スクリーンショットをAIに見せる
AIが画像を理解できる場合、
WordPress管理画面や、
エラー画面のスクリーンショットを見せて、
質問する方法もあります。
たとえば、
この画面で次に押す場所は？このエラーメッセージは何を意味する？などです。
スクリーンショットにも個人情報がある
管理画面のスクリーンショットには、
意外と多くの情報が入っています。
- 利用者 Name
- メール
- ドメイン
- API情報
- Order情報
- 顧客情報
- サーバー情報
などです。
共有前に確認します。
デザインにもAIを使える
AIへ、
デザインの方向性を相談することもできます。
たとえば、
このトップページは情報量が多すぎる？このCTAは目立つ？モバイルで読みやすい構成？などです。
画像生成AIを使って、
ヒーロー 画像や、
Concept 画像の案を作ることもできます。
「きれい」と「目的達成」は別
AIが、
美しいデザインを提案しても、
それが、
ビジネス目的に合うとは限りません。
文字を小さくして、
余白を大きくすれば、
洗練されて見えるかもしれません。
でも、
対象顧客にとって、
読みにくくなる可能性もあります。
デザインも、
目的から判断します。
AIに競合サイトを丸ごと真似させない
参考サイトを見せて、
方向性を相談することはできます。
しかし、
文章、
画像、
デザイン、
コードなどを、
そのままコピーすることは避けます。
「何が良いのか」
を分解して、
自分のサイトへ合う形に変えます。
AIの回答をそのまま信じない
AIの回答は間違うことがある
これは、
必ず覚えておきます。
AIは、
自信ありげに、
間違った情報を出すことがあります。
特に、
- 最新仕様
- Plugin設定
- 法律
- セキュリティ
- 決済
- DNS
- サーバー
- トラッキング
- Medical / Financial claims
など、
間違いの影響が大きいものは、
確認が必要です。
最新情報は公式情報源で確認する
AIへ、
現在のGoogle Analyticsでは？と聞いたとしても、
重要な設定では、
Google公式Helpを確認します。
WordPressならWordPress公式。
XserverならXserver公式。
PluginならPlugin提供元。
一次情報へ戻ります。
AIに「情報源を確認して」と頼む
Web検索ができるAIなら、
現在の公式ドキュメントを確認して、
古い情報と混ざっていないか確認してください。と頼む方法があります。
それでも、
最終的に重要な設定を変更するときは、
情報源内容を自分でも確認します。
AIへ渡す情報と権限に注意する
AIへ全部の権限を渡さない
AI Agentなどが、
実際のツールを操作できる場合もあります。
便利ですが、
権限が大きいほど、
誤操作の影響も大きくなります。
最初から、
必要以上の権限を与えない。
重要な変更前に確認する。
バックアップを用意する。
という考え方が重要です。
パスワードをAIへ送らない
AIへ相談するとき、
パスワード、
シークレット Key、
API トークン、
復旧 コードなどを、
そのまま送らないようにします。
必要なのは、
設定項目の名前や、
エラー内容であり、
秘密情報そのものではない場合がほとんどです。
顧客 データにも注意する
問い合わせ内容や、
予約データをAIで分析するとき、
顧客の個人情報が含まれている場合があります。
氏名、
電話番号、
メール、
住所、
相談内容など、
必要以上の個人情報を渡さないようにします。
利用するAI サービスのデータ取扱いも確認します。
AIとの会話を「制作記録」にする
AIと一緒に作業すると、
なぜその変更をしたのか、
会話の中に残ります。
でも、
会話が増えると、
後から探しにくくなります。
そこで、
重要な判断は、
プロジェクトのドキュメントへ残します。
管理用ドキュメントを作る
たとえば、
ホームページ制作プロジェクトなら、
目的
対象
サイト構造
使用Theme
使用Plugin
SEO方針
デザイン方針
変更履歴
未解決課題
次にやることをまとめた、
管理用ドキュメントを作ります。
AIとの会話が変わっても、
プロジェクトの現在地を引き継ぎやすくなります。
Markdownで残す
こうした記録は、
Markdown形式で残す方法があります。
Markdownは、
テキストとして読みやすく、
AIにも渡しやすく、
バージョン管理もしやすい形式です。
たとえば、
### ホームページ プロジェクト
#### 目的
#### 現在の構造
#### 決定事項
#### 変更履歴
#### 未解決事項
#### 次にやることのように整理できます。
AIを変えても引き継げる
ChatGPT。
Claude。
Gemini。
Codex。
その他のAI。
ツールは変わる可能性があります。
でも、
プロジェクトの情報が、
AIの中だけではなく、
自分のドキュメントとして残っていれば、
別のAIへも引き継げます。
「AIが覚えているはず」にしない
長いプロジェクトほど、
重要な情報を、
AIの記憶だけに依存しない方が安全です。
重要な決定。
バージョン。
URL。
設定。
理由。
未完了Task。
これらを、
自分で管理できる形に残します。
AIに毎回ゼロから説明しない
プロジェクト ドキュメントがあれば、
新しいConversationで、
この管理用ドキュメントを読んで、
現在地を確認してから続きを進めてください。と渡せます。
これだけでも、
長期プロジェクトの作業効率は大きく変わります。
AIとの基本Workflow
ホームページ制作で、
AIを使う基本形をまとめます。
1. 目的を決める
2. 材料を集める
3. AIへ文脈を渡す
4. 選択肢を出す
5. 人が判断する
6. AIと制作する
7. 確認する
8. テストする
9. 公開する
10. データを見る
11. AIと分析する
12. 改善する
13. 記録する
人が決めるもの
AI時代でも、
人が決めるものがあります。
たとえば、
誰のためのサイトか
何を大切にするか
何を売るか
どんな顧客と仕事をしたいか
どこまでリスクを取るか
何を公開するか
何を正しいと判断するかです。
AIは、
判断材料を増やせます。
でも、
ビジネスの主人公ではありません。
AIが得意なこと
AIが特に役立ちやすいのは、
- 情報整理
- 比較
- 下書き
- 要約
- 言い換え
- Idea出し
- コード補助
- データ整理
- チェックリスト
- トラブルシューティング補助
- ドキュメント
です。
大量の情報を、
一度整理して考える作業に向いています。
AIが苦手になりやすいこと
一方、
注意が必要なのは、
- 事実確認なしの最新情報
- 実際の顧客感情の断定
- ビジネス価値観の最終判断
- 法的判断
- セキュリティの最終判断
- 実サイトでの結果保証
- 存在しない経験や実績
などです。
AIの得意・不得意を分けます。
AIを使うほど、人の役割が重要になる
AIが文章を書ける。
コードを書ける。
画像を作れる。
分析できる。
だから、
人は何もしなくてよくなる。
ということではありません。
むしろ、
何を作るか。
なぜ作るか。
誰に届けるか。
どれを採用するか。
何を捨てるか。
という、
方向を決める仕事
が重要になります。
初心者こそAIを使える
「WordPressを全部覚えてからAIを使う」
必要はありません。
分からないところで、
質問する。
公式情報を、
分かりやすくしてもらう。
操作前に、
注意点を聞く。
スクリーンショットを見せる。
一緒にチェックリストを作る。
そうしながら、
実際に作っていけます。
ただし「分からないまま実行」はしない
AIが、
難しいコードや、
サーバー設定を出した。
意味は分からない。
でも、
AIが言うから実行する。
これは避けます。
分からなければ、
この操作で何が変わりますか？
失敗すると何が起きますか？
元に戻せますか？
先にバックアップは必要ですか？と聞きます。
AIへ依頼するときのテンプレート
AIへ聞くための基本テンプレート
初心者なら、
次の形から始められます。
■やりたいこと
○○したいです。
■現在の状態
○○です。
■環境
WordPress / Theme / Plugin / サーバーなど
■分からないこと
○○が分かりません。
■希望
初心者向けに、
一度に一つずつ進めてください。
危険な変更がある場合は先に教えてください。制作依頼のテンプレート
■目的
このページで何を達成したいか
■対象
誰に読んでほしいか
■伝えたいこと
自分の知識・経験・サービス内容
■現在のページ
URL / テキスト / スクリーンショット
■希望
構成 → 下書き → 見直し → 修正
の順で進める
■制約
避けたい表現、ブランド Toneなどトラブルシューティング テンプレート
■症状
何が起きているか
■発生時期
いつから
■直前の変更
何を変えたか
■エラー
正確なメッセージ
■環境
WordPress / PHP / Theme / Plugin
■再現手順
どうすると起きるか
■試したこと
何を確認したか
■希望
まず原因を切り分けたい。
危険な修正はまだ行わない。データ分析テンプレート
■目的
何を改善したいか
■期間
いつからいつまで
■データ
Search Console / GA4など
■変更履歴
期間中に何を変えたか
■依頼
1. 事実
2. 仮説
3. 追加確認
4. 改善案
に分けて整理するAI活用の確認チェックリスト
AIの提案を使う前に、
確認します。
内容
- 事実？
- 推測？
- 情報源は？
- 最新？
技術
- どこへ影響する？
- バックアップは？
- 戻せる？
- ステージングで試せる？
ビジネス
- 目的に合う？
- 対象に合う？
- ブランドに合う？
プライバシー
- 個人情報は？
- シークレットは？
記録
- なぜ採用した？
- 何を変えた？
AIは「完成ボタン」ではない
AIを使えば、
ホームページ制作は、
かなり速くできます。
でも、
速く作れることと、
良いものを作れることは、
同じではありません。
AIは、
考える速度を上げる。
作る速度を上げる。
調べる速度を上げる。
比較する速度を上げる。
でも、
どこへ向かうかを決めるのは人です。
今回のポイント
- AIはWordPress制作・運用の多くの作業を支援できる
- 「作れる」と「自分に合った良いサイトを作れる」は別
- AIはビジネスの文脈を最初から完全には知らない
- プロンプトだけでなく文脈と元資料が重要
- AIの役割を調査・思考・制作・確認・分析・記録に分ける
- 難しい公式情報を初心者向けに説明させる使い方ができる
- 最新仕様は公式情報源でも確認する
- AIは選択肢整理に使い、最終判断を人が行う
- Recommendationではサイト条件を具体的に渡す
- AIはページ構成・本文・FAQ・CTA・コード等の下書きを作れる
- 記事では自分の知識・経験・顧客 Question等を材料として渡す
- AIに存在しない経験・実績を作らせない
- SEOでは検索意図・Query・コンテンツの不足・内部リンク等の整理に使える
- Search Console データをAIで分析し既存コンテンツ改善へつなげられる
- GA4分析では事実・仮説・追加確認を分ける
- AIの仮説を証明済みの原因として扱わない
- AI生成コードを本番サイトへ無確認で入れない
- PHP・データベース・サーバー設定等は特に慎重に扱う
- コード依頼では変更範囲を具体的にする
- AIにコードの意味も説明させる
- トラブルシューティングではエラー・バージョン・変更履歴・再現手順等を渡す
- スクリーンショットをAIへ見せて操作やエラーを相談できる
- スクリーンショット共有時は個人情報・シークレットを確認する
- デザイン 見直しでもビジネス目的と対象を基準にする
- 参考サイトはコピーせず良い理由を分解して自分のサイトへ応用する
- AIは自信を持って間違うことがある
- 最新・セキュリティ・法律・トラッキング等は一次情報で確認する
- AI Agentには必要以上の権限を与えない
- パスワード・シークレット Key・トークン等をAIへ不要に送らない
- 顧客 データをAIへ渡す場合は最小化・匿名化等を考える
- AI Conversationだけにプロジェクト情報を閉じ込めない
- 管理用ドキュメントへ目的・構成・方針・変更履歴・次アクションを残す
- MarkdownはAIへ引き継ぎやすいプロジェクト記録形式
- プロジェクト情報を外部ドキュメント化するとAI ツールを変えても引き継げる
- 「AIが覚えているはず」に依存しない
- Human-AI Workflowでは人が目的・採用・公開を判断する
- AIは情報整理・比較・下書き・コード補助・分析・ドキュメントが得意
- 最新事実・価値判断・セキュリティ等はAIだけに依存しない
- AIが強くなるほど人の方向づけが重要になる
- 初心者でもAIと学びながらWordPressを作れる
- 分からない高リスク操作は実行前に意味・リスク・Rollbackを確認する
- コンテンツ / トラブルシューティング / データ Analysisごとに文脈 テンプレートを使う
- AI Outputは事実・技術・ビジネス・プライバシー・記録の観点で見直しする
- AIは完成ボタンではなく制作・判断を加速するツール
今回の視点
AIが登場すると、
「AIに何をさせるか」
を考えたくなります。
文章を書かせる。
画像を作らせる。
コードを書かせる。
SEOを考えさせる。
もちろん、
それもAI活用です。
でも、
もっと大きな変化があります。
これまでは、
分からないことがあるたびに、
検索して、
記事を何本も読み、
専門用語を理解して、
自分の状況へ当てはめる必要がありました。
今は、
分からないところから、
AIと一緒に考え始めることができます。
だから、
AI時代のホームページ制作で大切なのは、
すべての技術を先に覚えることではありません。
自分が何を作りたいのかを持ち、分からない部分をAIと一緒に解いていくこと。
そして、
AIが出した答えを、
そのまま正解にしないこと。
自分のビジネス。
自分の顧客。
自分の目的。
実際のデータ。
公式情報。
それらと照らし合わせて、
採用するものを決める。
AIは、
ホームページの主人公ではありません。
主人公が作りたいものを、より速く形にするための道具です。
Part 8｜AI時代の制作と全体整理