QUICK · かんたん版
文を順番に貼るだけで、LPを1枚作る。
細かい説明は読まなくて大丈夫です。ClaudeアプリのCodeに、下の文を順番に貼って送るだけで、架空のサービス「SNS画像デザイン室」のLPが1枚できます。まずは、自分のパソコンでページが動く体験をしてみましょう。
守ることは、この3つだけ。
- lp_learning と「手動」を見てから送る入力欄の下に lp_learning、その右に「手動」と出ていることを確かめてから送ります。
- 許可の確認は「一度だけ許可」ファイル名を見てから押します。lp_learning の外のファイルや、コマンドの実行についての確認なら「拒否」を押します。
- 提案の文は送らない返事のあと、入力欄に短い文が出ることがあります。それは送らずに、このページの文をコピーして送ります。
Claudeの返事の言い方は毎回少し違います。写真や見本と違っても大丈夫です。もっと詳しく知りたいところがあれば、詳しい版の UNIT 04〜06 を見てください。すでに UNIT 04〜06 を終えた人は、このページは不要です。
まず、何のページを作るかをメモにする。
1サイドバーの「新規作成」で新しいセッションにし、lp_learning を選んで、次の文を貼って送ります。
現在選択している lp_learning フォルダの中に、 brief.md という企画メモのファイルを作成してください。 内容は次のとおりです。 # LP企画書（学習用） ## サービス名 SNS画像デザイン室 ## 対象読者 SNSで情報発信する個人事業主 ## 読者の困りごと 投稿画像を作る時間が取れず、発信が続かない ## 提供すること 発信内容に合わせたSNS投稿用画像を1枚ずつ制作する ## ファーストビューの見出し 伝えたいことが、見た目でも伝わる。 ## 補足文 SNSで発信する個人事業主を、投稿画像づくりでサポートする架空のサービスです。 ## 行動ボタン（1つ） 「サービス内容を見る」 → 同じページの #service に移動 ## 安全と範囲 - 学習用の架空サービス。実在の販売・受付は行わない - 実績、利用者の声、価格などを創作して掲載しない - まずはローカルで確認する。公開しない - 1工程ずつ、本人が承認・確認する ほかのファイルは作成・変更・削除しないでください。すでにある start.md も変更しないでください。 まず作成する内容を提示し、私の確認を待ってください。 まだファイルは作成しないでください。
2返事を読み、よければ次の文を送ります。許可の確認が出たら、ファイル名を見て「一度だけ許可」を押します。
提示された内容で brief.md を作成してください。
lp_learning の中に brief.md ができます。（詳しい版：UNIT 04）
メモをもとに、ページの最初の画面を作る。
1サイドバーの「新規作成」で新しいセッションにし、lp_learning を選んで、次の文を貼って送ります。
現在選択している 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 は変更しないでください。ほかのファイルは作成・変更・削除しないでください。 コマンドの実行、公開、外部への送信はしないでください。 まず短い制作計画と、作成するファイルの場所を示して、私の確認を待ってください。 まだファイルは作成しないでください。
2返事を読み、よければ次の文を送ります。許可の確認が出たら、ファイル名を見て「一度だけ許可」を押します。
提示された計画どおりに、lp_sample フォルダの index.html を作成してください。 作成・変更してよいのは、lp_sample フォルダと、その中の index.html だけです。 brief.md と start.md は変更しないでください。 コマンドの実行、外部への送信、公開、その他のファイル操作が必要になった場合は、実行せずに理由を説明して、私の確認を待ってください。
lp_learning の中の lp_sample フォルダに index.html ができます。（詳しい版：UNIT 05）
特徴・見本・流れ・最後の案内を足す。
1サイドバーの「新規作成」で新しいセッションにし、lp_learning を選んで、次の文を貼って送ります。
現在選択している lp_learning フォルダの中にある brief.md と、lp_sample フォルダの index.html を読み、 index.html に次の4つの部分を追加する計画を立ててください。 変更するファイルは、lp_sample フォルダの index.html の1つだけです。 追加する部分は次のとおりです。 - サービスの特徴：brief.md に根拠がある内容から最大3つ。無理に数をそろえず、3つ作れない場合は理由を計画段階で説明する。 - 説明用の見本：実物の画像は使わず、HTML と CSS で描いた「架空の説明用デザイン見本」と明記する - 利用の流れ：「相談 → 内容確認 → 制作」の3段階。架空のサービスの想定の流れと明記する - 最後の案内：「サービス内容を見る」ボタンを置き、同じページの #service へ移動する 守ることは次のとおりです。 - 今ある見出し・補足文・ボタン・#service の説明は、文章と見た目（CSS）を維持する。新しい部分の追加に必要なCSSは追加してよいが、既存部分の表示を意図的に変更しない。 - HTML と CSS は index.html の中にまとめる。外部の画像・Webフォント・API・ライブラリ・サーバーは使わない - 画面幅 375px でも、文字やボタンがはみ出さないようにする - 実績、利用者の声、価格、保証などを創作して載せない。brief.md にない情報が必要なら、載せずに教えてください - フォーム・購入・送信の機能は作らない brief.md と start.md は変更しないでください。ほかのファイルは作成・変更・削除しないでください。 コマンドの実行、公開、外部への送信はしないでください。 まず、4つの部分をどこに置き、どんな文を載せるかを示して、私の確認を待ってください。 まだファイルは変更しないでください。
2返事を読み、よければ次の文を送ります。許可の確認が出たら、ファイル名を見て「一度だけ許可」を押します。
提示された計画どおりに、lp_sample フォルダの index.html を変更してください。 変更してよいのは、lp_sample フォルダの index.html だけです。今ある部分は消さずに、4つの部分を追加してください。 brief.md と start.md は変更しないでください。 コマンドの実行、外部への送信、公開、その他のファイル操作が必要になった場合は、実行せずに理由を説明して、私の確認を待ってください。
許可の確認は、何回か続けて出ることがあります。毎回ファイル名が index.html か見てから「一度だけ許可」を押します。（詳しい版：UNIT 06）
できたページを、Edgeで開く。
- エクスプローラーのアドレス欄に
%USERPROFILE%\lp_learning\lp_sampleと入れて Enter を押します。 - indexを右クリック →「プログラムから開く」→「Microsoft Edge」を選びます。
- 「サービス内容を見る」を押して、説明の部分へ移動すれば完成です。
自分のパソコンで、自分の指示から動くページができました。なぜこの順番で頼むのか、うまくいかないときはどうするのか、を知りたくなったら、詳しい版の UNIT 04から進めてください。