3章 AIと描く！Webサイトの骨格設計

INDEX

前の章に戻る次の章に進む

3章 AIと描く！Webサイトの骨格設計

この章の目安学習時間：90分

この章で到達できるゴール：

AIとの対話を通じて、Webサイト全体のページ構成（サイトマップ）を作成できる。
各ページに必要なコンテンツ要素を洗い出し、ワイヤーフレームの素案を作成できる。

【3-1】サイト全体の地図（サイトマップ）を作る

目安の学習時間：30分

サイトの全ページ構成をAIと決めよう

2章で要件が明確になったら、次に行うのはサイト全体のページ構成、すなわちサイトマップの作成です。サイトマップは、Webサイトの全体像を把握するための「地図」の役割を果たします。

これもAIに任せてみましょう。2章からのチャットを続けたまま、次のプロンプトを入力します。

プロンプト例：サイトマップの作成

ありがとうございます。明確になった要件を基に、この「焼きたてパン屋さん」の公式サイトに必要なページ構成を、階層がわかるサイトマップとして提案してください。インデントを使ったツリー構造で出力してください。

AIによる要件分析と技術設計 3-1

TOPページ
├── 商品紹介
│   ├── 食パン
│   ├── 菓子パン
│   ├── 総菜パン
│   └── その他おすすめ商品
├── 店舗情報
│   ├── 店舗概要
│   ├── 住所・地図（Googleマップ埋め込み）
│   ├── 営業時間・定休日
│   └── お問い合わせ方法
├── こだわり
│   ├── 素材へのこだわり
│   ├── 製法・焼き方の特長
│   └── スタッフの想い・ストーリー
├── お知らせ（ブログ形式）
│   ├── 新商品のお知らせ
│   ├── 季節限定商品の紹介
│   ├── イベント情報
│   └── お店からのお知らせ
├── SNS連携
│   └── Instagram投稿ギャラリー（最新投稿自動表示）
├── お問い合わせ（フォーム）
│   └── 一般お問い合わせ
│   └── 取材・業者様向けお問い合わせ
└── （将来追加）オンラインショップ
    ├── 商品一覧
    ├── カート機能
    ├── 決済ページ
    └── 注文完了ページ

出力例

この指示により、AIはトップページを頂点とし、その下にどのようなページがぶら下がるのかを、視覚的に分かりやすいツリー構造で提案してくれます。
これにより、サイトに必要なページが網羅されているか、階層構造は適切かを一目で確認できます。

練習問題

問題
AIに「個人のポートフォリオサイトに必要なページ構成を、サイトマップとして提案してください」と指示してみましょう。どのようなページが必要か、AIがどのように構造化するかを確認してください。一般的なAIツールや、WEBCOACH先生に指示しても問題ありません。

解答例
AIは、ポートフォリオサイトの一般的な構成を理解しているため、以下のようなツリー構造のサイトマップを生成するはずです。

トップページ (Home)
自己紹介 (About Me)
実績紹介 (Works / Portfolio)
- 実績詳細ページA
- 実績詳細ページB
スキル一覧 (Skills)
お問い合わせ (Contact)
（場合によっては）ブログ (Blog)
- 記事詳細ページ

【3-2】各ページの骨組み（ワイヤーフレーム）を作る

目安の学習時間：30分

なぜこの順番？刺さる配置の秘密

サイト全体の地図（サイトマップ）ができたら、今度は各ページの中身、つまり情報をどのような順番で配置するかを決めていきます。この骨組みの設計図をワイヤーフレームと呼びます。
情報の順番は、ユーザーの満足度に直結する非常に重要な要素です。
一般的に、Webサイトを閲覧するユーザーの視線は、アルファベットの「Z」や「F」の形に動くと言われています。

ユーザーはこう見ている！視線誘導の2大法則

キーメッセージ: ユーザーの『見たい場所』に、『見せたい情報』を置こう。

Zの法則 (ページ全体をざっと見る時)

視線が左上→右上→左下→右下と「Z」の形に動く傾向です。重要な要素は四隅に配置するのが効果的です。

左上：ロゴ、サイト名など最も重要なアイデンティティ
右上：お問い合わせ、会員登録などゴールとなるアクション
右下：コピーライト、次への導線など補足情報

Fの法則 (文章やリストを流し読みする時)

視線は左上から右へ、次に少し下の行を左から右へと動き、その後は左端を縦に流し読みします。「F」の形に注目が集まります。

結論・要点：文章や説明文の冒頭に書く。
キーワード：各段落やリスト項目の先頭に配置する。

この法則に基づき、最も伝えたいこと（キャッチコピーやメインビジュアル）はページの最上部に、次いで重要な情報をその下に配置していくのが情報設計の基本です。

AIと作るワイヤーフレームの素案

この情報設計の基本を踏まえた上で、AIにトップページの構成案を考えてもらいましょう。
ここでのポイントは、「誰に」「何を伝えたいか」という目的をAIに再度インプットすることです。

プロンプト例：ワイヤーフレーム素案の作成

このベーカリーサイトのターゲットは「地域のファミリー層」です。彼らがサイトを訪れた際に「このお店に行ってみたい！」と感じるような、トップページに掲載すべきコンテンツ要素を、ユーザーが上から見るであろう適切な順番でリストアップしてください。

AIによる要件分析と技術設計 3-2

AIは、一般的なWebサイトの構成と、与えられたターゲット情報を基に、「①メインビジュアル」「②お店のコンセプト」「③こだわりパンの紹介」「④お客様の声」「⑤店舗情報」といった、説得力のある情報の流れを提案してくれます。
このAIの提案を基に、より詳細な構成を検討していくのです。

【3-3】3章 -章末課題- [トップページの骨格を設計する]

目安の学習時間：30分

問題

「焼きたてパン屋さん」のサイトマップと、本章で学んだ情報設計の基本を踏まえ、AIと協力して「トップページ」のワイヤーフレーム（コンテンツ要素の構成案）を作成してください。

解答手順

操作手順

これまでの「焼きたてパン屋さん」に関するやり取りを行っているAIのチャットを続けます。
プロンプト「このベーカリーサイトのトップページに掲載すべきコンテンツを、ターゲットである地域のファミリー層が魅力を感じるような順番でリストアップしてください。各項目で何を伝えるべきかの簡単な説明も添えてください。」を入力します。
AIが生成したリスト（例：1. メインビジュアル: 焼きたてのパンが並ぶ魅力的な写真で、食欲をそそる。 2. お知らせ: 新商品や季節限定キャンペーンの情報を掲載し、再来店を促す…など）を確認します。
生成されたリストの順番は適切か、情報設計の基本に沿っているか、要件定義書にある必須要素は漏れていないかなどを検討します。もし修正が必要なら、「お客様の声をもう少し上の方で見せたいです。どの項目の後に入れるのが自然でしょうか？」のように、対話形式でAIに相談しながら修正します。
完成した構成案を、課題として提出します。

この章のまとめ

これで「3章：AIと描く！Webサイトの骨格設計」の解説を終わります。

要件という「テキスト情報」から、サイトマップやワイヤーフレームという「構造設計図」を生み出すプロセスを学びました。骨格がしっかり固まれば、実装の半分は終わったようなものです。

次の章では、この設計図を基にさらに具体的な実装の準備、すなわち、HTMLの構造設計やCSSの設計方針、そしてサイトに魂を吹き込むコピーライティングをAIと共に行っていきます。

前の章に戻る次の章に進む