ChatGPTでサイト構成案を作る方法
Webサイトを作る前に、ChatGPTで構成案を作っておくと、必要なページや導線を整理しやすくなります。いきなりデザインやコードを作るより、先に「どんなページを、どんな順番で見せるか」を決める方が、あとからの修正が少なくなります。
この記事では、ChatGPTにサイト構成案を作ってもらう時に伝えるべき情報、出してもらう形式、使いやすい依頼文テンプレートをまとめます。
サイト構成案を作る流れ
目的と読者を先に決め、必要ページ、導線、ナビゲーション、優先順位へ順番に分解します。
先に結論
ChatGPTでサイト構成案を作る時は、次の7つを入れて依頼すると実用的な案になりやすいです。
- サイトの目的
- 想定読者やお客さん
- 最終的に取ってほしい行動
- 必要そうなページ
- 各ページの役割
- ナビゲーションとフッターの候補
- 最初に作るべきページの優先順位
サイト構成案とは何か
サイト構成案とは、Webサイトに必要なページ、ページ同士のつながり、メニューに出す項目、読者を問い合わせや購入へ進める流れをまとめた設計メモです。
見た目のデザインではなく、サイトの骨組みを決める作業です。ここが整理されていると、トップページの文章、サービス紹介、FAQ、問い合わせページなどを作る時も迷いにくくなります。
ChatGPTに伝える情報
「サイト構成を考えて」だけでは、一般的な案になりやすいです。自分のサイトに合う構成にするには、最初に条件を渡します。
| 伝えること | 例 |
|---|---|
| サイトの目的 | 問い合わせを増やしたい、記事から集客したい |
| 想定読者 | Web制作に慣れていない個人事業主 |
| 扱う内容 | サービス、料金、事例、FAQ、ブログ記事 |
| 最終行動 | 問い合わせ、予約、購入、資料請求 |
| 避けたいこと | ページを増やしすぎない、専門用語を使いすぎない |
まずはページ一覧を出してもらう
最初の出力は、ページ一覧にすると扱いやすいです。トップページ、サービスページ、料金、FAQ、問い合わせなど、必要なページを候補として出してもらいます。
この段階では、完璧な答えを求めるより「足りないページ」と「多すぎるページ」を見つける意識で確認します。
- トップページ
- サービス紹介ページ
- 料金ページ
- 実績・事例ページ
- FAQページ
- 問い合わせページ
- 記事一覧ページ
- カテゴリ別記事ページ
各ページの役割まで作る
ページ名だけでは、あとで文章を作る時に迷います。ChatGPTには、各ページの役割、載せる内容、次に誘導するページまで表にしてもらうと便利です。
| ページ | 役割 | 次に誘導する場所 |
|---|---|---|
| トップページ | 全体像を伝え、主要ページへ案内する | サービス、料金、問い合わせ |
| サービス紹介 | 何をしてくれるサイトかを詳しく伝える | 料金、事例、問い合わせ |
| FAQ | 不安や疑問を先に解消する | 問い合わせ |
| 記事一覧 | 検索から来た読者を目的別に案内する | 関連記事、サービスページ |
導線を決める
構成案で大事なのは、ページを並べることだけではありません。読者がどこから入り、どのページを読み、最後に何をするのかを決めます。
- トップページから重要ページへ進める
- 記事から関連する記事やサービスページへ進める
- 料金ページからFAQや問い合わせへ進める
- FAQから問い合わせへ進める
- 全ページから迷わず問い合わせに進める
ナビゲーションとフッターも出してもらう
サイト構成案を作る時は、メニューに何を出すかも同時に決めます。すべてのページを上部メニューに入れると見づらくなるため、よく使うページだけを残します。
| 場所 | 入れる候補 |
|---|---|
| 上部ナビ | ホーム、サービス、料金、事例、FAQ、問い合わせ |
| フッター | 会社概要、プライバシーポリシー、サイトマップ、問い合わせ |
| 記事内リンク | 関連記事、次に読む記事、チェックリスト |
サイト構成案を作る依頼文テンプレート
次のテンプレートを使うと、ページ一覧だけでなく、役割や導線まで含めた構成案を出してもらえます。
Webサイトの構成案を作ってください。
いきなりデザインやコードは作らず、まずページ構成と導線を整理してください。
サイトの目的：
想定読者：
扱うサービス・テーマ：
最終的に取ってほしい行動：
すでに必要だと思っているページ：
避けたいこと：
出してほしい内容：
1. 必要なページ一覧
2. 各ページの役割
3. 各ページに載せる主な内容
4. 読者の導線
5. 上部ナビゲーション案
6. フッターリンク案
7. 最初に作るべきページの優先順位
初心者があとから更新しやすい構成にしてください。ページ役割表を作る依頼文
すでにページ候補がある場合は、次のように表にしてもらいます。
次のページ候補を、サイト構成表に整理してください。
ページ候補：
- トップページ
- サービス紹介
- 料金
- 実績
- FAQ
- 問い合わせ
- 記事一覧
表に入れてほしい列：
- ページ名
- そのページの目的
- 読者が知りたいこと
- 載せるべき内容
- 次に誘導するページ
- 優先度
ページが多すぎる場合は、減らす案も出してください。ナビゲーション案を作る依頼文
メニューが増えすぎると、読者は迷います。上部ナビとフッターを分けて考えるように頼むと整理しやすいです。
このサイト構成に合うナビゲーション案を作ってください。
条件：
- 上部ナビは多くても6項目まで
- スマホでも分かりやすい名前にする
- 重要度が低いリンクはフッターへ回す
- 問い合わせへの導線は分かりやすくする
出してほしい内容：
- 上部ナビの項目
- フッターリンクの項目
- 記事ページ内に置く内部リンク案
- メニュー名を短くする案ChatGPTの案をそのまま使わない
ChatGPTの構成案は、最初のたたき台として使います。そのまま採用するのではなく、自分のサイトに合うか確認します。
- 今すぐ作れないページが混ざっていないか
- 問い合わせや購入までの流れがあるか
- 似たページが重複していないか
- 記事一覧やカテゴリが複雑すぎないか
- スマホで迷わないメニュー量か
- あとから更新しやすい構成か
Codexに渡す前に整理すること
ChatGPTで構成案を作った後、Codexに実装を頼む場合は、構成案をそのまま貼るだけでなく、どのページから作るかを指定すると進めやすくなります。
- 最初に作るページを決める
- 既存サイトに追加するのか新規サイトなのかを書く
- ファイル名の希望を書く
- 共通ナビに追加するかを書く
- 内部リンクをどこへ入れるかを書く
- ローカル表示確認まで頼む
構成案チェックリスト
- サイトの目的が1文で言える
- 想定読者が具体的になっている
- 必要ページと不要ページを分けた
- 各ページの役割が決まっている
- 問い合わせや購入への導線がある
- 上部ナビが多すぎない
- フッターに補助リンクを置ける
- 最初に作るページの順番が決まっている