QUICK · かんたん版(アプリ)
文を2つ貼るだけで、LP編集アプリを作る。
かんたん版で作ったLPの続きです。文字を入れるとLPの見た目がその場で変わり、完成したページを1枚のファイルとして保存できる、小さなアプリを作ります。
画面の構成を見る(1つ目)
↓アプリを作る(2つ目)
↓Edgeで試す
かんたん版:アプリへ応用貼る文は2つ。かんたん版のLP(または詳しい版の UNIT 04〜06)を終えた状態から始めます。
守ることは、LPのときと同じ3つ。
- lp_learning と「手動」を見てから送る入力欄の下に lp_learning、その右に「手動」と出ていることを確かめてから送ります。
- 許可の確認は「一度だけ許可」ファイル名を見てから押します。lp_learning の外のファイルや、コマンドの実行についての確認なら「拒否」を押します。
- 提案の文は送らない返事のあと、入力欄に短い文が出ることがあります。それは送らずに、このページの文をコピーして送ります。
Claudeの返事の言い方や、できるアプリの見た目は毎回少し違います。写真と違っても大丈夫です。
2つの文で、LP編集アプリを作る。
1サイドバーの「新規作成」で新しいセッションにし、lp_learning を選んで、次の文を貼って送ります。
CODE の入力欄に貼る 1つ目
現在選択している lp_learning フォルダの中にある brief.md と、lp_sample フォルダの index.html を読み、 学習用の「簡易LP編集アプリ」を作る計画を立ててください。 作成するファイルは、lp_learning の中の lp_editor フォルダにある index.html の1つだけです。 lp_editor フォルダがなければ、あわせて作成してください。 作るものは次のとおりです。 - サービス名・見出し・補足文を入力する欄 - 入力すると、同じ画面のLPのプレビューにすぐ反映される - 「HTMLを書き出す」ボタンを押すと、入力内容を反映した1枚のHTMLファイルを保存できる - 入力欄の初期値は brief.md の内容にする - 画面幅が狭いときは、入力欄とプレビューを縦に並べる 守ることは次のとおりです。 - HTML・CSS・JavaScript を index.html の1つにまとめる。外部の画像・Webフォント・API・ライブラリ・サーバーは使わない - 入力した文字は文字として表示し、HTMLやスクリプトとして実行しない - 実績、利用者の声、価格、保証などを創作して載せない - フォームの送信・購入・外部への送信の機能は作らない brief.md、start.md、lp_sample の中のファイルは変更しないでください。ほかのファイルは作成・変更・削除しないでください。 コマンドの実行、公開、外部への送信はしないでください。 まず、画面の構成と作成するファイルの場所を示して、私の確認を待ってください。 まだファイルは作成しないでください。
2返事に画面の構成と作るファイルが出たら、次の文を送ります。許可の確認が出たら、ファイル名が lp_editor の index.html か見て「一度だけ許可」を押します。
CODE の入力欄に貼る 2つ目
提示された計画どおりに、lp_editor フォルダの index.html を作成してください。 作成・変更してよいのは、lp_editor フォルダと、その中の index.html だけです。 brief.md、start.md、lp_sample の中のファイルは変更しないでください。 コマンドの実行、外部への送信、公開、その他のファイル操作が必要になった場合は、実行せずに理由を説明して、私の確認を待ってください。
lp_learning の中の lp_editor フォルダに index.html ができます。返事の最後に質問が書かれていても、2つ目の文で「計画どおりに」と答えたことになります。
文字を変えて、ページを保存してみる。
- エクスプローラーのアドレス欄に
%USERPROFILE%\lp_learning\lp_editorと入れて Enter を押し、indexを右クリック →「プログラムから開く」→「Microsoft Edge」で開きます。 - 左の入力欄(サービス名・見出し・補足文)の文字を変えると、右のLPがその場で変わります。
- 見出しに
<b>テスト</b>と入れても、太字にはならず、そのまま文字で出ます(入力した文字をプログラムとして動かさない作りです)。 - 「HTMLを書き出す」を押すと、
lp.htmlが保存されます(保存先は Edge の設定によります。ふつうは「ダウンロード」)。開くと、入力した内容のLPが1枚のページとして表示されます。


できたら
ページを作るだけでなく、ページを作る道具も、文を貼るだけで作れました。これが個人開発の入り口です。仕組みをしっかり知りたくなったら、詳しい版の UNIT 07 から進めてください。
迷ったら、ここだけ見る。
違う文を送ってしまった
すぐに停止を押し、「新規作成」で新しいセッションにして、1つ目からやり直します。
見慣れない許可の確認が出た
「拒否」を押します。何をしようとしたのかを返事で説明してもらい、分からなければ先へ進みません。
入力してもプレビューが変わらない・書き出せない
起きたことをそのままCodeに伝え、「今は修正せず、原因の候補と確認方法を教えてください」と頼みます。直してもらうときも、許可の確認を見てから選びます。