ここまで決めたワイヤー・配色・画像をAIに渡して、ブラウザで見られる1枚のページ（HTMLとCSS）を作れます。
中身と順番はそのまま。色・文字・余白・画像が足されて、完成デザインになります
HTMLとCSSって何？
- HTML：ページの中身と骨組み（見出し・文章・画像・ボタン）を書く言葉
- CSS：色・文字の大きさ・並び方など、見た目を書く言葉
このレッスンでは、コードを自分で書いたり、読めるようになったりする必要はありません。AIが書いたコードを、写して、保存して、開くだけです。
4つの手順と、直すときのくり返し
やってみよう：AIにページを作ってもらう
【中身（上から順に）】
1. ファーストビュー：見出し「朝いちばんの、やさしいパン。」と「パンを予約する」ボタン
2. こだわり：天然酵母で、ゆっくり焼いていること
3. 人気のパン：山食パン・くるみパン・バゲットの3つ
4. お店の場所と営業時間（仮の文章でOK）
5. ご予約ボタン
【色】背景 #F6EFE3、文字 #5B4330、ボタン #7A8B5A
【見出しのフォント】明朝体
【ルール】
・CSSも1つのファイルの中にまとめる
・画像はまだ入れず、灰色の四角で場所だけ示す
・スマホ（横幅360px）でも崩れないようにする
・Mac：テキストエディットで新しい書類を開き、メニューの「フォーマット」→「標準テキストにする」を選んでから貼りつけます。保存のときに「.htmlを使用」をえらびます。
・Windows：メモ帳に貼りつけ、「名前を付けて保存」で、ファイル名を index.html にします。
サービスによっては、チャットの画面のまま、見た目のプレビュー（見本の表示）が出ることもあります。その場合も、最後は保存して、自分のブラウザで確かめましょう。
やってみよう：言葉で直していく
例：「ボタンをもう少し大きく、角を丸くしてください」「見出しと文章の間を、もっと空けてください」
これをくり返すと、ワイヤーが少しずつ完成デザインに近づきます。
左：ワイヤーフレーム 右：完成デザイン（架空のお店の見本）
画像を入れたいときは、レッスン4で作った画像を index.html と同じ場所に置き、「灰色の四角を、bread.jpg という画像に差しかえて」のように、ファイルの名前を伝えます。
Figmaには、言葉で画面やコードを作るAIの機能（Figma Make）もあります。使える範囲や回数はプランによって違うことがあるので、使う前に公式の案内で確かめてください。
つまずきやすいところ
こうなったら：開いても、コードが文字のまま表示される
こうする：「標準テキスト」にしてから保存したか、ファイル名が index.html.txt になっていないかを確かめ、保存しなおします。
こうなったら：日本語が、記号のような文字に化けて表示される
こうする：「文字化けしないように、文字コードをUTF-8にして」とAIに伝えて、コードを書きなおしてもらいます。
こうなったら：コードが途中で切れている
こうする：「続きを書いて」と送るか、「もう少し短いコードで、もう一度全部書いて」とお願いします。
こうなったら：スマホで見ると、はみ出したり重なったりする
こうする：「横幅360pxのスマホで、はみ出さないように直して」と、そのまま伝えます。
まとめ
- HTMLは中身と骨組み、CSSは見た目を書く言葉。書くのはAIに任せられる
- お願い → コピー → index.html で保存 → ブラウザで開く、の4手順
- 直したいことは1つずつ伝え、まるごと貼りかえて確かめる
確認クイズ
Q1. 色・文字の大きさ・並び方など、見た目を書く言葉は？
Q2. 直したいところが3つあるとき、どう伝えるとうまくいきやすい？
こたえ
Q1 CSSです。中身と骨組みを書く言葉はHTMLです。
Q2 1つずつ伝えて、そのたびにブラウザで確かめます。どこで変わったかが分かり、戻しやすくなります。
次のレッスンでは、仕事でAIを使うときの注意と、今回の作品をポートフォリオに生かす方法を見ていきます。