入力で見た目が変わる、LP編集アプリを作る。

作ったLPを、入力で変えられる道具にする。

ここまではClaude Codeに頼んで1枚のLPを作りました。今回は一歩進み、商品名や説明文を自分で入力すると、LPの見た目が変わる小さなWebアプリを作ります。

この UNIT の依頼文は、2026年11月12日に Windows 10 Home のパソコンで、Claudeアプリの Code に実際に送って確かめたものです。返事の引用は、そのときの会話の記録から写しています。ページの写真は、同じパソコンの Microsoft Edge を画面を出さない形で動かして撮ったページの表示です（Edge の枠は写っていません）。

「LP」と「LP編集アプリ」は、違うファイル。

同じように見えても役割は異なります。LPは読者に見てもらうページ。LP編集アプリは、そのページの内容を作るための道具です。今回は元のLPを直接書き換えず、新しい道具を別フォルダに作ります。

先に「できあがるもの」を体験する。

操作を理解する最も早い方法は、完成見本を触ってみることです。まずサービス名を変更し、右側のプレビューがその場で変わるか確認してください。次に色を選び、HTMLをダウンロードしてみます。

この図は操作の説明用です。本物の操作デモは別ページにあり、ブラウザ内で動きます。制作した自分のアプリとは別物です。

まだ作らずに、画面の構成と作る場所を見る。

1. ClaudeアプリのCodeで、サイドバーの「新規作成」から新しいセッションにし、UNIT 03のSTEP 03と同じ方法で lp_learning を選びます。
2. 入力欄の下にlp_learning、右側に「手動」と出ているかを見ます（UNIT 06の写真1と同じ画面です）。
3. 下の1通目をコピーして貼り、文の先頭が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 の中のファイルは変更しないでください。ほかのファイルは作成・変更・削除しないでください。
コマンドの実行、公開、外部への送信はしないでください。
まず、画面の構成と作成するファイルの場所を示して、私の確認を待ってください。
まだファイルは作成しないでください。

この1通目は読むだけなので、この教材の確認では許可の確認は出ませんでした。計画を見るときは、次の3つを確かめます。

• 作るのが lp_editor の中の index.html の1つだけであること
• 入力した文字を文字として表示する（HTMLとして実行しない）と書かれていること
• 外部の画像・フォント・ライブラリ・送信の機能を使わないこと

計画でよければ、1つのファイルだけを作ってもらう。

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

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

brief.md、start.md、lp_sample の中のファイルは変更しないでください。

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

1. 「Claude に index.html の書き込みを許可しますか？」と出たら、場所が lp_editor かを見ます（lp_sample ではないこと）。
2. よければ「一度だけ許可」を押します。この教材の確認では、確認は1回でした。

タップ・クリックで拡大

この教材の確認では、作ったあと、Claudeアプリの右側のブラウザの欄でClaudeが表示を確かめました（読み取りだけで、クリックや入力・書き出しはしていません。このとき許可の確認は出ませんでした）。それでも、試すのは STEP 05 で自分で行います。

入力・プレビュー・書き出しを、自分で確かめる。

1. エクスプローラーで lp_learning → lp_editor を開き、index を右クリック →「プログラムから開く」→「Microsoft Edge」で開きます（写真3）。
2. サービス名や見出しを変えて、プレビューがすぐ変わるかを見ます。
3. 見出しに <b>テスト</b> と入れて、太字にならずそのままの文字で出るかを見ます。
4. 「HTMLを書き出す」を押し、保存されたファイルを Edge で開いて、入力した文字で表示されるかを見ます。

タップ・クリックで拡大

タップ・クリックで拡大

タップ・クリックで拡大

ORIHATAの確認では、初期値が brief.md の内容になっていること、入力でプレビューが変わること、<b> のような文字やスクリプトが実行されないこと、書き出したファイル（lp.html）が開けること、13通りの幅ではみ出しがないことを、Edge と Chrome で確かめました。

「動いた」だけで終わらず、4つのケースを試す。

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

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

自分で作り、自分で確かめられたら完了。

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