landing-page-design

ワークショップで実装した動くアプリを題材に、「商品として売り出すLPを作る体験」 を提供する対話スキル。verify-project が「自分用ピッチ原稿」を作るのに対して、こちらは 「お客さんに買ってもらうための言葉」 を練る。

目的

• 「動くものができた」だけで終わらず、売り視点で自分のプロダクトを見直す 一手間を体験させる
• マーケコピーの基本型（ヒーロー → 課題 → ベネフィット → 使い方 → 差別化 → 価格 → CTA）を1回通すことで、「機能を並べる」から「結果を語る」への発想転換を促す
• 1セッション内で コピー作成 → HTML 実装 まで一気通貫で完了させる（最後に frontend-design スキルを自動で呼び出して着地）

前提

起動時に .claude/skills/workshop-premises.md（標準構成）を読み、時間枠・技術・成果物・有料 API の扱いはそれに従う。このファイル内には固定値を置かない。前提ファイルが見つからない場合は、標準構成（1日完結・Next.js・デプロイなし・成果物は動くアプリ + LP）を前提にして進める。あわせて .claude/skills/conversation-principles.md（対話の共通原則）も読み、聞き方・書き方・ファイルの扱いはそれに従う。

想定時間

30〜50分のミニセッション。コピー作成（30〜40分）+ frontend-design 自動起動による HTML 生成・確認（5〜10分）。workshop-premises.md の標準構成では成果物が「動くアプリ + LP」なので、verify-project の後に本線として実施する。前提ファイルで成果物を「アプリのみ」にした場合は、早く終わった参加者向けの選択肢に戻す。

既存スキルとの関係

scope-design → build-app → verify-project（等身大の検証・ピッチ骨子）
                          ↓
                    landing-page-design（売り視点・本スキル）
                          └─→ frontend-design（HTML 実装に着地）
                          ↓
                    study-plan（メタ認知）→ ピッチ発表 → archive-project（持ち帰り）

• verification.md は必須ではない。動くアプリ + input.md / scope.md があれば成立する。あれば読んで、ワンライナーや「特に効いた機能」をコピーの種にする
• HTML実装は frontend-design スキルに委譲。本スキルの最終フェーズで Skill ツールを使って自動起動するので、ユーザーは1コマンドで HTML まで届く

書き出し先

• 売り文句を整理した中間素材: projects/<プロジェクト名>/landing-page.md
• LP本体（HTML）は別スキル（frontend-design）で projects/<プロジェクト名>/apps/lp/ 配下に作成

起動時のふるまい

1. 対象プロジェクトのディレクトリを確認（現在地 or 参加者に聞く）。確認できたら progress.log に start 行を追記する（共通原則 14。書き出し時は write 行）

2. input.md / scope.md / apps/ 配下のソースを軽く読んで文脈を把握する。apps/<アプリ名>/README.md があれば起動手順を確認し、verification.md があればそれも読む

3. 最初に必ず以下を促す：

   「まず自分のアプリを起動して（起動手順: apps/<アプリ名>/README.md）、1分ほど『買い手目線』で触ってみてください。いま自分が初めてこのアプリを見たとして、お金を払う気になりますか？ 何が刺さればお金を払いますか？ 触り終えたら、感じたことを何でもいいので教えてください」

   ここで出た言葉をコピーの種としてメモし、以降の対話で引用する。

対話の大原則

共通原則（1問ずつ・代筆しない・逐次書き出し・実物を触らせる）は conversation-principles.md に従う。このスキル固有の原則：

• 買い手目線で触らせ続ける。「この質問に答えるために、もう一度アプリで○○を試してきてください」と戻す。verify-project の「課題を解けているか」ではなく「お金を払う気になるか」が基準
• 機能ではなく結果を引き出す。参加者が「○○機能があります」と答えたら「それを使うと、ユーザーの何が変わりますか？」と返す
• ターゲットが「みんな」「○○全般」になりがち。1人に絞ることを徹底する

---

ビジュアル素材の方針

• 実スクショは使わない。代わりに デフォルメしたイラスト・SVG・アイコン で雰囲気を出す
• 参加者は「こういうビジュアルが欲しい」を 言葉で指定 する（例: 「ヒーローには朝の移動中にスマホを見ている人物のシンプルなSVGイラスト」「ベネフィット3つは時計・グラフ・無料マークの横並びアイコン」）
• 実物の生成は frontend-design スキル側に委譲する

---

Phase 1: ターゲットを1人に絞る（5分）

質問1

「このLPを見せたい人を 具体的な1人 に絞ってください。名前・立場・年齢・住んでる場所・困っていること、を1分人物紹介してみてください」

• 「利用者全般」「忙しい人」のような抽象答えはNG。「具体的な1人」に戻す
• 例: 「工学部1年の佐藤くん、市内のワンルーム在住、バス通学、1限の実験に遅刻したくない」

質問2

「その人がいま、このアプリがない世界で 一番イラっとしている瞬間 はどこですか？」

• 課題提起セクションの種になる
• 「不便」レベルではなく「イラっと」という強い動詞で具体に寄せる

landing-page.md の「## ターゲット」「## 解きたい瞬間」として書き出す。

---

Phase 2: ヒーローコピー（10分）

質問3

「3秒 でこのアプリを説明するなら、なんと言いますか？ 一文でお願いします」

• 長すぎたら「半分にしてみてください」で削る
• 「○○ができるアプリ」より「○○な人が、○○できるようになる」のほうが刺さる、と必要に応じてヒント

質問4

「そのメインコピーを補強するサブコピーを 1〜2文 で。『誰のための、何で、なぜ今これか』のうち足りない要素を埋めてください」

landing-page.md の「## ヒーローセクション」（メインコピー / サブコピー）として書き出す。

ビジュアル指定（質問5）

「ヒーロー部分のメインビジュアル、どんな絵が浮かびますか？ 写真ではなく シンプルなイラストやアイコン を想定して、言葉で説明してみてください」

• 例: 「スマホを片手に予定表を見る人物のシンプルなSVGイラスト」「朝焼けっぽい薄いオレンジ→水色のグラデーション背景」

landing-page.md の「## ビジュアル指定」に追記。

---

Phase 3: ベネフィット3つ（10分）

質問6

「アプリを実際に触ってきてください。一番"おっ"となる画面・操作 はどこですか？ そこで、ユーザーは 何を得ています か？」

• 「グラフが綺麗に出る」→「朝のピーク帯が一目で分かる」のように、機能から結果に翻訳させる

質問7

「他にも、このアプリを使うと その人の1日 がどう変わりますか？ 2つ追加してください」

• 機能の羅列ではなく結果ベースで3つ揃える
• 結果が出ない参加者には「使う前/使った後」のビフォーアフターで聞き直す

landing-page.md の「## ベネフィット」を3項目で書き出す。各項目は 見出し1行 + 説明1〜2行 + ビジュアル指定 の構成。

---

Phase 4: 使い方と差別化（7分）

質問8

「初めての人がこのアプリで 結果に辿り着くまでの最短ステップ を3つで。実際にアプリで操作してみて、ステップを書き出してください」

• 4ステップ以上になりそうなら「3つに収めるなら、何と何をまとめますか？」

質問9

「これに似た既存サービス（あるいは『何もしないこと』）と比べて、このアプリの強み は何ですか？」

• 既存サービス例を参加者が思いつかないなら、scope.md のスコープ外や、idea.md で却下した案を引き合いに出す
• 強みが「無料」しか出ないなら「速さは？」「データの信頼性は？」と切り口を足す

landing-page.md の「## 使い方（3ステップ）」「## 差別化」を書き出す。

---

Phase 5: 価格と CTA（5分）

質問10

「もしこれを売るとしたら、いくら で誰から取りますか？ 無料・有料・フリーミアム、どれが筋がいいと思いますか？」

• 「無料」と即答した場合も理由を聞く（「個人は無料、企業・学校などの組織導入は有料」のような層別を引き出すと深まる）
• 値段の根拠（コスト・代替手段との比較・使う人の節約価値）を一言添えさせる

質問11

「LPの CTAボタン は何と書きますか？ 押したら何が起きますか？」

• 例: 「いますぐ無料で試す」→ アプリ本体に飛ぶ／「学校導入を相談」→ 問い合わせフォーム
• 押した先の挙動が決まらないなら「今は実装せず、ボタンだけ置いて押すと alert で『準備中』」も可と伝える

landing-page.md の「## 価格」「## CTA」を書き出す。

---

Phase 6: 書き出し → HTML 実装まで一気通貫（3〜10分）

完成形の確認

projects/<name>/landing-page.md を一通り表示し、以下を伝える：

「ここまでが 売る言葉 の部分です。続けて HTML のペライチを生成しますか？ 進める場合はそのまま frontend-design スキルを呼び出して、projects/<name>/apps/lp/ にHTMLを書き出します。コピーを直したい場合は遠慮なく言ってください。あわせて レビュー用のページ（HTML）を作りますか？ 内容に読むときの観点を添えて、ブラウザで読める形にします。ペアフィードバックで相手に見せるのにも使えます（LP 本体とは別に、コピー案を観点付きで読むためのものです）」

レビューページを求められたら review-page.md に従って projects/<name>/review/landing-page.html を作る（共通原則 15）。landing-page.md を差分更新したときは、ページがあれば聞かずに作り直す。

Skill ツールで frontend-design を自動起動

参加者が「進めて」「OK」「お願い」など肯定の意を示したら、Claude が直接 Skill ツールを呼び出して frontend-design を起動する。手動で /frontend-design を打たせない。

呼び出し例：

Skill(
  skill: "frontend-design:frontend-design",
  args: "projects/<name>/landing-page.md を元に、ペライチのランディングページを作成してください。出力先は projects/<name>/apps/lp/index.html と style.css。

要件:
- landing-page.md の各セクション（ヒーロー / ベネフィット / 使い方 / 差別化 / 価格 / CTA）をすべて含める
- ビジュアル指定セクションに従って、写真ではなくシンプルな SVG イラスト or アイコンで雰囲気を出す
- ターゲット人物（具体的な1人）に向けたトーンで仕上げる
- レスポンシブ対応（スマホでも崩れない）"
)

実際の <name> と内容は対象プロジェクトのものに置き換える。

生成後の確認

frontend-design が apps/lp/ に書き出したら、realpath projects/<name>/apps/lp/index.html で絶対パスを取り、ユーザーに以下を伝える（相対パスだけでは参加者がブラウザに貼れない）：

「projects/<name>/apps/lp/index.html に書き出しました。ブラウザのアドレスバーに貼って開いてください： file:///<realpath で取った絶対パス>/projects/<name>/apps/lp/index.html 気になる箇所があれば対話で詰められます。例：『ヒーローのコピーをもう少し弱気な表現に』『ベネフィットの3番目の説明を短く』『アクセントカラーを変えたい』」

参加者が修正を要求したら、コピー側の修正は landing-page.md を Edit で差分更新（必要なら frontend-design に再生成依頼）。HTML側だけの修正なら直接 index.html / style.css を編集する。

コピーを直したい場合

参加者が Phase 6 の冒頭で「もう少しコピーを直したい」と言えば、Phase 1〜5 の該当箇所を Edit で差分更新する（全体書き直しはしない）。直し終わってから frontend-design を呼び出す。

---

landing-page.md のフォーマット

# <プロジェクト名> — ランディングページ用コピー

## ターゲット

<具体的な1人。名前・立場・年齢・住まい・困りごと>

## 解きたい瞬間

<その人が今イラっとしている瞬間>

## ヒーローセクション

### メインコピー
<3秒で伝わる一文>

### サブコピー
<1〜2文の補強>

## ベネフィット

### 1. <見出し>
<説明>
- ビジュアル指定: <シンプルなアイコン/イラストの言葉指定>

### 2. <見出し>
<説明>
- ビジュアル指定: ...

### 3. <見出し>
<説明>
- ビジュアル指定: ...

## 使い方（3ステップ）

1. <ステップ1>
2. <ステップ2>
3. <ステップ3>

## 差別化

<他サービス/何もしない選択肢と比べた強み>

## 価格

<無料 / 有料 / フリーミアム + 根拠>

## CTA

- ボタン文言: <例: いますぐ無料で試す>
- 押したら起きること: <挙動>

## ビジュアル指定

- ヒーロー: <例: 朝の移動中にスマホを見る人物のシンプルなSVGイラスト + 朝焼けグラデーション背景>
- カラー: <例: アクセント = 大学カラーの緋色 #DC1430 / ベース = 白>
- 雰囲気: <例: 朝の清々しさ・親しみやすさ>

---

参考: サンプル1（bus-arrival-dashboard）の場合の想定アウトプット

入力: samples/01_bus-arrival-dashboard/（通学バス所要時間ダッシュボード）

# 通学バス所要時間ダッシュボード — ランディングページ用コピー

## ターゲット

工学部1年・佐藤くん。市内のワンルーム在住、バス通学。1限の実験に遅刻
できないが、毎朝バスがどれくらい遅れるか分からず、起床時刻を勘で決めている。

## 解きたい瞬間

寝る前に「明日、何時に起きればいい？」を考えるとき。Google Maps を開いても
リアルタイム情報は当日にしか出ず、前夜の段階では「だいたいでいいから時間帯別の
混みやすさ」が知りたい。

## ヒーローセクション

### メインコピー
明日、1限に間に合う出発時刻を、寝る前1分で。

### サブコピー
国土交通省の道路交通センサスから、時間帯別の所要時間を可視化。
会員登録もチャットも要らない、駅→キャンパスの通学プランナー。

## ベネフィット

### 1. 寝る前1分で、明日の起床時刻が決まる
到着希望時刻を選ぶだけで「○:○○頃に出発」が出る。逆算して目覚ましをセットすれば
朝の不安がゼロに。
- ビジュアル指定: スマホ画面の中に時計のアイコンが浮かぶイラスト

### 2. ピーク帯と空いてる時間帯が一目で分かる
時間帯別グラフで、朝7時台が+20分混むこと、9時台なら15分早く着くことが瞬時に分かる。
- ビジュアル指定: シンプルな折れ線グラフのアイコン（朝の山・夕方の山が見える）

### 3. アカウント登録なし・完全無料・オフラインでも動く
公的データを事前集計した静的サイト。閉域でも開ける、ログインも不要。
- ビジュアル指定: チェックマーク3つ（アカウント不要 / 無料 / オフライン対応）

## 使い方（3ステップ）

1. 出発エリア（最寄り駅周辺など）を選ぶ
2. 到着希望時刻（例: 8:30）を選ぶ
3. 「○:○○頃に駅を出発／所要○○分」を確認

## 差別化

- **Google Maps との違い**: リアルタイム情報ではなく、公的統計データから「時間帯ごと
  の傾向」を見せる。前夜に予測したい人にハマる
- **チャットボットとの違い**: 質問→回答の往復が要らない。グラフで時間帯比較が一覧
  できる
- **何もしない世界との違い**: 勘で起きて遅刻する／毎朝余裕を持ちすぎて寝不足、を
  両方避けられる

## 価格

- 学生個人向け: **完全無料**（学業支援を狙うため）
- 学校・自治体ライセンス: 月3,000円〜（路線追加・地域カスタマイズ込み）
- 根拠: 既存の交通アプリは個人向けに月数百円のものもあるが、本アプリは公的データ
  ベースで運用コストが極めて低く、個人向けは無料化できる

## CTA

- ボタン文言: いますぐ無料で試す
- 押したら起きること: アプリ本体（同ドメインの `/app`）に遷移してダッシュボードが開く

## ビジュアル指定

- ヒーロー: スマホを片手に時間割表を見る学生のシンプルなSVGイラスト。背景は朝焼け
  っぽい薄オレンジ→水色のグラデーション
- カラー: アクセント = 大学カラーの緋色っぽい #DC1430 / ベース = オフホワイト
- 雰囲気: 朝の清々しさ・新生活の前向きさ。重たくしない

---

このスキルが生む体験

1. 動くアプリを 「買い手の目」で触り直す 30〜50分が体験できる
2. 機能ではなく 「ユーザーの1日がどう変わるか」 を語る言葉が手に入る
3. デフォルメイラストの言葉指定まで含めて 「LPに必要な素材一式」 が landing-page.md に揃う
4. 1セッション内で HTML のペライチ実物まで完成する（frontend-design を自動起動）。参加者は別コマンドを覚える必要がない
5. 価格を考える経験を通じて、ビジネス授業の知識をプロダクトに接続 できる