AIでワイヤーフレームとサイト構成を作る方法｜サイトマップから画面の骨組みまで

Webサイトを作り直したいと思っても、「どんなページが必要か」「トップページに何をどの順番で載せるか」を最初に決めるのは意外と大変です。制作会社に相談する前に自分たちの考えを整理しておきたいけれど、白紙から構成を考えるのは時間がかかる、という声はよく聞きます。

こうした最初の骨組みづくりは、生成AIが得意とする作業のひとつです。ただし、AIに丸投げすると「どの会社にも当てはまる無難な構成」になりがちです。

この記事では、AIを使ってサイト構成（サイトマップ）とワイヤーフレームのたたき台を作る手順、プロンプト例、人が判断すべきポイントを順番に解説します。

サイト構成とワイヤーフレームの違い

最初に用語を整理しておきます。どちらも「デザインの前段階」で作るものですが、役割が異なります。

ワイヤーフレームとは、色や写真を入れずに、見出し・文章・ボタン・画像の位置だけを箱で示した設計図のことです。見た目の好みに引っ張られずに「何を伝えるか」に集中できるのが利点です。

AIに渡す前に用意する3つの情報

AIの出力の質は、渡す情報の質でほぼ決まります。次の3つを箇条書きでよいので用意しておきましょう。

• サイトの目的：問い合わせを増やしたい、採用応募を増やしたい、既存顧客向けの情報を整理したい、など。1つか2つに絞ります。
• 主な読者：誰が、どんな状況でサイトを見に来るのか。例えば「初めて外注を検討している総務担当者が、比較のために3〜4社のサイトを見ている」のように具体的に書きます。
• 自社の材料：サービス内容、強み、実績の種類、よく受ける質問、現行サイトのページ一覧など。

特に3つ目の「自社の材料」がないと、AIは一般論で埋めてしまいます。現行サイトがある場合は、ページ一覧とアクセスの多いページを伝えるだけでも出力が変わります。なお、社外秘の情報や個人情報は入力しないよう、社内ルールに沿って扱ってください。

AIでサイト構成とワイヤーフレームを作る手順

一度に全部を作らせるより、段階を分けて対話するほうが修正しやすくなります。目安として次の順番で進めます。

1. サイトマップ案を出してもらう：目的・読者・材料を渡し、必要なページと階層を一覧にしてもらいます。
2. 不要なページを削る：AIは網羅的に出しがちです。更新できない「お知らせ」や、材料のない「導入事例」は削るか後回しにします。
3. 重要ページを3つ選ぶ：トップ、サービス紹介、問い合わせなど、目的に直結するページを先に作り込みます。
4. ページごとのセクション構成を出してもらう：上から順に、どのブロックに何を書くかを文章で出してもらいます。
5. 読者の動きで検証する：「この読者はどこで不安を感じ、どこで問い合わせを決めるか」をAIに説明させ、抜けている情報を探します。
6. 図に起こす：最終的な箱の配置は、手書きやFigma、スライドツールなどで人が描きます。AIで画像を作れる場合も、あくまで参考程度にとどめます。

そのまま使えるプロンプト例

• 「あなたはWebサイトの情報設計の担当者です。以下の目的・読者・自社情報をもとに、コーポレートサイトのサイトマップ案を階層つきの一覧で出してください。各ページに『このページがないと読者が困ること』を1行添えてください。」
• 「トップページのセクション構成を上から順に7〜9個で提案してください。各セクションについて、目的、載せる内容、必要な素材（写真・数字・文章）を表にしてください。」
• 「この構成を、比較検討中の担当者の立場で上から読んだとき、疑問や不安が残る箇所を指摘してください。」

3つ目のように、AIに「読者役」をさせて構成を点検させる使い方は効果的です。作る役と点検する役を分けると、抜け漏れに気づきやすくなります。読者役は「急いでいる経営者」「慎重な購買担当者」など複数設定すると、見落としがさらに減ります。出てきた指摘はすべて採用する必要はなく、自社の目的に照らして取捨選択してください。

人が必ず判断すべきポイント

AIが出す構成案は、もっともらしく整っているため、そのまま採用したくなります。しかし次の点は人が判断してください。

• 載せる材料が本当にあるか：「お客様の声」「数字で見る実績」などのセクションは、実際の材料がなければ空洞になります。架空の内容で埋めることは避けます。
• 更新し続けられるか：ブログやお知らせは、更新体制がないと古い日付が残り、かえって印象を下げます。
• 優先順位が自社の戦略と合っているか：AIは一般的な順番で並べます。自社が一番売りたいサービスが目立つ位置にあるかを確認します。
• 他社と同じ構成になっていないか：業界の定番構成は分かりやすい反面、差別化しにくくなります。自社ならではの情報を置く場所を意識的に作ります。

また、AIの提案には事実と異なる前提（業界の慣習や法的な表示義務など）が混ざることがあります。気になる点は担当者や専門家に確認しましょう。

制作会社に渡すときのまとめ方

AIで作ったたたき台は、そのまま「完成した設計」として渡すのではなく、「自社の考えを整理した資料」として渡すのがおすすめです。制作会社はプロの視点で構成を見直してくれるため、意図が伝わる形にしておくことが大切です。

• サイトマップ（ページ一覧と階層）
• 重要ページのセクション構成と、それぞれの意図
• 「ここは必ず入れたい」「ここは迷っている」の区別
• 手元にある素材と、まだない素材の一覧

このように整理しておくと、打ち合わせの時間を「何を作るか」の議論ではなく「どう良くするか」の議論に使えます。内製する場合も、この資料がそのまま制作の指示書になります。

まとめ

AIはサイト構成やワイヤーフレームのたたき台づくりを大きく効率化してくれますが、材料の有無や優先順位、自社らしさの判断は人の役割です。段階を分けて対話し、AIに読者役をさせて点検し、最終的な図は人が描くという流れを意識してください。

まずは、サイトの目的・主な読者・自社の材料の3点を箇条書きにしてみましょう。それをAIに渡してサイトマップ案を1つ出してもらうところから始めれば、30分ほどで最初のたたき台が手元にそろうはずです。