AIと話しながら、トップページの中身の順番（構成）と、見出し・文章のたたき台を作り、ワイヤーフレームにできます。
お願いすると、ページの中身の順番の「たたき台」が出てきます（画面はイメージです）
2つの言葉をおさえよう
- 構成（サイトマップ）：サイトにどんなページがあり、トップページに何をどの順番で載せるか。
- ワイヤーフレーム：色や写真を入れず、線と四角だけで描いた「ページの設計図」。
どちらも、白紙から一人で考えると手が止まりやすいところです。ここをAIに手伝ってもらいます。
お願いの前に、4つの情報をメモする
AIは、渡された情報の分だけ考えてくれます。「パン屋のホームページの構成を考えて」だけだと、どのお店にも当てはまる案になります。
上：ざっくりしたお願い 下：4つの情報をそえたお願い
次の4つを、メモ帳に書き出してから始めましょう。
- お店（会社・教室）のこと
- 見てほしい人
- 見た人に、してほしいこと（予約・問い合わせ・購入など）
- サイトの大きさ（ページ数の目安）
やってみよう：構成を作る
・お店：天然酵母の、小さなパン屋「むぎのいえ」
・見てほしい人：近所に住む30〜40代の家族
・してほしいこと：パンを予約してもらう
・大きさ：トップページ＋4ページくらい
ページの一覧と、トップページに載せる中身を上から順に5〜6個、それぞれ1行の説明つきで出してください。
例：「スタッフ紹介は要りません。かわりに、予約の流れを入れてください」
構成の例。トップページの中身の順番が、ワイヤーフレームの元になります
やってみよう：見出しと文章のたたき台を作る
構成が決まったら、続けて同じチャットで、ワイヤーフレームに入れる言葉をお願いします。
それぞれの区切りに入れる「見出し」と「短い文章」の案を出してください。
・見出しは15文字以内
・文章は2行以内
・近所の家族に話しかけるような、やさしい言葉で
AIは整理役、決めるのはあなたです。営業時間や値段など、お店の事実は、AIが書いたものをそのまま使わず、必ずお客さまに確かめます。
ワイヤーを作りながら直したくなったら、スクリーンショットを撮ってAIに渡し、「この区切りの見出しを、もっと短くして」のように相談することもできます（画像を受け取れるかは、サービスによって違います）。
つまずきやすいところ
こうなったら：案がたくさん出てきて、選べない
こうする：「いちばん大事なものから5つにしぼって」と送ります。
こうなったら：どのお店にも当てはまる、ありきたりな案になる
こうする：4つの情報のどれかが足りていません。お店ならではのこと（例：朝6時から焼いている）を1つ足して、もう一度お願いします。
こうなったら：文章が硬くて、お店の雰囲気に合わない
こうする：「話しかけるような言葉で」「◯◯な人に向けて」と、読む人を書き足して言い直してもらいます。
まとめ
- お願いの前に「お店・見てほしい人・してほしいこと・大きさ」の4つをメモする
- 構成 → 見出しと文章、の順にAIへお願いすると、たたき台がすぐにできる
- たたき台を線と四角で並べたものが、ワイヤーフレーム
確認クイズ
Q1. 構成をお願いするときに、そえるとよい4つの情報は？
Q2. AIが書いた営業時間を、そのままワイヤーに入れてよい？
こたえ
Q1 お店のこと・見てほしい人・してほしいこと・サイトの大きさ、の4つです。
Q2 いいえ。お店の事実は、AIが知らないことです。必ずお客さまに確かめます。
次のレッスンでは、このワイヤーに合う配色・フォント・雰囲気を、AIに相談します。