ORIHATA LEARNING LAB
学習トップ›UNIT 04

UNIT 04 · LEARN BY BUILDING

LPを作る前に、誰に何を伝えるか決める。

いきなり「いい感じに作って」と頼むのではなく、読む人と届けたい内容を決めてから制作を始めます。決めた内容は、lp_learning の中に brief.md という企画メモとして残します。

読者と内容を決める
↓
内容を見せてもらう
↓
許可して brief.md に保存
第2章:LPを1枚作る目安30〜40分。UNIT 03で lp_learning をCodeで選び、start.md を作った状態から始めます。
START · 今回のゴール

まだコードは書きません。何を作るか決めます。

今回は、架空の「SNS画像デザイン室」というサービスのLPを考えます。LPは、SNSなどから来た人にサービスを伝え、次の行動へ進んでもらうページです。

今回のゴール

「誰の」「どんな悩みを」「どう助けるか」「次にどんな行動をしてほしいか」を決め、UNIT 03と同じ「内容を見せてもらう → 許可する → 自分で確かめる」の流れで、lp_learning の中に brief.md という企画メモを作ってもらう。

ここでは実際の申し込み受付は作りません。最初のボタンは、同じページの「サービス内容」へ移動する安全な練習用の仕組みにします。

Macをお使いの方へ

この教材の操作手順と画面写真は、Windowsのパソコンで実際に操作して確かめたものです。Macでは、フォルダの場所や開き方、画面の一部が異なります。Macでの手順は、この教材では確かめていません。公式のデスクトップアプリを始めるもあわせて確認してください。

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

STEP 01 · 企画を決める

6つの欄で、作る内容を言葉にする。

例文を入れてあります。はじめは例文のままで進めるのがおすすめです(この教材の写真は、例文のままで撮影しています)。自分の商品がある人は、入力内容を置き換えても構いません。

ページの中で何と名乗る?
「みんな」ではなく1種類の読者を想定
読者の立場で書きます
実際に提供できる内容だけを書く
ページを開いた瞬間に伝えたいこと
誰向けのサービスか分かる短い一文
入力内容は外部に送信されません。画面を離れると消える場合があります。

YOUR BRIEF · 入力内容の確認

brief.md に書く企画の中身

サービス名
SNS画像デザイン室
誰に
SNSで情報発信する個人事業主
困りごと
投稿画像を作る時間が取れず、発信が続かない
提供すること
発信内容に合わせたSNS投稿用画像を1枚ずつ制作する
大きな見出し
伝えたいことが、見た目でも伝わる。
補足文
SNSで発信する個人事業主を、投稿画像づくりでサポートする架空のサービスです。
次の行動
「サービス内容を見る」→ 同じページの #service(サービス内容の説明)へ移動

6つの欄はすべて入力が必要です。空欄があると、STEP 03の依頼文を作らず、コピーボタンも押せなくなります。

事実と架空を区別する。このサービスは学習用の架空のものです。利用者の声・実績・販売価格を、実在する情報のようには作りません。
STEP 02 · 作業場所と「手動」を確かめる

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

ClaudeアプリのCodeを開き、サイドバーの「新規作成」で新しいセッションにします。UNIT 03のSTEP 03と同じ方法で、「作業するフォルダを選択」→「フォルダを開く…」から lp_learning を選びます。

  1. 入力欄の下にlp_learningと出ているか見ます(写真1の左下の枠)。
  2. 入力欄の下の右側が「手動」になっているか見ます(写真1の右下の枠)。「自動」などになっていたら、押して「手動」を選びます(UNIT 03のSTEP 05)。
  3. 「このワークスペースを信頼しますか?」が出たら、UNIT 03のSTEP 04と同じように、自分で用意した lp_learning なら「ワークスペースを信頼」を押します。
Codeの新しいセッションの画面。入力欄に、STEP 03の依頼文を貼り付けた状態(まだ送っていない)。入力欄の下の帯に「このコンピューター」と lp_learning、右側に「手動」と表示されている。
写真1 左下の黄色の枠:入力欄の下の lp_learning。右下の黄色の枠:権限が「手動」。入力欄には、STEP 03の依頼文を貼り付けただけで、まだ送っていません。

新しいセッションでは、権限が最初「自動」になっていることがあります(UNIT 03の撮影時)。送る前に、毎回「手動」を確かめてください。

STEP 03 · 1通目:内容を見せてもらう

まだ作らせずに、作る予定の内容を見せてもらう。

STEP 01 の内容から作った依頼文を、Codeの入力欄に貼り付けて送ります。最後の3行で、ほかのファイルと start.md を変えないこと、まだ作らず、内容を先に見せることを頼んでいます。

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

CODE の入力欄に貼る 1通目:まず内容を見せてもらう
現在選択している lp_learning フォルダの中に、
brief.md という企画メモのファイルを作成してください。

内容は次のとおりです。

# LP企画書(学習用)

## サービス名
SNS画像デザイン室

## 対象読者
SNSで情報発信する個人事業主

## 読者の困りごと
投稿画像を作る時間が取れず、発信が続かない

## 提供すること
発信内容に合わせたSNS投稿用画像を1枚ずつ制作する

## ファーストビューの見出し
伝えたいことが、見た目でも伝わる。

## 補足文
SNSで発信する個人事業主を、投稿画像づくりでサポートする架空のサービスです。

## 行動ボタン(1つ)
「サービス内容を見る」 → 同じページの #service に移動

## 安全と範囲
- 学習用の架空サービス。実在の販売・受付は行わない
- 実績、利用者の声、価格などを創作して掲載しない
- まずはローカルで確認する。公開しない
- 1工程ずつ、本人が承認・確認する

ほかのファイルは作成・変更・削除しないでください。すでにある start.md も変更しないでください。
まず作成する内容を提示し、私の確認を待ってください。
まだファイルは作成しないでください。
STEP 01 を例文のままにした場合、実機の確認で実際に送った文章と同じです。入力を変えると、この文も変わります。

送ると、Claudeが作る予定の内容を示します。写真2では、「まだファイルは作成していません」(上の枠)と作成先(下の枠)が書かれ、その下に brief.md の中身が示されました。

Claudeの返事。「作成予定の内容は以下のとおりです。まだファイルは作成していません。」の下に、作成先(フォルダの場所は灰色で隠してある)と「新規作成。ほかのファイルと start.md には触れません」、その下に brief.md の中身(LP企画書(学習用)、サービス名、対象読者、読者の困りごと、提供すること、ファーストビューの見出し、補足文、行動ボタン、安全と範囲)が示されている。
写真2 上の黄色の枠:「まだファイルは作成していません」。下の黄色の枠:作成先。作成先のフォルダの場所は灰色で隠しています。
返事の言い方は、毎回同じとは限りません。写真と言い方が違っても大丈夫です。次の3つが返事から読み取れるかで判断します。
  • まだ作っていないこと(許可の確認が出ていない)
  • 作るのがbrief.md の1つだけで、作成先がlp_learning の中であること
  • 中身が、STEP 01 で決めた内容と同じこと(実績・利用者の声・価格などが足されていない)

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

STEP 04 · 2通目:見てから「一度だけ許可」

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

内容でよければ、次のように返信します。

CODE の入力欄に貼る 2通目:作成をお願いする
提示された内容で brief.md を作成してください。
実機の確認で実際に送った文章です。このあと、書き込む前に許可の確認が出ます。

権限が「手動」なので、書き込む前に「Claude に brief.md の書き込みを許可しますか?」と確認が出ます(写真3の上の枠)。その下に、書き込む内容が行番号つきで表示されます。

許可の確認の画面。「入力が必要です」の下に「Claude に brief.md の書き込みを許可しますか?」と表示され、書き込み先(フォルダの場所は灰色で隠してある)と、書き込む内容が行番号つきで示されている。下に「拒否」と「一度だけ許可」のボタンがある。
写真3 上の黄色の枠:許可の確認。下の黄色の枠:「一度だけ許可」。書き込み先のフォルダの場所は灰色で隠しています。
  1. ファイル名がbrief.mdで、書き込み先がlp_learning の中かを見ます。
  2. 表示された内容が、STEP 03で見せてもらった内容と同じかを見ます。
  3. よければ「一度だけ許可」を押します。違っていたら「拒否」を押し、直してほしいところを返信します。
一度だけ許可

今回の書き込みだけを許可します。この教材ではこれを選びます。

拒否

今回の書き込みをさせません。内容や場所が違うときに使います(押したあとの動きは、この教材では確かめていません)。

この確認で見えたボタンは、撮影時(UNIT 04)は「拒否」と「一度だけ許可」でした。UNIT 03の撮影時は「常に許可」「一度だけ許可」「許可して Auto に切り替え」が並んでいました。表示はアプリの版や状況で変わることがあります。どの場合も「一度だけ許可」を選びます。

許可すると、Claudeが brief.md を作り、結果を知らせます。右側の欄の「成果物」にも brief.md が出ました(撮影時)。

写真4 左(スマホでは上):作成を知らせる返事(黄色の枠)。右(スマホでは下):右側の欄の「成果物」に brief.md(黄色の枠)。同じ画面の2か所を切り抜いて並べています。

写真4のように、作業の途中で英語の短い文(Claudeの作業のメモ)が表示されることがあります。返事の言い方も毎回変わります。大切なのは、作ったのが brief.md だけで、start.md など、ほかのファイルを変えていないと書かれているかです。それもSTEP 05で、自分の目で確かめます。

STEP 05 · 自分の目で確かめる

エクスプローラーで、2つのファイルを見る。

AIの「作成しました」だけで終わらせず、実際のフォルダを確かめます。

  1. UNIT 03と同じ方法で、エクスプローラーのアドレス欄に%USERPROFILE%と入れてホームフォルダを開き、lp_learningをダブルクリックします。
  2. 一覧にbriefとstartの2つがあれば成功です(写真5の枠)。
  3. start の更新日時が、UNIT 03で作ったときのまま(今日より前の日時など)になっていることも見ます。
エクスプローラーで lp_learning を開いた画面。アドレス欄の一部は灰色で隠してある。一覧の見出し「名前」「更新日時」「種類」「サイズ」の下に、brief と start の2つのファイルがあり、種類はどちらも「Markdown ソースフ…」(途中で切れて表示)、サイズは 1 KB と表示されている。
写真5 lp_learning の中に brief と start の2つ(黄色の枠)。拡張子(.md)は、Windowsの設定によっては表示されません。

撮影では、start の更新日時は前の日(UNIT 03で作った日時)のままでした。中身を見たいときは、右クリックして「プログラムから開く」→「メモ帳」で開けます(この操作の画面は撮影していません)。開いたら、何も変えずに閉じます。

Claudeに任せる

作る予定の内容を示すこと、brief.md の作成、できたファイルの報告。

自分で確認する

作業場所が lp_learning か、権限が「手動」か、作るのが brief.md だけか、中身が決めた内容と同じか、start.md が残っているか。

AIへの依頼文に書いた約束だけで、操作が自動的に禁止されるわけではありません。権限を「手動」にして、許可の確認で作成先と内容を自分の目で見ることが、実際の安全の仕組みです。
HELP · つまずいたら

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

依頼文が出ない・コピーボタンが押せない

STEP 01 に空欄があります。案内が出ている欄を入力してください。「例文に戻す」を押すと、例文に戻ります。

コピーボタンを押しても貼り付けられない

依頼文の欄の文をマウスで選んでコピーし、Codeの入力欄に貼り付けます。

入力欄の下が lp_learning ではない

何も送らずに、サイドバーの「新規作成」で新しいセッションにして、UNIT 03のSTEP 03の方法で lp_learning を選び直します。

1通目を送ったら、すぐ許可の確認が出た

まだ作る段階ではないので「拒否」を押し、「まず作成する内容を提示し、私の確認を待ってください。」と返信します(この教材の確認では、1通目で許可の確認は出ませんでした)。

示された内容が、決めた内容と違う

2通目を送らずに、違うところを伝えて直してもらいます。実績・利用者の声・価格などが足されていたら、消すように頼みます。

確認が出ないまま、ファイルが作られた

入力欄の下の右側が「手動」か確かめます。違っていたら「手動」に戻します(UNIT 03のSTEP 05)。できた brief.md の中身は、エクスプローラーとメモ帳で確かめます。

まちがえて「常に許可」を選んだ

UNIT 03の画面の説明では、そのセッションは確認が求められなくなります。入力欄の下の表示を確かめ、「手動」に戻すか、新しいセッションで始め直します(戻したあとの動きは、この教材では確かめていません)。

すでに brief.md がある

前に作ったものかもしれません。上書きさせずに、いったん止めて、エクスプローラーとメモ帳で中身を確かめてから決めます。

エクスプローラーに brief が見つからない

開いているのが lp_learning か、アドレス欄で確かめます。Claudeの返事や許可の確認に出ていた作成先も見直します。別の場所にできていた場合は、消したり動かしたりせずに、そのことをメモして止めます。

同じ失敗が2回続いた

同じ操作をくり返さず、いったん止めます。表示された文章と、自分がした操作をメモして、公式のヘルプを確かめます。

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

FINISH · 完了チェック

企画メモができたら、ここを確認。

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

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

確かめの問題(答えは押すと開きます)

Q1. STEP 01 の欄を1つ空にしました。依頼文はどうなりますか?

依頼文は作られず、コピーボタンも押せません。空欄のままの不完全な企画メモを作らないためです。案内の出た欄を入力します。

Q2. 1通目の返事に、頼んでいない「利用者の声」が足されていました。どうしますか?

2通目を送らずに、足された部分を消して、決めた内容のとおりにするよう返信します。この教材の架空のサービスでは、実績・声・価格を作りません。

Q3. Claudeの返事の言い方が、写真と少し違いました。失敗ですか?

失敗ではありません。返事の言い方は毎回変わります。まだ作っていないこと、作るのが lp_learning の中の brief.md だけであること、中身が決めた内容と同じであることを確かめます(STEP 03)。

次のUNITにつながるもの

完成した brief.md を読ませて、最初のLP画面を作ります。企画内容を毎回長く書き直す必要がなくなります。