こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
あなたは最近、AIを使ってWebサイトを作ろうとしたことはありますか？
ChatGPTやClaudeなどのAIツールに「サイトを作って」と頼んだとき、出てきた結果を見て「あれ、なんか違う…」と感じた経験はないでしょうか。
実はその「違和感」の正体は、ほとんどの場合「1ページにすべての情報が詰め込まれている」という問題から来ています。
トップページがあって、会社概要があって、サービス紹介があって、お問い合わせフォームもある。
それらがすべて1枚のHTMLファイルの中にスクロールするだけで並んでいる状態。
見た目はそれっぽく整っているけれど、実際にはメニューをクリックしてもページが切り替わらず、URLも変わらない。
Googleからすれば「このサイトには1ページしか存在しない」と判断されてしまい、検索結果で評価されるべき各ページが存在しないも同然になります。
私自身、浜松市内のクライアントさんからご相談を受けてサイトを確認したとき、まさにこの状態になっているケースを何度も見てきました。
「AIで作ったんですが、なんか検索に出てこなくて…」という悩みの、原因のほぼ100%がこのページ構成の問題です。
でも安心してください。
解決策はとてもシンプルです。
AIへの指示（プロンプト）に、たった1語付け加えるだけで状況は劇的に変わります。
「サイトを作って」ではなく、「複数ページ構成でサイトを作って」と言うだけでいい。
これだけで、AIはメニューも、ページ間のリンクも、それぞれのHTMLファイルも、自動的に考えて出力してくれるようになります。
この記事では、なぜAIはデフォルトで1ページ構成を選びがちなのかという根本的な理由から、複数ページ構成を正しく指示するプロンプトの書き方、さらにSEOに強いサイト構造を作るための具体的なプロンプトテンプレートまで、浜松市でWEBデザイナーとして現場経験を積んできた私が丁寧に解説します。
最後まで読むと、AIを使って検索エンジンにも訪問者にも「わかりやすい」複数ページ構成のサイトを自分で作れるようになります。
ぜひ最後までお付き合いください。
そもそもなぜAIは1ページ構成を選びがちなのか
まず前提として、AIがなぜ1ページ構成のサイトを出力しやすいのかを理解しておくことが重要です。
ここを理解しないまま対策だけ覚えても、また別のシーンで同じ失敗を繰り返してしまいます。
AIは「完結した回答」を1つの出力でまとめようとする
AIというシステムは本来、「質問に対して1回の回答で完結させる」ことを最優先に設計されています。
これはチャットというインターフェースの性質上、自然なことです。
「サイトを作って」という依頼を受けたAIは、その依頼に応えるために必要なすべての情報を1つの出力にまとめようとします。
トップページの内容も、会社概要も、サービス内容も、お問い合わせ先も、すべてを1つのHTMLファイルにまとめることで「依頼に答えた」と判断するわけです。
これはAIが怠けているのではなく、分割して複数回答するという発想がデフォルトでは働かないことによるものです。
「サイト」という言葉の解釈が人間とAIでズレている
もう一つの原因は、「サイト」という言葉に対する解釈の違いです。
人間が「サイト」と言うとき、多くの人は「複数のページが集まったもの」をイメージします。
トップページをクリックするとメニューがあって、それぞれのページに遷移できるという構造を、無意識に想定しています。
しかしAIにとって「サイト」は、必ずしも複数ページを意味しません。
指示の中に「複数ページ」「ページを分けて」「別ファイルで」といった明示的な言葉がなければ、AIは1つのHTMLファイルで完結する形を選びます。
この認識のズレが、多くの「なんか違う」サイトを生み出しています。
シングルページアプリケーションとの混同も原因の一つ
さらに技術的な観点から言うと、現代のWEB開発では「SPA（シングルページアプリケーション）」という1ページで完結するサイト形式も実際に存在します。
AIはこのSPAの概念も学習しているため、「1ページ＝正しい選択肢のひとつ」として認識しています。
明示的な指示がない場合、AIはSPA的なアプローチを選ぶことで「効率的で現代的な実装をした」と判断してしまうことがあります。
これが見た目はスムーズなのに、SEO的にはまったく機能しないサイトが生まれる技術的な背景です。
AIが1ページ構成を選ぶのは仕様であり、指示で変えられる問題です。
1ページ構成がSEOと離脱率に与える深刻なダメージ
AIが1ページ構成を出力しがちな理由がわかりました。
次に、その1ページ構成がどれほどのデメリットをもたらすかを具体的に確認しておきましょう。
Googleはページ単位でサイトを評価する
Googleの検索アルゴリズムは、基本的に「ページ単位」で評価を行います。
「会社概要」というページがあれば、Googleは「このURLには会社概要の情報がある」と認識して適切なキーワードでインデックスします。
「サービス紹介」というページがあれば、そのサービスに関連する検索クエリで表示される可能性が生まれます。
しかし1ページ構成の場合、Googleがインデックスできるのはそのたった1つのURLだけです。
トップページのURLしかなければ、「会社概要 浜松市」や「Webデザイン 浜松市 料金」といったキーワードで検索されても、そのページが上位に来る可能性は極めて低くなります。
インデックスされるページが少ないほど、検索からの流入機会も少なくなる。
これが1ページ構成の最大のSEOデメリットです。
訪問者は「どこに何があるか」わからず迷って離脱する
訪問者の立場から考えると、さらに深刻な問題があります。
1ページ構成のサイトでは、目的の情報を見つけるためにひたすら上下にスクロールし続けなければなりません。
スマートフォンでの閲覧が主流の現代において、延々とスクロールするUXは訪問者の離脱率を大幅に上げます。
実際、Googleのデータによれば、ページの読み込み速度が3秒を超えると離脱率は53%に達すると言われていますが、情報の「見つけにくさ」も同様に離脱を招きます。
「料金を見たいのに、どこまでスクロールすればあるの？」という状況は、ユーザー体験として最悪です。
2. 各セクションに固有のURLがないため、特定のページをシェアしたり、リンクを貼ったりしにくい。
3. 訪問者がスクロールで迷子になり、直帰率・離脱率が上昇する。
内部リンク構造がないと検索エンジンはサイトを理解できない
SEOの観点でもう一つ重要なのが「内部リンク」の存在です。
複数ページ構成のサイトでは、各ページが互いにリンクで繋がっています。
トップページからサービスページへのリンク、サービスページからお問い合わせページへのリンク、ブログ記事からサービスページへのリンク、といった具合です。
この内部リンクの網の目が、Googleのクローラーが「このサイトはどういう構造か」を理解するための道標になります。
1ページ構成ではこの道標が存在しないため、クローラーが深く探索する必要がなく、結果的にサイトの評価が低くなりがちです。
1ページ構成はSEOにも離脱率にも致命的なダメージを与えています。
「複数ページ構成で」の1語が生み出す劇的な変化
ではいよいよ、具体的な解決策に入ります。
先ほど述べたとおり、AIへのプロンプトに「複数ページ構成で」という言葉を加えるだけで、出力結果は大きく変わります。
プロンプトの変化とAIの出力の変化を比較する
実際に私がクライアントの案件で試したときの比較をご紹介します。
変更前のプロンプト：
浜松市のWEBデザイン会社のサイトをHTMLで作ってください。
トップ、会社概要、サービス、お問い合わせの内容を含めてください。変更後のプロンプト：
浜松市のWEBデザイン会社のサイトを複数ページ構成でHTMLで作ってください。
index.html、about.html、service.html、contact.htmlの4ファイルに分けてください。
各ページに共通のナビゲーションメニューを設置し、ページ間のリンクを正しく設定してください。変更前では、すべての内容が詰め込まれた1つのHTMLファイルが出力されました。
変更後では、4つの独立したHTMLファイルが出力され、それぞれにナビゲーションメニューが含まれ、ページ間のリンクも正しく設定されていました。
たった数語の追加で、出力の品質がまったく別物になったのです。
AIが自動で考えてくれるようになる要素
「複数ページ構成で」と指示すると、AIが自動的に考慮してくれる要素が大幅に増えます。
- 各ページに固有のHTMLファイル名（index.html、about.htmlなど）を割り当てる
- 全ページ共通のナビゲーションメニューを設計する
- メニューの各項目に正しいリンク先（href属性）を設定する
- 現在のページをアクティブ状態で表示するスタイルを適用する
- フッターに共通のサイトマップリンクやコンタクト情報を入れる
- 各ページのtitleタグやdescriptionタグをページ内容に合わせて設定する
これらはすべて、1語の追加によってAIが「当然考えるべきこと」として処理してくれるようになる要素です。
逆に言えば、この1語がなければAIはこれらを一切考慮しないということでもあります。
ページ数を明示するとさらに精度が上がる
「複数ページ構成で」という指示に加えて、ページ数と各ページの名前を明示すると、AIの出力精度はさらに高まります。
「5ページ構成で」「以下の6ページで構成してください」といった形で、具体的な数字を伝えることが重要です。
あいまいな指示ではAIは2〜3ページ程度の最小構成を選びがちですが、「6ページ構成で」と言えばきちんと6ページ分の設計をしてくれます。
「複数ページ構成で」の1語が、AIの出力をまったく別次元に引き上げます。
SEOに強いサイト構造をAIに作らせるプロンプトの書き方
「複数ページ構成」の指示ができるようになったら、次のステップとしてSEOを意識したプロンプトの書き方を身につけましょう。
単に複数ページに分けるだけでなく、検索エンジンに評価される構造を意識することが大切です。
ページ構成はSEOの目的から逆算して設計する
SEOに強いサイトは、「どのキーワードで誰に来てほしいか」から逆算してページ構成を決めています。
例えば浜松市のWEBデザイン会社なら、狙いたいキーワードは「WEBデザイン 浜松市」「ホームページ制作 浜松市」「LP制作 浜松市」などが考えられます。
これらのキーワードごとに独立したページを用意することで、それぞれの検索クエリに対して最適化されたページが存在することになります。
AIへの指示の中に「各ページは以下のキーワードで最適化してください」と書き加えるだけで、AIはそのキーワードを意識したコンテンツを各ページに生成してくれます。
service.html → 「ホームページ制作 浜松市」で最適化するサービスページ
lp.html → 「LP制作 浜松市」で最適化するランディングページ制作紹介ページ
blog/ → 「Webデザイン ブログ」を狙うブログセクション
about.html → ブランド認知・EEATを高める会社概要ページ
contact.html → 「WEBデザイン 相談 浜松市」で集客するお問い合わせページ
AIに設定させるべきSEO要素を明示する
プロンプトの中に、AIに設定させたいSEO要素を箇条書きで明示しておくと、漏れなく対応してもらえます。
- 各ページにページ固有のtitleタグを設定する（60文字以内）
- 各ページにmeta descriptionを設定する（120文字前後）
- 各ページに1つのh1タグを設置し、ターゲットキーワードを含める
- 画像にはすべてalt属性を設定する
- 内部リンクはナビゲーション以外にも本文中にも設置する
- 各ページのURLはシンプルで意味がわかるスラッグにする
これらをプロンプトに含めておくだけで、AIは「SEOを意識したサイト構築のプロ」として振る舞ってくれます。
構造化データの指示もプロンプトに加える
少し上級者向けですが、構造化データ（Schema.org）の設置をプロンプトに含めるのも効果的です。
「LocalBusiness形式の構造化データをJSONLDで設置してください」と一言添えるだけで、AIはGoogleが推奨する形式の構造化データをheadタグ内に挿入してくれます。
構造化データがあると、検索結果にリッチスニペット（営業時間や住所、評価など）が表示されやすくなり、クリック率の向上につながります。
SEOを意識したプロンプトを書けば、AIはSEOの専門家として動いてくれます。
実際に使えるプロンプトテンプレート集
ここからは、実際にコピーして使えるプロンプトテンプレートをご紹介します。
私が浜松市のクライアント案件で実際に使い、効果を確認したものです。
基本テンプレート：複数ページ構成のビジネスサイト
[業種]の[事業者名]のホームページを複数ページ構成でHTMLとCSSで作成してください。
【ページ構成】
- index.html：トップページ（メインビジュアル、サービス概要、実績、CTA）
- service.html：サービス詳細ページ（料金表含む）
- about.html：会社概要・スタッフ紹介ページ
- works.html：制作実績・ポートフォリオページ
- contact.html：お問い合わせページ（フォーム含む）
【共通要件】
- 全ページに統一デザインのナビゲーションメニューを設置
- フッターは全ページ共通（住所・電話番号・SNSリンク）
- 現在のページをナビゲーションでハイライト表示
- レスポンシブデザイン対応（スマートフォン対応）
- 各ページに固有のtitleタグとmeta descriptionを設定
【SEO要件】
- ターゲットキーワード：[キーワード]
- 各ページのh1にキーワードを自然に含める
- 構造化データ（LocalBusiness）をJSONLDで設置応用テンプレート：ブログ機能付きのサイト
ブログやお知らせ機能も含めたい場合は、以下のテンプレートを活用してください。
[業種]のサイトをブログ機能付きの複数ページ構成でHTMLで作成してください。
【ページ構成（全7ファイル）】
- index.html：トップページ
- service.html：サービスページ
- about.html：会社概要ページ
- blog.html：ブログ一覧ページ
- blog-post.html：ブログ記事テンプレートページ（サンプル記事入り）
- faq.html：よくある質問ページ
- contact.html：お問い合わせページ
【ブログページの要件】
- 一覧ページはカード型レイアウトで記事サムネイル・タイトル・日付・カテゴリを表示
- 記事テンプレートにはパンくずリスト・関連記事セクションを設置
- カテゴリ別でフィルタリングできるUI
【内部リンク要件】
- トップページからブログ一覧ページへのリンク
- ブログ一覧から各記事へのリンク
- 各記事からサービスページへの誘導リンク確認用チェックリスト：出力されたコードを検証する方法
AIが出力したコードを受け取ったら、以下の項目で確認してください。
- HTMLファイルが指示した数だけ出力されているか
- 各ファイルのnaviゲーションメニューのhref属性が正しく設定されているか
- 各ページのtitleタグが固有のものになっているか
- meta descriptionが各ページに設置されているか
- h1タグが各ページに1つだけ存在するか
- 内部リンクが機能するか（ファイルパスが正しいか）
テンプレートをコピーして使い、出力後はチェックリストで必ず確認しましょう。
浜松市WEBデザイナーが現場で見てきたAI活用のリアル
ここまで理論的な解説をしてきましたが、実際の現場ではどんなことが起きているのか、私の体験も踏まえてご紹介します。
「AIで作ったのに集客できない」相談の共通原因
浜松市内の個人事業主や中小企業の方から「AIでサイトを作ったけど集客できない」というご相談をいただくことが増えています。
案件の内容を確認すると、ほぼ共通した原因が見えてきます。
最も多いのは、やはりこの1ページ構成問題です。
HTMLのソースを確認すると、すべてのコンテンツが1つのindex.htmlに詰め込まれていて、URLはドメイン直下しかない。
Googleサーチコンソールを見ると、インデックスされているページが1ページだけ。
「これでは検索からの流入は期待できません」とお伝えすると、「AIが作ったから大丈夫だと思っていた」というお言葉をいただくことがほとんどです。
2番目に多い原因は、各ページのタイトルタグがすべて同じになっている問題です。
AIが「サイト名 | トップページ」というタイトルをすべてのページに使ってしまっているケースがあります。
これもプロンプトに「各ページ固有のtitleタグを設定してください」と一言入れておけば防げます。
AIと人間の役割分担が成功の鍵
私がAIを活用した案件で感じているのは、「AIは優秀な制作アシスタントであり、ディレクションは人間が担う」という役割分担の重要性です。
プロンプトの設計、ページ構成の戦略、SEOのキーワード選定、ユーザー体験の設計——これらは依然として人間の専門知識が必要な領域です。
その設計をしっかり行い、AIへの指示を正確に伝えることができれば、AIは驚くほどの効率で実装作業を行ってくれます。
AIに「任せきり」にするのではなく、「明確に指示する」という姿勢がAI活用の成功の鍵です。
AIが担う：HTML/CSS実装、コーディング、画像alt設定、構造化データ記述、レスポンシブ対応
プロンプトエンジニアリングはWEBデザイナーの必須スキルになりつつある
浜松市のようなローカルエリアでも、WEBデザイナーとしての競争は年々激しくなっています。
その中で差別化の武器になるのが、AIを正しく使いこなすプロンプトエンジニアリングのスキルです。
「AIがあれば誰でもサイトが作れる時代」だからこそ、AIを効果的に動かすための知識と戦略を持っているかどうかが、プロとアマチュアを分ける境界線になってきています。
プロンプトへの1語の追加という小さなことの積み重ねが、クライアントに提供するサイトのクオリティに大きな差をもたらします。
AIへの指示設計こそが、これからのWEBデザイナーの核心スキルです。
よくある質問：AIサイト作成の疑問を解決する
Q：AIが作ったコードはそのまま使っても大丈夫ですか？
A：基本的には使えますが、必ず人間による確認と修正が必要です。
AIはコードを生成しますが、ビジネス的な文脈や地域特性、最新のアルゴリズム変化を完全に理解しているわけではありません。
特にお問い合わせフォームの送信機能、SSL対応、セキュリティ設定などはAIだけでは対応できない部分があります。
AIのコードを「ベース素材」として捉え、専門家が確認・調整することで初めて実用に耐えるサイトが完成します。
Q：WordPressなどのCMSとAIの連携はどうすればいい？
A：WordPressの場合は、AIに直接HTMLを出力させるのではなく、「テーマのfunctions.phpに追加するコード」「カスタムCSS」「ページビルダーで使うセクションの構成」などを指示する形が効果的です。
「WordPressのDiverテーマを使用している場合、各ページを固定ページとして作成し、メニューはWordPressのカスタムメニュー機能で設定する前提で、各ページのコンテンツとSEO設定を提案してください」といったプロンプトが有効です。
Q：AIに指示するページ数は何ページが適切ですか？
A：ビジネスの規模と目的によって異なりますが、最低でも5〜6ページ構成を推奨しています。
トップ、サービス、会社概要、実績・ポートフォリオ、FAQ、お問い合わせの6ページが基本形です。
SEOを積極的に狙うなら、サービスをカテゴリ別にさらに細分化した10〜15ページ構成が理想的です。
最初から完璧を目指す必要はなく、まず基本の5〜6ページで公開し、徐々にページを追加していくアプローチが現実的です。
AIへの疑問を解決しながら、正しい活用法を身につけることが大切です。
まとめ
ここまで読んでいただきありがとうございます。
今回の記事でお伝えしたことを整理すると、以下のとおりです。
- AIはデフォルトで1ページ構成を選ぶ。これはAIの設計上の特性であり、仕様です。
- 1ページ構成はSEOに致命的なダメージを与え、訪問者の離脱も招きます。
- プロンプトに「複数ページ構成で」という1語を加えるだけで、AIの出力は劇的に変わります。
- ページ数と各ページ名を明示し、SEO要件をプロンプトに含めることでさらに精度が上がります。
- AIはあくまで実装のアシスタントであり、戦略・設計・確認は人間が担う必要があります。
「AIで作ったのに検索で表示されない」「アクセスが来ない」という悩みの多くは、このページ構成の問題から来ています。
今日からプロンプトに「複数ページ構成で」を追加するだけで、あなたのAI活用は次のステージに進みます。
浜松市を拠点に活動するWEBデザイナーとして、今後もAI活用の最前線から、実践的な情報をお届けしていきます。
もしサイト制作についてご相談があれば、ぜひお気軽にお問い合わせください。
