Claude Codeで、最初のLP画面を作る。

初めてのWebページを、ブラウザに表示する。

前のUNITで決めた企画を使って、LPのいちばん最初の画面を作ります。今回は見出し・説明・ボタンまで。申し込みフォームや決済機能は作りません。

これは教材が用意した説明用デモです。あなたのClaude Codeで生成された成果ではありません。

画面写真は、Windows 10 Home（22H2、64ビット）で2026年11月12日に撮影したものです。Claudeアプリは暗い色の表示です。名前・フォルダの場所・会話の履歴・お気に入りなどが写る部分は灰色で隠し、説明に必要な部分だけを切り抜いています。黄色の枠は、ORIHATAが重ねた印です。

作るのは、新しいフォルダとファイルの1つずつ。

HTML はページの内容と組み立て、CSS は文字や余白などの見た目を決めるものです。今回は両方を index.html の1つにまとめてもらうので、書き方を覚える必要はありません。

図1　今回の作業のあとの lp_learning の中（ORIHATAによる概念図です。実際の画面ではありません）

UNIT 04をまだ終えていない場合は、先に UNIT 04で企画メモを作るところから始めてください。

送る前に、lp_learning と「手動」を画面で見る。

ClaudeアプリのCodeを開き、サイドバーの「新規作成」で新しいセッションにします。UNIT 03のSTEP 03と同じ方法で lp_learning を選びます。

1. 入力欄の下にlp_learningと出ているか見ます（写真1の左の枠）。
2. 入力欄の下の右側が「手動」になっているか見ます（写真1の右の枠）。ほかの表示なら、押して「手動」を選びます（UNIT 03のSTEP 05）。
3. STEP 03の1通目をコピーして入力欄に貼ります。貼ったら、もう一度この2つを見てから送ります。

タップ・クリックで拡大

まだ作らせずに、計画と作成先を見せてもらう。

次の文をCodeの入力欄に貼り付けて送ります。brief.md を読んで、計画と作るファイルの場所を先に示し、まだ作らないで待つように頼んでいます。

現在選択している lp_learning フォルダの中にある brief.md を読み、
その内容をもとに、LPの最初の画面を作ってください。

作成するファイルは、lp_learning の中の lp_sample フォルダにある index.html の1つだけです。
lp_sample フォルダがなければ、あわせて作成してください。

作る内容は次のとおりです。
- brief.md のサービス名・ファーストビューの見出し・補足文・行動ボタンを使った、最初の画面
- 「サービス内容を見る」ボタンを押すと、同じページの id="service" の説明部分へ移動する
- #service の説明は、brief.md に書かれた内容だけで短く作る
- HTML と CSS を index.html の1つにまとめる。外部の画像・Webフォント・API・ライブラリ・サーバーは使わない
- 画面幅 375px でも、文字やボタンがはみ出さないようにする
- 実績、利用者の声、価格、保証などを創作して載せない

brief.md と start.md は変更しないでください。ほかのファイルは作成・変更・削除しないでください。
コマンドの実行、公開、外部への送信はしないでください。
まず短い制作計画と、作成するファイルの場所を示して、私の確認を待ってください。
まだファイルは作成しないでください。

送ると、Claudeが brief.md を読んで、計画を示します。brief.md を読むだけなので、許可の確認は出ませんでした（撮影時）。写真2では、作成するファイル（上の枠）と、brief.md・start.md などには手を加えないこと（下の枠）が書かれ、その下に制作計画が続きました。

タップ・クリックで拡大

どれかが違っていたら、2通目を送らずに、直してほしいところを返信します。返事の最後に「作成してください」と伝えるよう案内されることがありますが（撮影時もそうでした）、この教材では次のSTEP 04の文を送ります。

計画でよければ作成を頼み、許可の確認を見て選ぶ。

計画でよければ、次の文を送ります。作ってよいものをlp_sample フォルダと index.html だけに限り、ほかの操作が必要になったら実行せずに説明して待つように頼んでいます。

提示された計画どおりに、lp_sample フォルダの index.html を作成してください。

作成・変更してよいのは、lp_sample フォルダと、その中の index.html だけです。

brief.md と start.md は変更しないでください。

コマンドの実行、外部への送信、公開、その他のファイル操作が必要になった場合は、実行せずに理由を説明して、私の確認を待ってください。

権限が「手動」なので、書き込む前に「Claude に index.html の書き込みを許可しますか？」と確認が出ます（写真3の上の枠）。その下に書き込み先と、書き込む中身が行番号つきで表示されます。

タップ・クリックで拡大

1. ファイル名がindex.htmlで、書き込み先がlp_learning の中の lp_sampleかを見ます。
2. 中身の最初の数行が、ページ（<!doctype html> など）になっているかを見ます。細かく読めなくても大丈夫です。
3. よければ「一度だけ許可」を押します。ファイル名や場所が違ったら「拒否」を押し、直してほしいところを返信します。

撮影時、この確認に出たボタンは「拒否」と「一度だけ許可」の2つでした。lp_sample フォルダは index.html と一緒に作られ、フォルダのための別の確認は出ませんでした。表示はアプリの版や状況で変わることがあります。コマンドの実行や、index.html 以外のファイルについて確認が出たら「拒否」を押して、何をしようとしたのか説明してもらいます。

許可すると、Claudeが index.html を作り、結果を知らせます。撮影時は、アプリの右側にブラウザの欄が開き、できたページが表示されました（写真4の右）。

タップ・クリックで拡大

タップ・クリックで拡大

返事には、作ったものと「載せていないもの（実績・利用者の声・価格・保証）」、まだ確かめていないことが書かれていました。言い方は毎回変わります。大切なのは、作ったのが lp_sample の index.html だけで、brief.md と start.md を変えていないと書かれているかです。

エクスプローラーから、Edgeでページを開く。

1. UNIT 04と同じ方法で、エクスプローラーのアドレス欄に%USERPROFILE%と入れてホームフォルダを開き、lp_learning → lp_sampleの順にダブルクリックします。
2. 一覧にindexが1つあれば、作られています（写真5の枠）。

タップ・クリックで拡大

「種類」の欄は、パソコンでふだん使うブラウザによって変わります（撮影したパソコンではChromeでした）。そのためダブルクリックではなく、次の方法でEdgeを選んで開きます。

3. indexを右クリックし、「プログラムから開く」にマウスを合わせます（写真6の左の枠）。
4. 出てきた一覧から「Microsoft Edge」を選びます（写真6の右の枠）。

タップ・クリックで拡大

Edgeでページが開きます。アドレス欄が「ファイル」で始まり、最後が lp_learning/lp_sample/index.html になっていれば、自分のパソコンの中のファイルを開いています（写真7の上の枠）。

タップ・クリックで拡大

5. 見出しと補足文が、brief.md で決めた文になっているか読みます。
6. 「サービス内容を見る」を押します。ページが下へ動き、「サービス内容」が見えれば成功です（写真8）。アドレス欄の最後に #service が付きます。

タップ・クリックで拡大

「サービス内容」の文も、brief.md に書いた内容と同じか見ます。実績・利用者の声・価格・保証など、決めていない文が足されていないかも確かめます。撮影時は、最後に「学習用の架空サービス」である注記が入りました。

Edgeの開発者ツールで、幅375pxにして見る。

スマホで見たときに文字やボタンがはみ出さないかを、パソコンのEdgeで確かめます。Edgeのウィンドウを手で狭くしても375pxにはならないため、Edgeに入っている開発者ツールを使います。ページの中身は変わりません。

1. STEP 05で開いたEdgeの画面でF12キーを押します。初めてのときは「Microsoft Edge 開発者ツールを開きますか?」と聞かれるので、「DevTools を開く」を押します（撮影時）。
2. 開発者ツールが開いたら、Ctrl ＋ Shift ＋ Mを押します。ページの上に、幅と高さを入れる欄が出ます。
3. 左の一覧が「Responsive」（レスポンシブ）になっていることを見て、幅の欄に375と入れてEnterを押します（写真9の枠）。
4. ページを上から下まで動かし、横にずれないか、文字やボタンが切れていないかを見ます。ボタンも押してみます。
5. 終わったら、もう一度 Ctrl ＋ Shift ＋ M を押し、F12 で開発者ツールを閉じます。

タップ・クリックで拡大

開発者ツールの表示は、英語のことも日本語のこともあります。英語でも、押すキーと入れる数字は同じです。撮影時は、幅375pxで横へのはみ出しや文字の切れはありませんでした（ORIHATAの確認では、幅320〜1920pxの10通りでも同じでした）。

直す前に、起きたことをそのまま伝える。

真っ白、ボタンが動かない、文字がはみ出す、などのときは、自分だけで直そうとしなくて大丈夫です。まずは起きたことを伝え、原因を調べるところだけを頼みます。

lp_sample/index.html を自分で開いて確認したところ、期待どおりに動きませんでした。
起きたこと：［ここに症状を書きます］
期待したこと：［ここに期待した動きを書きます］

今は修正せず、原因の候補と確認方法を1つずつ教えてください。変更するファイルと内容を示し、私が承認するまで修正しないでください。

この依頼文は、この教材の確認では送っていません（撮影時は問題が起きなかったため）。直してもらうときも、STEP 04と同じく、許可の確認でファイル名と場所を見てから「一度だけ許可」を選びます。

うまくいかないときの対処。

公式資料：デスクトップアプリを始める。サービスの仕様や画面は変わることがあります（2026年11月12日に確認）。

完成の判断は、自分でする。

手を動かしたことに加えて、なぜそうするのかを言えるかを確かめます。言えないものがあれば、そのSTEPを読み直してください。

チェックはこの画面上の自己確認用です。Codeの実行結果を自動で調べているわけではありません。