バイブWeb制作の第二歩へ
前回（1-1）で「バイブ」の世界観と、第一歩の 「バイブマーケティング」 をやりました。今回はその第二歩、「バイブワイヤーフレーミング」 です。バイブWeb制作の4工程
構成と原稿をAIに作らせて、ワイヤー原稿と preview.html を仕上げます。
前回の続き：1枚の要件定義を、Webページの形に変える
前回 要件定義.md に書いた「誰の・何を・どのように」の3点。今回はこれを土台にして、Webページ（LP）の形を作っていきます。
「Webページ作る」と聞くと身構えてしまうかもしれませんが、今回は絵を描かず、コードも書かず、すべてClaude Codeとの会話だけで進めます。最後にブラウザで実際の見た目を確認できる状態まで行きます。
まず「何を作るのか」を見ておきましょう
文字で説明するより、完成形を先に見たほうが早いです。下が今日作るLPのワイヤーフレーム（設計図）です。
今日のゴール：1ページLPのワイヤーフレーム
これがゴール。今は「ふーん、こういう全体の流れか」と眺める程度で大丈夫です。各部分が何なのかは、これから1つずつ見ていきます。
ワイヤーフレームって何？
ワイヤーフレームは、Webページのデザインに入る前に作る「設計図」です。家を建てる前の間取り図に似ています。
ワイヤーフレーム
何を、どの順番で、どこに置くかを決める
デザイン
配色、フォント、写真で見た目を整える
コーディング
HTML/CSSで実装してブラウザで動く形に
「見た目」から作り始めると、後で「やっぱりこの順番じゃない」と全部やり直しになります。先に骨組みを決めておくと、デザインで迷子になりません。
知っておきたい3つの言葉
ワイヤーを見るうえで、これだけ覚えておけばOKです。
① ファーストビュー（FV）
ページを開いた瞬間に見える「画面の一番上の領域」です。LPの中で一番大事な場所。ここで「自分向けだ」と感じてもらえないと、訪問者は下にスクロールしません。
ファーストビューは「画面を開いた瞬間に見える範囲」
② セクション
LPは縦に長い1枚のページ。それを意味のかたまりで区切ったのが「セクション」です。先ほどのワイヤーには ①FV → ②課題提起 → ③解決策 → … というラベルが付いていましたが、あれが各セクションです。
③ CTA（シーティーエー）
Call To Actionの略。訪問者に取ってほしい行動を促すボタンや誘導のことです。今回のLPなら「無料相談する」「資料をダウンロード」がCTA。これが弱いと、見てくれた人が何もしないまま帰ってしまいます。
・FV＝ファーストビュー。画面を開いた瞬間に見える最上部の領域
・セクション＝LPを意味で区切ったかたまり
・CTA＝行動を促すボタン（無料相談・資料DLなど）
なぜ「要件定義 → LP」が一気通貫でつながるのか
ここが今日の一番のコツ。前回作った3点が、そのままLPの物語になっています。
前回の3点 → 今回のLPセクション
📄 要件定義.md
中堅企業のDX・AI推進担当
AI業務活用の目利きが社内にいない
無料相談からPoC・本開発へ進む支援 / コアメッセージ
🖥️ LPの物語
- FV：コアメッセージで掴む
- 課題提起：「あ、自分のことだ」
- 解決策：無料相談から開発までの支援内容
- 選ばれる理由：自社AI運営の強み
- 実績：自社プロダクト
- 流れ／FAQ／CTA：不安をつぶしてCTA
つまり、Claude Codeに「この要件定義からLP作りたい」と話しかけるだけで、セクション構成は自然に出てきます。ゼロから考える必要はありません。
今日の進め方：4ラリーでワイヤーが育つ（＝バイブの中身）
ワイヤーは一気には完成しません。前回と同じく、Claude Codeとの会話のラリーで少しずつ育てていきます。
①セクション順
並び順を出す
②FVを作り込む
ここだけ深く
③残りを書く＋直す
一気に出させて、セクションごとに微調整
④通しで整える
最後にページ全体を眺めて整える
FVだけは丁寧に作り込みます（一番大事な場所だから）。残りは「同じ要領で全部」とAIに一気に出させてから、HTMLで開いてセクションごとに直していきます。この「直す」のところもそれなりに時間がかかります。
成果物は、最終的にこの2つになります。
ワイヤー原稿.md
全セクションの見出し・本文・CTA・画像案がまとまったMarkdownファイル
preview.html
ブラウザで開いて、訪問者目線で確認できる簡易プレビュー
ラリー① セクションの順番を出す
Claude Codeに「この要件定義からLPを作りたい。セクションの順番どうする？」と話しかけるだけ。前回の `要件定義.md` を読んでくれているので、すぐに並びを提案してくれます。
このラリーで出てくる結論はこんな並びです。
ラリー①の成果
- ファーストビュー
- 課題提起
- 解決策
- 選ばれる理由
- 実績
- 相談から開発までの流れ
- FAQ
- CTA
あなた
前回作った `要件定義.md` を見て、これをLPにしたい。Webページのセクションってどんな順番にするのがいい？
Claude Code
要件定義の3点を見ると、LPの並びは自然に決まります。
1. ファーストビュー（コアメッセージ＋CTA）
2. 課題提起（「AIを入れたのに使われない」に共感）
3. 解決策（無料相談からPoC、本開発までの支援内容）
4. 選ばれる理由（自社AI運営の強み）
5. 実績（Edbase / Qbase / Skillhub）
6. PoCの進め方
7. FAQ
8. CTA
こんな並びでどうでしょう？
あなた
いい感じ。「PoCの進め方」は「相談から開発までの流れ」って名前にして。
あとCTAはFVと実績の後にも置きたい。
じゃあ新しく `ワイヤー原稿.md`
を作って、このセクション順を書いておいて。
Claude Code
`ワイヤー原稿.md` を作成しました。
ラリー② ファーストビュー（FV）を作り込む
LPで訪問者の8割はFVで離脱すると言われています。だからここだけは丁寧に作ります。FVに入れるべきものは3つ。
①何のLPか
3秒で「自分向け」と分かるコアメッセージ
②なぜ信頼できるか
自社AIプロダクトを運営しているという証拠
③次に何をするか
無料相談 / 資料DLのCTA
ラリーを経て決まったFVが、こちらです。
ラリー②の成果：ファーストビューのワイヤー
このFVには、先ほどの3つが全部入っています。
あなた
じゃあFVから埋めよう。要件定義のコアメッセージを下敷きに、見出し3案、本文、CTAの文言、横に置く画像のアイデアを出して。
Claude Code
見出し案：
案1：机上のAI開発で終わらせない。自社AI運営会社が、運用まで見据えてご一緒します。
案2：ChatGPTを入れたのに、現場で使われない——その理由、自社AI運営の経験から一緒に解きます。
案3：AI活用の「目利き」を、外から借りる4〜8週間。
本文：ChatGPTやCopilotを導入したのに業務で使われない。その壁を、自社でAIプロダクトを運営する立場からご一緒に乗り越えます。
CTA：主「無料相談する（30分・オンライン）」／副「AI開発サービス資料をダウンロード」
画像案：自社AIプロダクト（Edbase/Qbase/Skillhub）のロゴ＋画面キャプチャをコラージュ。
あなた
案1がいい。「机上のAI開発で終わらせない」が一番、他社で言えないニュアンスがある。
本文ちょっと固いから、もう少しふっと読める感じに直して。
Claude Code
こう直しました：「ChatGPTを入れたのに、思ったように使われない——その『あと一歩』を、自社でAI運営してきた目線でご一緒に埋めます。」
あなた
いいね。この内容で `ワイヤー原稿.md` のFVを埋めて。
ラリー③ 残りを一気に書いて、セクションごとに直す
FVの呼吸が分かれば、あとは「同じ要領で全部」とAIに一気に出してもらえます。ただし、出てきた叩き台はそのままでは使えません。HTMLで書き出してブラウザで開き、セクションごとに見て直していきます。ここはFVと同じくらい時間を食うと思っておいてください。
Step 1：「同じ要領で全部」と頼んで、まず md に書く
「残り全部、FVと同じ要領でまとめて ワイヤー原稿.md に書いて」と頼むだけ。AIが各セクションの見出し・本文・CTA・画像案を一気に書きます。ここは速いです。
細かく聞くと時間がかかります。「同じ要領で全部」と任せて、出てきたものをまとめて直すのが速いです。
Step 2：preview.html に書き出して、ブラウザで開く
文字（Markdown）だけ見ても訪問者の体感は分かりません。「これブラウザで見たい、preview.html 作って」と頼んで、Bootstrapベースの簡単なHTMLに書き出してもらいます。
ブラウザで開いて初めて、「ふーん、こう見えるのか」が分かります。
Step 3：セクションを上から順に、見て直す
ここからが実作業です。画面を上から1セクションずつ見ていって、気になったところを直す。FVほど深く詰めなくていいけど、セクションの数だけ確認と修正があります。今日のレッスンで一番手を動かす時間が長いのはここです。
この回で実際に出てきた直し例
| セクション | 気づき → 直し |
|---|---|
| 課題提起 | カードが縦並びになっていた → 横3列に |
| 解決策 | 本文が短すぎ → 1〜2行足す |
| 選ばれる理由 | 左右の対比が弱い → before/afterの2カラムに |
| 実績 | Edbaseの説明が無い → 「教育機関で稼働中のAIチューター」を一言足す |
| 相談から開発までの流れ | 矢印だけで分かりづらい → ステップ番号を付ける |
| FAQ | 「社内に開発者がいなくても大丈夫？」を追加 |
直すときは「ダメ出し」で終わらせない
「これは違う」「ここ長い」だけでは、AIはどう違うのか・どうしたいのかが分からず、直しても的を外します。一度で思いどおりにならないのは、たいてい伝える言葉が足りていないからです。直すときは、次の2つをセットにして渡します。
1何が気になったか
どこが・どう気になったか。「本文が短い」「カードが縦並びで間延びして見える」など、見たままの言葉で構いません。
2どうなってほしいか
読んだ人にどう感じてほしいか。「もっと安心できる感じ」「ぱっと頼めそうに見える」など、ゴールの気持ちを一言そえます。
✕ これだと的を外しやすい
「解決策のところ、なんか違う。直して」
○ 気になったこと＋どうなってほしいか
「解決策の本文、機能の説明みたいで固い。読んだ人が『これなら自分でも頼めそう』と安心できる感じに直して」
この2つを伝えても、出てきたものがまだしっくり来ないことはよくあります。そのときは「ここがまだ◯◯」とまた返すだけ。FVと同じで、直しも何往復かするラリーです。完璧な代案を自分で考える必要はありません。
あなた
じゃあ残りの全セクション、FVと同じ粒度で `ワイヤー原稿.md` に書き込んで。見出し・短い本文・CTA・画像案を入れて、長くしすぎないで。
Claude Code
書き込みました。要件定義の「本当の課題」と「強み材料」を各セクションに対応させています。
あなた
これブラウザで見たい。Bootstrap使った簡単なプレビューを `preview.html` として作って。構造が分かれば十分。
Claude Code
`preview.html` を作成しました。VSCodeで右クリック →「Open with Live Server」で開けます。
あなた
見たよ。セクションごとに気になったのまとめて言うね：
・課題提起のカード、縦並びになってる → 横3列にして
・解決策の本文短い →
1〜2行足して
・選ばれる理由、左右の対比が弱い → before/afterの2カラムにして
・実績のEdbaseに「教育機関で稼働中のAIチューター」って一言入れて
・流れ、矢印だけで分かりづらい →
ステップ番号を付けて
・FAQに「社内に開発者がいなくても大丈夫？」追加
Claude Code
6点とも反映しました。`ワイヤー原稿.md` と `preview.html` 両方を更新したので再読込してください。
あなた
再読込した。ほぼいい。ただ解決策に足した本文、機能の説明っぽくて固い。読んだ人が「これなら自分でも頼めそう」と安心できる感じに直して。
Claude Code
解決策の本文を、できることの列挙から「相談しながら一緒に進められる」という安心感が伝わる書き方に直しました。
ここまでで、ワイヤー原稿.md の全セクションと preview.html が一通り揃いました。
ラリー③の成果：8セクションが全部埋まったワイヤー
ラリー④ 通しで眺めて、全体感を整える
セクションごとの直しが終わったら、最後はページを上から下まで通しで眺めるだけ。細かい文言ではなく、訪問者として一度通読したときの違和感を取りに行きます。
通し読みでよく出る違和感の例
- FV → 課題 → 解決策の温度差が急（→ 課題と解決の間に一言ブリッジを足す）
- CTAが最初と最後にしかなく、中盤で離脱しそう（→ 中盤に「無料相談」をもう1個）
- セクションの切れ目が見えにくく、ずっと同じトーン（→ 背景色を交互に）
気になった違和感は、また「ここに〇〇足して」「ここの間に一言ブリッジ入れて」と頼めば直ります。出尽くしたらワイヤーは完成です。
あなた
通しで見た感想。FV → 課題 →
解決策の温度差が急に感じる。あと中盤にCTAがなくて、長いから途中で離脱しそう。
・課題と解決の間に一言ブリッジを足して
・解決策の手前に「無料相談」CTAをもう1個入れて
・セクションの切れ目が分かりづらいから背景色を交互にして
Claude Code
3点とも反映しました。`ワイヤー原稿.md` と `preview.html` 両方を更新したので再読込してください。
あなた
いいね、これでワイヤーは完成。
完成：手元にある2つのファイル
4ラリーを経て、ファイルツリーには次の2つが揃いました。
ワイヤー原稿.md
全セクションの見出し・本文・CTA・画像案
次回のデザイン制作で「原稿」として使う
preview.html
ブラウザで実物大の動きを確認できる
次回のデザイン制作で「下敷き」として使う
本格的な案件では、ここからFigmaでワイヤーを清書し、クライアントと合意を取ってからデザインに進みます。今回の `preview.html` ＋ `ワイヤー原稿.md` はクライアント前のたたき台として十分使える品質です。
まとめ
今日の学び
要件定義 → LPは1往復
前回の3点が、そのままLPの物語になる。AIに任せれば構成は1往復で出る。
FV深く、残りは「出させて直す」
FVはラリーで作り込む。残りは「同じ要領で」と一気に出させて、HTMLで開いてセクションごとに直す。ここもFVと同じく時間を食う。
最後は通しで眺める
セクションを直したあとは、ページ全体を上から下まで読んで、流れの違和感を最後に整える。
ワイヤーフレームとは、新しい企画を考える工程ではなく、前回の要件定義を「訪問者が読む順番」に並べて、原稿をつける作業です。
次回予告
次回は、この preview.html と ワイヤー原稿.md を土台にして、いよいよ実際のWebデザインを作ります。色・フォント・写真トーンを「AIプロダクトを実運用している会社らしさ」で固めていきます。
「センスがないから無理」と感じる工程ですが、ここもAIにデザインの方針を言語化してもらえば、判断軸を持って進められます。