まず全体像を整理しましょう。ChatGPTはホームページ制作・運用において、以下の5分野で活用できます。
①ページ構成・設計
サイト全体のページ構成、サイトマップ、ワイヤーフレームの叩き台をChatGPTに提案してもらう
②文章・コンテンツ作成
キャッチコピー・サービス説明・会社概要・FAQ・ブログ記事などをAIが一括生成
③SEO対策
キーワード選定・メタディスクリプション・見出し構成・内部リンク提案など
④コーディング支援
HTML・CSSのコード生成、WordPress設定、レスポンシブ対応コードの修正
⑤診断・改善提案
現在のホームページの問題点を洗い出し、優先順位付きの改善アクションを提案
ポイント
プログラミングスキルゼロでも、プロンプトの書き方さえ覚えれば、これら全分野を自分でこなせます
ChatGPTでホームページを作る5ステップ｜コピペ用プロンプト付き
ゼロからホームページを作る場合、以下の5ステップで進めます。各ステップにそのまま使えるプロンプト例を添付しています。[ ]内はご自身の情報に書き換えてください。
STEP 1：目的・ターゲット・ページ構成を決める
サイト全体の方向性を決める最重要ステップ。ここが曖昧だと、後の文章やデザインもブレます。ChatGPTにサイトの概要を伝えてページ構成案を出してもらいましょう。
プロンプト例：ページ構成の提案
あなたはWebディレクターのプロです。
以下の条件でホームページのページ構成案を提案してください。
【業種・サービス】[整体院／税理士事務所／美容サロンなど]
【ターゲット】[30〜50代の肩こり・腰痛に悩む会社員]
【目的】[予約・問い合わせを増やす]
【フォーマット】必要なページ名を箇条書きで、各ページの「掲載すべき内容（3点）」とともに一覧表形式で出力してください。
STEP 2：キャッチコピー・文章を作成する
ホームページの「顔」になるトップページのキャッチコピーと、各ページの本文をChatGPTに書かせます。ターゲットの悩みや状況を詳しく伝えるほど、刺さるコピーが生成されます。
プロンプト例：キャッチコピー作成
あなたはコピーライターのプロです。
以下の条件でホームページのトップページに使うキャッチコピーを5パターン作成してください。
【業種】[整体院]
【ターゲット】[週5日働く30〜40代の会社員。肩こり・腰痛が慢性化。病院に行くほどじゃないが毎日つらい]
【強み・差別化】[予約不要の完全個室・通いやすい駅前立地・施術後の再発防止アドバイスあり]
【フォーマット】メインコピー（20字以内）＋サブコピー（40字以内）のセットで5パターン
プロンプト例：サービス説明文の作成
あなたはWebコピーライターです。
以下の情報をもとに、ホームページの「サービス紹介」ページに掲載する文章を作成してください。
【サービス名】[〇〇コース（60分）]
【対象の悩み】[デスクワークによる肩・首・腰のコリ]
【施術内容】[独自の筋膜リリース＋姿勢矯正]
【フォーマット】リード文（100字）＋施術の流れ（3ステップ）＋こんな方におすすめ（3点）の構成で、読み手に語りかける文体で
STEP 3：SEO対策（キーワード・メタ情報）を設定する
ページを公開しても、検索で見つけてもらえなければ意味がありません。ChatGPTにSEOの基本設定を任せましょう。
プロンプト例：メタディスクリプションの作成
あなたはSEOの専門家です。
以下のページ情報をもとに、Google検索結果に表示される「メタディスクリプション」を作成してください。
【ページの内容】[整体院のトップページ。肩こり・腰痛治療。東京・新宿駅徒歩3分]
【ターゲットKW】[新宿 整体 肩こり]
【フォーマット】120字以内、KWを自然に含め、クリックを促す訴求を入れて。3パターン提案すること
プロンプト例：ページ内の見出し構成（H2・H3）の作成
あなたはSEOコンサルタントです。
以下の条件でブログ記事の見出し構成（H2・H3）を作成してください。
【記事テーマ】[整体と整骨院の違いを初心者向けに解説]
【メインKW】[整体 整骨院 違い]
【文字数目安】[2000字]
【フォーマット】H2を4〜5個・各H2の下にH3を2〜3個の階層構成で、各見出しに「検索ユーザーの疑問を解決する」観点で作成してください
STEP 4：コーディング・HTML/CSSを生成する
プログラミング不要でHTMLコードを生成できるのもChatGPTの強みです。WordPressのカスタマイズや、ランディングページのコーディングも対応できます。
プロンプト例：HTMLコードの生成
あなたはWebエンジニアです。
以下の仕様でシンプルなランディングページのHTMLとCSSを生成してください。
【ページ構成】ヘッダー（ロゴ＋ナビ）／ヒービジュアル（キャッチコピー＋CTAボタン）／サービス特徴3点／お客様の声2件／お問い合わせフォーム
【デザインイメージ】清潔感があるホワイト×グリーン基調。フォントは游ゴシック
【条件】スマートフォンでも崩れないレスポンシブ対応で出力すること
プロンプト例：WordPressコードの修正
あなたはWordPressのエキスパートです。
以下のコードを修正してください。
【現在の問題】スマートフォン表示でナビゲーションが画面幅を超えてはみ出している
【使用テーマ】SWELL
【修正方法】CSSでスマートフォン（768px以下）のときにハンバーガーメニューに切り替わるよう修正してください
【コード】[現在のCSSコードをここに貼り付ける]
STEP 5：公開後の改善PDCAを回す
ホームページは作って終わりではありません。アクセス解析データをChatGPTに入力して、改善施策を継続的に提案してもらうPDCAサイクルを構築しましょう。
プロンプト例：アクセス解析データから改善策を提案させる
あなたはWebマーケターです。
以下のGoogle Analytics4データをもとに、改善施策を優先度順に3つ提案してください。
【データ】
・月間セッション：850
・直帰率：78%
・平均滞在時間：42秒
・コンバージョン率（お問い合わせ）：0.3%
・流入の多いページ：トップページ60%、料金ページ25%
【フォーマット】各施策を「課題→原因仮説→具体的なアクション」の形式で箇条書き、実施コストも合わせて示してください
ChatGPTで今のホームページを診断する方法【手順と全プロンプト】
「今あるホームページが問題ないかチェックしたい」という場合、ChatGPTに診断させることができます。ポイントは診断してほしい観点を明確に指定することです。
⚠️ 事前に知っておくこと：ChatGPTはURLを直接閲覧できない
ChatGPTにURLを貼るだけでは診断できません。ホームページのテキスト・構成・メタ情報などをコピーして貼り付けるか、診断チェックリストを作ってもらい自己診断する方法が現実的です。ChatGPT-4（有料版）のBing連携機能やWeb Browsing機能を使えばURL指定での解析が可能な場合もあります。
診断① コンテンツ・文章の改善診断
あなたはWebコンサルタントです。
以下のホームページのトップページの文章を、「訪問者が問い合わせしたくなるか」という観点で診断してください。
【現在の文章】[トップページの文章をここに貼り付ける]
【評価してほしい観点】
①ファーストビューで何の会社かわかるか
②ターゲットの悩みに共感できているか
③行動を促すCTAが明確か
【フォーマット】各観点を5段階評価＋改善のポイント（100字以内）で出力してください
診断② SEO・構造の改善診断
あなたはSEOの専門家です。
以下のページ情報をMECE（モレなくダブりなく）な視点でSEO診断してください。
【ページタイトル】[現在のtitleタグの内容]
【メタディスクリプション】[現在のmeta description]
【H1〜H3の見出し一覧】[現在の見出しを全部貼り付ける]
【ターゲットKW】[狙っているキーワード]
【チェック項目】KWの含有・見出し構成の最適化・重複コンテンツの有無・内部リンクの提案・改善優先度の順に表形式で出力してください
診断③ UX（ユーザー体験）の改善診断
あなたはUXデザイナーです。
以下のホームページの構成・ナビゲーション情報を、初めて訪れるユーザーの視点で診断してください。
【サイト構成（ページ一覧）】[ナビゲーションのメニュー構成を記載]
【メインの問い合わせ経路】[お問い合わせフォーム / LINE / 電話など]
【診断してほしい点】
①トップページからお問い合わせまでのクリック数は適切か
②スマートフォンで見た場合に使いづらい箇所はあるか
③離脱しやすいと考えられるページはどこか、その理由
【フォーマット】課題点を優先度（高・中・低）付きで箇条書き、各改善アクションも添えて
診断④ 競合比較・差別化の診断
あなたはWebマーケティングの専門家です。
以下の情報をもとに、競合と比べた自社ホームページの強み・弱みを分析し、差別化に向けた改善提案を3点してください。
【自社サービスの特徴】[強み・こだわり・実績など]
【競合A社のURL（またはサービス概要）】[競合情報を記載]
【競合B社のURL（またはサービス概要）】[競合情報を記載]
【比較してほしい観点】価格訴求・実績・ターゲット層・コンテンツの充実度・CTAの明確さ
【フォーマット】比較表＋改善提案を箇条書きで出力してください
業種別・用途別ChatGPTプロンプト早見表
よく使われる業種と用途別に、プロンプトの核となる「指示の核心部分」をまとめました。前述のSTEP1〜5のテンプレートに組み合わせて使ってください。
医療・治療院・サロン系
- 「〇〇（症状）で悩む30〜50代に刺さる、症状別ページの文章を作成してください」
- 「初診予約を増やすために、ファーストビューのCTA文言を5パターン提案してください」
- 「患者様の声（口コミ）から、SEO効果の高いFAQを10問作成してください」
BtoB・士業・コンサル系
- 「中小企業の経営者が信頼感を持てる、会社概要・代表挨拶文を作成してください」
- 「実績・導入事例のケーススタディページの構成案と文章テンプレートを提案してください」
- 「問い合わせ前の不安を解消するためのFAQページの質問と回答を15問作成してください」
EC・物販・飲食系
- 「〇〇（商品名）の商品説明文を、購買欲を高める感情的ベネフィットを中心に書いてください」
- 「リピート購入を増やすためのサンクスページ（購入後ページ）のコピーを作成してください」
- 「Googleビジネスプロフィールに掲載する店舗説明文を、地域名・業種名を含めてSEO最適化してください」
教育・スクール・研修系
- 「無料体験レッスンへの申し込みを促すランディングページの構成と文章を作成してください」
- 「受講生の卒業後の姿（ビフォーアフター）が想像できる、コース紹介文を書いてください」
- 「競合スクールとの比較表のコピーを、自社の強みが引き立つよう作成してください」
ChatGPTでホームページを作るときのよくある失敗3パターン
失敗①「プロンプトが抽象的すぎて使えない文章が返ってくる」
NG
「整体院のホームページの文章を書いて」
→ 誰向けか・何の特徴か・どんな文体かが不明で、汎用的な文章しか返ってこない
OK
「30〜40代の慢性的な腰痛持ちの会社員をターゲットに、新宿駅徒歩3分の整体院のトップページ用キャッチコピーを5パターン、語りかける文体で20字以内で作成してください」
失敗②「ChatGPTの文章をそのまま使い、SEOが下がる」
GoogleはAI生成コンテンツをそのまま公開することを否定していませんが、「オリジナリティがない・ユーザーの役に立たない」コンテンツは評価が下がるリスクがあります。ChatGPTの文章はあくまで「叩き台」として使い、必ず以下を加えてください。
- 自社・自分の実体験・具体的な数字・事例を追記する
- 業界特有の専門用語や、地域名・店舗名などの固有情報を加える
- ChatGPTが提案した文章を自分の言葉にリライトする（文体・表現の個性を出す）
失敗③「一度で完成させようとして精度が低い」
ChatGPTは会話を重ねるほど精度が上がります。1回のプロンプトで完成品を求めるより、「まず叩き台を出す→フィードバックして修正→さらに改善」というチェーン形式が最も高品質な成果物を生みます。
改善の会話例：
1回目：「整体院のキャッチコピーを5つ提案して」
↓
2回目：「3番目のコピーが良い方向です。ただ少し硬い印象なので、もっと日常会話に近い柔らかいトーンで5パターン再提案してください」
↓
3回目：「2番目のコピーをベースに、『毎日』という言葉を入れてさらに3パターン微調整してください」
まとめ：ChatGPTはホームページ制作・改善の最強の相棒になる
この記事のポイントをまとめます。
- ChatGPTはページ構成・文章・SEO・コーディング・診断の5分野すべてで活用できる
- プロンプトは「誰に・何を・どんな形式で」を明確に書くほど精度が上がる
- 作成した文章は叩き台として使い、自社の実体験・固有情報を加えてリライクすることが必須
- 診断はコンテンツ・SEO・UX・競合比較の4観点で実施すると網羅的
- 1回で完成を求めず、会話を重ねるチェーン形式が高品質な成果物を生む
ChatGPTを使いこなすことで、制作会社への外注費を抑えながら、問い合わせが増えるホームページに近づけることができます。まずは本記事のプロンプトをコピーして、自社の情報を入れて試してみてください。
ホームページのAI活用・集客改善についてのご相談はこちら
「ChatGPTを活用したホームページ改善を試したいが、何から始めればいいかわからない」「社員にAI活用スキルを身につけさせたい」という企業様は、お気軽にご相談ください。ホームページ改善のAI活用サポートから、社員研修・助成金活用まで、ワンストップで対応します。
