2-2 自分の題材でワイヤーフレームを作ろう
レッスン2-1では、Edbaseの 要件定義.md を土台に、Claude Codeとの4ラリーで ワイヤーフレーム（設計図） を組み立てる流れを見ました。成果物は ワイヤー原稿.md と preview.html の2つでした。
今回の課題は、その流れを 自分の題材でやってみる ことです。
1-2の課題で作った自分の 要件定義.md を土台に、自分のサイトのワイヤーフレームを組み立てます。
自分の
要件定義.md から、全セクションの原稿が入った ワイヤー原稿.md と、ブラウザで確認できる preview.html を作る。
この課題の目的
レッスン2-1で一番のコツは、「ゼロから企画しない」 ことでした。 前回の要件定義の3点（誰の・何を・どのように）が、そのままWebページの物語になります。今回の課題は、その「要件定義 → ページの形」への変換を、自分の手で体験することが目的です。
提出は必要ありません。次回（デザイン制作）でそのまま使う ワイヤー原稿.md と preview.html が手元にあればOK です。
この課題でやること
- Check1-2で作った
要件定義.mdを開く - Checkラリー①：セクションの順番を出して
ワイヤー原稿.mdを作る - Checkラリー②：ファーストビュー（FV）を作り込む
- Checkラリー③：残りを一気に書かせ、
preview.htmlで見ながら直す - Checkラリー④：通しで眺めて全体を整える
進め方は、レッスンと同じ「4ラリー」
新しく覚えることはありません。レッスン2-1で見た4つのラリーを、題材だけ自分のものに差し替えて回します。
① セクション順
並び順を出す
② FVを作り込む
ここだけ深く
③ 残りを書く＋直す
一気に出させて微調整
④ 通しで整える
全体を眺めて仕上げ
趣味の記録サイトや活動紹介サイトの場合、「FV」「CTA」がそのまま当てはまらないことがあります。 そのときは 「一番上で何を伝えるか」「見た人に次に何をしてほしいか（フォロー・連絡・閲覧など）」 に読み替えればOKです。セクションを順番に並べて原稿をつける、という骨組みは同じです。
今回の課題手順
Step 1. 前回の 要件定義.md を開く
1-2の課題で作ったプロジェクトフォルダをVSCodeで開き、要件定義.md をエディタで開いておきます。Claude Codeはこのファイルを読んでワイヤーフレームを組み立てます。
※ もし1-2の課題がまだなら、先にそちらを終わらせてください。要件定義が無いと、この課題は進められません。
Step 2. ラリー①：セクションの順番を出す
Claude Codeに、要件定義からLP（1枚のWebページ）を作りたいと伝えます。セクションの並びはAIが提案してくれます。
前回作った 要件定義.md を見て、これを1枚のWebページ（LP）にしたい。 セクション（ページのかたまり）は、どんな順番にするのがいい？
提案された並びに納得したら、新しいファイルに書き出してもらいます。並び順を変えたいときは「○○を△△の後にして」と伝えればOKです。
いい感じ。新しく ワイヤー原稿.md を作って、このセクション順を書いておいて。
Step 3. ラリー②：ファーストビュー（FV）を作り込む
FVはページの一番上、訪問者が最初に見る場所です。ここだけは丁寧にラリーします。まず材料を一気に出してもらいます。
FVから埋めよう。要件定義のコアメッセージを下敷きに、 見出しを3案、本文、CTA（ボタン）の文言、横に置く画像のアイデアを出して。
気に入った見出しを選び、固いところや長いところは遠慮なく直してもらいます。納得したらファイルに書いてもらいます。
案◯がいい。本文がちょっと固いから、もう少しふっと読める感じに直して。 よければ、この内容で ワイヤー原稿.md のFVを埋めて。
Step 4. ラリー③：残りを一気に書かせ、見ながら直す
FVの呼吸がつかめたら、残りのセクションは「同じ要領で全部」とまとめて出させます。
残りの全セクション、FVと同じ粒度で ワイヤー原稿.md に書き込んで。 見出し・短い本文・CTA・画像案を入れて、長くしすぎないで。
文字だけ見ても訪問者の体感は分かりません。ブラウザで見られる形にしてもらいます。
これブラウザで見たい。Bootstrapを使った簡単なプレビューを preview.html として作って。構造が分かれば十分。
preview.html をブラウザで開き、上から1セクションずつ見て、気になったところを直していきます。この「直す」がこの課題で一番手を動かすところです。直すときのコツは下の「つまずいたときのヒント」を見てください。
Step 5. ラリー④：通しで眺めて整える
セクションごとの直しが終わったら、最後にページを上から下まで通しで読みます。細かい文言ではなく、訪問者として一度読んだときの違和感を探します。
通しで見た感想を言うね。 （例：FVから課題への流れが急／中盤にCTAがなくて離脱しそう など） ここを直して。
Step 6. 完成した2つのファイルを確認する
ワイヤー原稿.md の全セクションが埋まり、preview.html がブラウザで一通り見られる状態になったら完成です。深追いはせず、ここで区切りましょう。
自分の題材だと、こう変わる
レッスンのEdbase例と、自分の題材の対応はこんなイメージです（例：フリーランスWeb制作者のサイトの場合）。
| セクション | レッスンの例（Edbase） | 自分の題材の例（フリーランスWeb制作者） |
|---|---|---|
| FV | 机上のAI開発で終わらせない、というコアメッセージ | 「サイト制作、丸ごとお任せできます」など自分の一言 |
| 課題提起 | AIを入れたのに現場で使われない | サイトを作りたいが時間も知識もなく後回し |
| 解決策 | 無料相談からPoC・本開発までの支援 | ヒアリングから公開までまとめて代行する制作プラン |
| 実績 | 自社プロダクト（Edbase ほか） | これまでの制作実績・ポートフォリオ |
セクションの中身は題材ごとに違いますが、「要件定義の3点を、訪問者が読む順番に並べて原稿をつける」 という進め方はまったく同じです。
つまずいたときのヒント
「なんか違う」「直して」だけでは、AIはどう直せばいいか分かりません。直すときは、次の2つをセットで伝えます。
1何が気になったか（見たままの言葉でOK：本文が短い／カードが縦並びで間延びして見える など）
2どうなってほしいか（読んだ人にどう感じてほしいか：もっと安心できる感じ／ぱっと頼めそうに見える など）
✕ これだと的を外しやすい
「解決策のところ、なんか違う。直して」
○ 気になったこと＋どうなってほしいか
「解決策の本文が固い。読んだ人が『これなら自分でも頼めそう』と安心できる感じに直して」
セクションが思いつかない
自分で考えず「要件定義からセクション順を提案して」と任せればOK。並びは後から変えられます。
一度で決まらない
直しも何往復かするラリーです。「ここがまだ◯◯」とまた返すだけ。完璧な代案を自分で考える必要はありません。
preview.html の開き方
VSCodeでファイルを右クリック →「Open with Live Server」、または直接ブラウザにドラッグして開けます。
本格的な案件では、ここからFigmaなどでワイヤーを清書し、クライアントと合意を取ってからデザインに進みます。今回は
preview.html ＋ ワイヤー原稿.md まで作れれば十分です。
この課題は、次回こうつながります
今回作った2つのファイルは、ここで終わりではありません。 次回のデザイン制作で、そのまま土台として使います。
次回：Webデザイン制作
ワイヤー原稿.md を「原稿」、preview.html を「下敷き」にして、色・フォント・写真トーンを決めていきます。
その先：コーディング → WordPress化
同じ題材を、HTML/CSS・JavaScript・WordPress化まで一気通貫で育てていきます。
この課題のゴール
今回は何かを提出する必要はありません。次のような状態になっていればOKです。
ワイヤー原稿.mdに全セクションの見出し・本文・CTA・画像案が入っているpreview.htmlをブラウザで開くと、ページの流れが上から下まで見られる- 一度は通しで読んで、気になったところを直してある
目安時間
45〜60分程度。FVと「セクションごとの直し」に時間がかかります。完璧を目指すより、一通り最後まで形にすることを優先してください。
まとめ
今回は、レッスン2-1で見た「4ラリーでワイヤーを育てる」流れを、自分の題材で体験する課題でした。
大事なのは、ゼロから企画することではありません。前回の要件定義を、訪問者が読む順番に並べて原稿をつける——これがワイヤーフレームの正体です。そして、その作業はすべてClaude Codeとの会話で進められます。
次回予告
次回は、今回作った preview.html と ワイヤー原稿.md を土台に、いよいよ実際のWebデザインを作ります。色・フォント・写真トーンを、AIに方針を言語化してもらいながら固めていきましょう。