ORIHATA LEARNING LAB

QUICK · かんたん版(アプリ)

文を2つ貼るだけで、LP編集アプリを作る。

かんたん版で作ったLPの続きです。文字を入れるとLPの見た目がその場で変わり、完成したページを1枚のファイルとして保存できる、小さなアプリを作ります。

画面の構成を見る(1つ目)
↓
アプリを作る(2つ目)
↓
Edgeで試す
かんたん版:アプリへ応用貼る文は2つ。かんたん版のLP(または詳しい版の UNIT 04〜06)を終えた状態から始めます。
START · はじめる前に

守ることは、LPのときと同じ3つ。

  1. lp_learning と「手動」を見てから送る入力欄の下に lp_learning、その右に「手動」と出ていることを確かめてから送ります。
  2. 許可の確認は「一度だけ許可」ファイル名を見てから押します。lp_learning の外のファイルや、コマンドの実行についての確認なら「拒否」を押します。
  3. 提案の文は送らない返事のあと、入力欄に短い文が出ることがあります。それは送らずに、このページの文をコピーして送ります。

Claudeの返事の言い方や、できるアプリの見た目は毎回少し違います。写真と違っても大丈夫です。

STEP 01 · アプリを作る

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つ目の文で「計画どおりに」と答えたことになります。

STEP 02 · Edgeで試す

文字を変えて、ページを保存してみる。

  1. エクスプローラーのアドレス欄に%USERPROFILE%\lp_learning\lp_editorと入れて Enter を押し、indexを右クリック →「プログラムから開く」→「Microsoft Edge」で開きます。
  2. 左の入力欄(サービス名・見出し・補足文)の文字を変えると、右のLPがその場で変わります。
  3. 見出しに <b>テスト</b> と入れても、太字にはならず、そのまま文字で出ます(入力した文字をプログラムとして動かさない作りです)。
  4. 「HTMLを書き出す」を押すと、lp.html が保存されます(保存先は Edge の設定によります。ふつうは「ダウンロード」)。開くと、入力した内容のLPが1枚のページとして表示されます。
できたLP編集アプリ。左にサービス名・見出し・補足文の入力欄と「HTMLを書き出す」ボタン、右にLPのプレビューが並んでいる。
この教材の確認でできたアプリ(PCの幅、画面を出さない Edge で撮った表示)。
スマホの幅で表示したLP編集アプリ。入力欄が上、プレビューが下に縦に並んでいる。
スマホの幅(375px)では、入力欄が上、プレビューが下に並びます。
できたら

ページを作るだけでなく、ページを作る道具も、文を貼るだけで作れました。これが個人開発の入り口です。仕組みをしっかり知りたくなったら、詳しい版の UNIT 07 から進めてください。

HELP · 困ったら

迷ったら、ここだけ見る。

違う文を送ってしまった

すぐに停止を押し、「新規作成」で新しいセッションにして、1つ目からやり直します。

見慣れない許可の確認が出た

「拒否」を押します。何をしようとしたのかを返事で説明してもらい、分からなければ先へ進みません。

入力してもプレビューが変わらない・書き出せない

起きたことをそのままCodeに伝え、「今は修正せず、原因の候補と確認方法を教えてください」と頼みます。直してもらうときも、許可の確認を見てから選びます。