Feedback Session Report / vol.3

LP制作レビュー会 ＊ 3期生フィードバック フィードバックレポート vol.3

お忙しい時間にもかかわらず、最後までお付き合いいただきありがとうございました。
今回は7名分のLPを拝見しました。みなさん本当に完成度が高くて、こちらが感動した時間でした。
お一人ずつ丁寧にまとめましたので、ご自身の番から見ていってください。

3期生フィードバック会 レビュー対象 7名 進行 ちゃかな / ゆみ / あや
✦ ARCHIVE ✦

当日のアーカイブ動画

クリックして再生 — 当日のフィードバック会、まるごと録画です

TIMESTAMPS

  • 0:00すみーさん｜Next Stage
  • 14:25開会のご挨拶＆順番について
  • 16:33なっちゃん｜ロースイーツドーナツ
  • 29:52きえさん｜ピアノ教室
  • 44:10くわもんさん｜キャンドルWS
  • 58:43ゆきさん｜ピアノ講師GoogleMap講座
  • 1:19:00Claude Code使いこなし話
  • 1:24:41質問タイム（診断ツール／デプロイ）
  • 1:28:48のんちゃん｜ほぼ完成LP
  • 1:33:58ななちゃん｜動画クリエイター
  • 1:51:25締めのご挨拶
  • 1:52:35集合写真

はじめに

3期生のみなさん、今回もたくさんLPを出していただいて本当にありがとうございます。もう完成と言っていいレベルの方も多くて、私たち3人もいい刺激をもらいました。

このレポートでは、当日お伝えしたことを省略せずそのままお届けします。Claudeへの指示にコピペして使えるよう、プロンプト例も入れてあります。途中までで大丈夫なので、できたところからどんどんSlackに投げてくださいね。

そして当日に出てきた Claude Codeの使いこなしTips（メモリ・コンテキスト管理・スキル化・GitHub/Cloudflareデプロイ）も後半にまとめました。3期生だけでなく、ほかの方にも使ってもらえる内容になっています。

01

すみーさん

Next Stage ＊ スマホ動画編集講座 LP
全体感: 最初に拝見しましたが、本当にいい始まり方！ロゴが入って、フォントもおしゃれ、色のセンスも抜群。「Next Stage」というロゴ、写真の角丸の表現、オンマウスのふわっとした演出など、細部まで気持ちよく仕上がっています。

01全体の良かったところ

モデリング先のURLを貼って「こんな感じにしたい」と伝えるだけで、色のトーンや角丸の処理までAIが拾ってくる。任せ方が上手すぎでした。

02「Next Stage」ロゴ周りの調整

034番セクションの画像が消えている

4番のあたりで 画像が切れて文字が出ている状態。リンク切れの可能性があります。「文字が表示されている＝画像の代替テキストが見えている」状態なので、画像のリンク（パス）を確認してください。

4番セクションの画像が表示されず、代替テキスト「4ヶ月」だけが見えている状態です。画像のリンクを確認して、本来の画像が表示されるように修正してください。

04カリキュラム部分の文字サイズ

1ヶ月のカリキュラム（9月開始予定）の表示で、曜日や細かい説明文字が少し小さい。みなさんスマホで見るので、もう少し大きくしてOKです。

051番言いたいところを目立たせる

「自分らしさを整える」のような、すみーさんが 一番伝えたいキーメッセージ がもう少し目立ってもいいです。

「自分らしさを整える」の部分を、サイト全体の中で一番目立たせたいです。白い枠の中に濃い色の文字を入れる装飾、または、その文字だけふわっと現れるアニメーションをつけてください。

06特典セクションの装飾

テキスト区切りに使っている縦線（｜）や中黒（・）を、横棒（——）のあしらいに置き換えてください。 特典セクションには、内容に合わせた画像（チェックリストの絵、動画マニュアルのサムネなど）を配置してください。

07最後の「思い」セクション

08ファーストビューにボタンまで入れる

ファーストビューを スマホで開いた瞬間にCTAボタンまで見える 状態にしたい。現在は顔が隠れないように余白を取っていますが、ボタンも一緒に入りきる構成に。

スマホで開いた1画面目に、写真とタイトルとCTAボタンがすべて入りきるようにファーストビューを調整してください。スマホファーストでお願いします。
すみーさんは HTMLを昔書いていたとのことで、Claude Codeの感覚がすぐに掴めた様子。「やりたいことを伝えて微調整するだけ」というワークフロー、まさに理想形でした。
02

なっちゃん

ロースイーツドーナツ オンライン体験レッスン LP
全体感: 動画背景がインタラクティブで素敵！流れも世界観も上手にできています。
一番大きな課題は「色味の方向性」と「ファーストビューで何のLPか伝わるか」。3人で話してChatGPTでファーストビュー案を作ってみたので、参考にしてみてください。

01色味の方向性

赤と青のパキッとした色がご希望（プロフィール写真と統一感）だけど、食品LPだと真っ赤は少し難しいのと、お好みのパキッと感が活きるかどうか迷いどころでしたね。

02ChatGPTで作ったファーストビュー案

あやちゃんが、なっちゃんのお写真＋ドーナツ＋ロゴを ChatGPTに投げて、パキッとしたファーストビュー画像を作ってみました。「ロースイーツドーナツ オンライン体験」が一発で伝わる構成。

添付の画像をファーストビューに使ってください。 このファーストビューのカラーリング（オレンジ・赤の差し色、明るい雰囲気）に合わせて、サイト全体のトンマナを統一してください。要所要所にオレンジや赤を散りばめてリズムを出してください。

03背景動画の見せ方

インタラクティブな動画背景がとても素敵！ただ、文字を置くために 黒のオーバーレイ をかけているので、ドーナツが暗そう＝美味しくなさそうに見えてしまう瞬間があります。

04ファーストビューで何のLPか伝える

現状、何のLPかが パッと見て分かりにくい 状態。「砂糖なしでも満足できる、あげない焼かない夏ロースイーツドーナツ」の キャッチを大きく。

「ロースイーツ」の "ロー" は、知らない人には伝わりません（一部の人は "Law" のローと勘違いも）。
「砂糖なし／あげない・焼かない」 を全面に出した方が、初見でも刺さります。

05縦に入っている隠れ文字

モデリング先の影響で、ファーストビュー脇に 縦に入った文字が出てきています。これは無くしてOKです。

ファーストビュー脇に縦に表示されている文字は削除してください。

06ターゲットがママなら "親子" 要素を

07ドーナツ以外のロースイーツの見せ方

体験レッスンはドーナツがメイン。ただ、他にもロースイーツがあるのを匂わせたい、というニーズ。

08世界観の良さ

なっちゃんのLPは 世界観がしっかり出ているのがすごい。黄色い服のなっちゃんに、黄色のバッグを合わせて統一感を出すなど、デザインセンスがそのまま反映されています。素材の選び方も◎。

09動画・画像の軽量化

動画が大きすぎて反映できない状態とのこと。画質を落とさずに軽量化するライブラリ（ffmpeg / WebP等）をClaudeに入れてもらってください。

動画のクオリティはそのままで、サイト表示用に軽量化してください。画像はすべて WebP 形式に変換してください。 （既存の安全なライブラリ・ツールを利用してOKです）

3秒以上待たされると離脱するユーザーが急増するので、ここは最優先。

03

きえさん

ピアノ教室 LP（ピンク × ベージュ × ゴールド）
全体感: 構成がとにかく分かりやすい！「レッスンコース → 料金 → ボタン → 流れ → 講師紹介 → GoogleMap → 申し込み方法 → 一押し → 住所」と、迷うことなく読み進められる完璧な順序。色味もピンク × ベージュ × ゴールドで統一感あり。
課題は 音符の細部とカラー追加のさじ加減です。

01背景の音符のジクザク問題

後ろにふわふわ漂っている 音符の図形。よく見ると、丸（黒玉）と棒（伸ばし棒）が少しズレていて、ジクザクして見える状態です。

（音符部分のスクショを添付） 画像の音符の「丸（黒玉）」と「伸ばし棒」がズレています。 これらを重ねて、自然な音符の形にしてください。 具体的には、丸の中心と棒の根元が一致するようにお願いします。

02カラー追加の方向性

「もうちょっと色味を持たせたい」というご相談。新しい色を加えるのではなく、既にあるピンクの割合を増やすのがおすすめです。

03ファーストビューの明るさ

今は動画背景に黒のオーバーレイがかかっていて、少し暗い印象。文字を見せるためのオーバーレイは必要なのですが、「くり抜き型」のアプローチで両立できます。

ファーストビューの背景動画を、卵型のくり抜き図形の中だけに表示する形に変えてください。くり抜きの外側は白またはピンクの背景にして、文字をそちらに配置します。動画自体は色をそのままパキッと見せたいです。

04LINEのアイコン

現状、LINEのアイコンが 白い四角枠 + 中の吹き出しで、ピンクっぽくなって LINE感が弱まっています。

05動的な動きを少し加える

構成の練り込みが素晴らしく、初見でこの完成度はすごいです。あとは細部の磨きだけ。
04

くわもんさん

両味キャンドルワークショップ LP（ボタニカル）
全体感: 「おしゃれボタニカル」感が一気に出て、別物のように仕上がりました！流れも分かりやすく、Claudeに描いてもらったお花のイラストも本当に綺麗。
あえて言うなら、申し込み導線とファーストビューの情報整理がポイントです。

01ファーストビューの重複表現

ファーストビューに 「キャンドルワークショップ」が2か所登場しています。どちらか1つにまとめてOK。

02申し込み導線の整理

現状「Instagram DM」での申し込みとなっていますが、これは ユーザー側のハードルが高いです。何を書けばいいか迷ってしまう。

おすすめの動線

  1. すでに作っている 公式LINEに登録してもらう
  2. LINE内に フォームを置く（くわもんさんがあらかじめ日程の選択肢を用意）
  3. ユーザーは 選ぶだけで申し込み完了

「コピペでこれに返事してね」のような形にしておくと、ユーザーは 迷わないのでハードルがぐっと下がります。これがリストにもなります。

03絵文字 → SVGアイコンへ

セクション見出しの絵文字を、シンプルな SVGアイコンに置き換えると、ボタニカルの雰囲気と統一感が出てAI感が消えます。

セクション見出しの絵文字をすべて外し、雰囲気に合うシンプルな1色のSVGアイコンに置き換えてください。

04お花のイラストが素敵すぎ

Claudeが描いたお花のイラスト、本気で「素材かと思った」と全員で驚きました。「手書きの花を入れてください、エレガントな線で」と指示しただけでこのクオリティ。すごい。

05見出しを大きく

06固定CTAボタンの挙動

現状、ファーストビューに 固定ボタン＋ファーストビュー内のボタンが両方表示されていて、2個ボタンが見えている状態。

あるべき動き

  1. ファーストビューでは 固定ボタンを表示しない（FV内のボタンだけ）
  2. ファーストビューを 通り過ぎたら、固定ボタンがピュッと出てくる
  3. 1番下に来たら、固定ボタンが 消える（最下部のボタンと重ならないように）
固定CTAボタンの表示挙動を変えてください。 1. ファーストビューが見えている間は非表示 2. ファーストビューを過ぎたタイミングでスクロール連動してフェードイン 3. ページ最下部のCTAエリアに到達したら非表示

07ボタンのコピーは「LINEで申し込む」に

導線が公式LINE経由になるので、CTAボタンも「LINEで申し込む」で統一すると、ユーザーが何が起きるか予測できて安心。

08カリグラフィー文字の質感

ファーストビューに入れたカリグラフィー文字、Claudeに何度指示しても 太い・細いのコントラストが思い通りにならない、というお悩み。

05

ゆきさん

ピアノ講師のためのGoogleマップ活用＆3ヶ月伴走講座 LP
全体感: 内容は本当に素晴らしいのですが、現状 情報量が多くて読み解くのに集中力が必要な状態。
今回は 「構成を Opus で揉み直す」「ファーストビューで何を伝えるか」 がメインテーマです。あやちゃんがファーストビュー案も作ってみたので、参考にしてください。

01レスポンシブ＆スマホファースト

スマホファーストで全体を再構築してください。レスポンシブ対応で、スマホでもデスクトップでも崩れない設計にしてください。

02ファーストビューの優先順位

現状、「PTGL」（略称ロゴ）が一番大きい状態ですが、これは略称なので一番大きい必要はありません。

03ファーストビューの2名合成写真

04あやちゃんが作ったファーストビュー案

あやちゃんがゆきさんのファーストビュー案を作ってみました。「GoogleMap活用＋3ヶ月伴走で集客の仕組みを整える」がパッと見て分かる構成です。

※ ただし、Google Mapは「1ヶ月目（導入レッスン）」だけというのが当日判明したので、構成は要調整。

ファーストビューで伝えるべきこと

  1. 誰のためのサービスか（ピアノ講師）
  2. 何ができるようになるか（教室の集客が安定する）
  3. どうやって（3ヶ月の伴走＋GoogleMap活用を含む総合サポート）

05構成全体を Opus で揉み直す

情報量が非常に多く、順序の重複・情報の散らばりが課題です。これは Sonnet ではなく Opus を使って、構成段階から相談するのがおすすめ。

（このフィードバックレポートを添付） このフィードバックを踏まえて、LP全体の構成を組み直したいです。 まずはプランモードで、新しいセクション構成を提案してください。 実装はそのあとで行います。

06「個人の紹介」が2箇所に登場

07K先生の顔出し問題

K先生は顔出しNGとのことで、現状ぼかしで対応されていますが、ぼかしより「イラスト」の方が違和感が少なく雰囲気も保てます。

08「気約という自分を守る盾」が突然出てくる

「気約という盾」が突然登場して、文脈なくドラクエ感が出ています。3ヶ月で得られる変化のところに説明はあるのですが、登場と説明が離れているので混乱します。

09ビフォーアフター（向いてる先生・向いてない先生）

10キラーコピーがさらっと埋もれている

「インスタを毎日更新に頼り、正直吐きそうになりながら続けた」というコピー、めちゃくちゃ良い！リアルな共感を生むキラーコピー。
ただ、これがさらっと埋もれているので、もっと 大きく・印象的に 見せてもいい。

11「1人で6時間 → 伴奏で45分」の数字

これも超パワーワード！「1人で6時間かかっていた集客が、伴奏で45分でGoogleに掲載できた」という事実が、こっそり書いてあるだけでもったいない。

12「3ヶ月で何をしてくれるか」が薄い

これが LPの心臓部なのに、現状さらっと書かれていてもったいない。

13図の表示サイズ

06

のんちゃん

3期生で一番乗りの提出 ＊ ほぼ完成LP
全体感: 2日で仕上げてきたのに、もう 完成と言っていいレベル！スマホとPCのレスポンシブもばっちり、各セクションの文章も練られていて、デザインのこだわりも光る。指摘事項が見つからなくて困ったレベルです。

すでに反映済みの素晴らしいポイント

01お客様の声の顔写真

スマホ版で、お客様の声の顔写真の 頭と顎で切れている ところがあります。デスクトップ版はとても綺麗なのですが。

「お客様の声」セクションで、スマホ表示時に顔写真の頭と顎が切れています。顔がきちんと収まるようにアスペクト比や object-position を調整してください。

02声の配置間隔

03サービス内容のアイコンをおしゃれに

サービス内容セクション、現状 スマホ絵文字が使われている部分があるので、ページの雰囲気に合う おしゃれなアイコンに。

サービス内容セクションの絵文字を、内容別のSVGアイコンに置き換えてください。 - 同行ショッピング → 買い物バッグのアイコン - メイク → リップやコスメのアイコン など、内容を直感的に伝えるアイコンでお願いします。
全体としてもう 完成度がとても高いです。他のみなさんも、のんちゃんのLPは参考になるので、フィードバックチャットに貼ってくれているURLをぜひ見てみてください。1期生3,300円が安すぎる、と全員で口を揃えてました。
07

ななちゃん

動画クリエイター（撮影・リール制作）LP
全体感: 後ろの動画が前回より良くなっていて、右側にちょこっと入っている 固定のLINEバーもおしゃれ！
一方で、全体的に文字が多いのと、動線が分かりにくいのが課題です。構成を Opus で揉み直すのと、隠れている "宝の山"（LINEプレゼント候補）の活用が大きなポイント。

01ファーストビューのCTAを絞る

ファーストビューに 「LINEで相談する」「まずは話を聞いてみる」の2つのCTAがあって、押す側が迷う状態。

02ファーストビューのコピーが長い

現状「あなたの世界観を動画へ未どう撮影」「思いを込めた、込め込んだ空間へと〜」など、「〜へ」が連続して長く、何をする人かが伝わりにくい。

03全体の情報量が多すぎる

現状、上から2タップしたあたりで 離脱が激しそう な情報密度。「何でも書いてある」状態を「要点だけ伝わる」状態へ。

（このフィードバックレポートを添付） このLP、全体的に文字量が多いので、要点を絞って3割減を目安に構成し直してください。 詳細はアコーディオンや別タブに移動させ、メインの流れはシンプルに。 プランモードで先に構成を提案してください。

04「6フォト」表記の混乱

「6フォト」「6リール」など、表記が混在していて 動画なのか写真なのか分かりにくい状態。

05プラスマーク（+）の意味

「プランオプション」の表示で 「+」マークが使われていますが、これは ウェブデザインの慣習で「アコーディオン展開」に見えます。

06隠れている "宝の山" を表に出す（最重要）

「アカウント設計を存在にしてみる」を押すと、めちゃくちゃ作り込まれた「ギブの塊」みたいなページ に飛びます。ななちゃんが業界別におすすめアカウントを集めてくれている、神コンテンツ。

これを LPの中にひっそり置くのは本当にもったいないです。

提案：LINE登録特典として運用

  1. このコンテンツを LINE特典として位置付ける
  2. 「LINEに登録すると、業界別のおすすめアカウント診断が使えます」と告知
  3. LPからのCTA → 公式LINE登録 → 特典としてこのページにアクセス
  4. 結果として リスト取りになる

これ単体でも「LINEに登録する価値」が一発で伝わる強さがあります。

07ボタンの整理

08料金の根拠

09実績は上に持ってくる

すごい実績がある！のに、1番下に配置されている状態。

10モデリングは "見せ方" まで参考に

モデリング先のサイトを参考にするとき、内容だけでなく "見せ方" までモデリングするのがおすすめ。

（モデリング先の見せ方部分のスクショを添付） このスクショの見せ方を参考にしたいです。 具体的には、「サービス一覧の見せ方（アイコン＋枠＋短文）」「他社比較の表組み」「実績の数字の見せ方」を、私のLPに合わせて再現してください。

11動画の軽量化＆レスポンシブ

Claude Code 使いこなしメモ

— bonus tips from vol.3 —

01構成段階は Opus

LPの構成・骨組みを作る段階は、Sonnet ではなく Opus を使う。「フィードバックを揉んで構成し直して」と渡すと、Sonnetよりずっと深く考えてくれる。

02プランモード活用

いきなり実装に入らず、まず プランモードで構成を相談。納得してから実装に進むとトークン消費もぐっと減るし、出来上がりの満足度も上がる。

03コンテキスト管理

同じセッション内で会話が長くなると、Claudeが少しずつバカになる。残量バーが下がってきたら、「メモリして」とお願いして要点を保存してもらう。

04/compact と /clear

/compact：会話を圧縮しつつ記憶は残す。
/clear：完全に記憶喪失（メモリは残るので、次のセッションでメモリを読んで思い出してくれる）。

05メモリは MD ファイル

メモリは 軽量な MD ファイル として保存される。容量を圧迫しないので、こまめにメモリさせてOK。「今日の続き、明日もよろしく」も簡単。

06スキル化で繰り返しを楽に

同じ作業を何度もやるなら スキル化。「今日終わる時には必ず記録して」「GitHubにプッシュしてCloudflareにデプロイ」などをスキル化しておくと、一言で発動できる。

07スクショで指示する

「ここを直して」を言葉で伝えるより、スクショに丸をつけて渡す方が圧倒的に早い。Claude Codeのプレビュー機能の「要素を選択」も同じ役割。

08軽量化はおまじない

動画・画像が重いなら「画質はそのまま、軽量化してください」「画像は WebP に」と頼むだけでOK。ffmpegなど安全なライブラリを自動で導入してくれる。

09診断ツール等もClaude Codeで

診断・クイズ・フォーム等のツールも、LPと同じくClaude Codeで作れる。音声入力で「こういう意図でこういうの作りたい」と話すだけで形にしてくれる（Opus推奨）。

10公開はGitHub→Cloudflare

作ったツール／LPは GitHubにプッシュ → Cloudflare PagesでデプロイでURL化。これもスキル化しておけば「公開して」の一言で完了。

今回の学び

— takeaways from vol.3 —

01ファーストビューは "何のLP？"

「何のサービスか」が一発で伝わるか。装飾より、まずキーメッセージを大きく。スマホ1画面にタイトル＋写真＋CTAボタンまで収まることが理想。

02情報量より要点

全部書きたい気持ちはわかるけど、ユーザーは2タップで離脱する。詳細はアコーディオンや別ページに、メインは要点だけに絞る。

03動線は迷わせない

CTAボタンは数を絞る。Instagram DMより、フォーム＋公式LINEで「選ぶだけ」で完了できる動線が親切。

04絵文字はSVGアイコンへ

スマホ絵文字をSVGアイコンに置き換えるだけで、AI感が消えて雰囲気が大人になる。アイコンは内容を直感的に伝える形で。

05キラーコピーは目立たせる

共感を生む強いコピーや、すごい数字（時間短縮の比較など）が、さらっと書かれているのはもったいない。比較表や強調装飾で前に出す。

06実績は上にも出す

実績を1番下にだけ置くと、そこまで読まれず終わる可能性が高い。実績は上の方にも先出ししてから、流れに入っていく。

07スクショ指示は最強

細かい配置や音符のズレなどは、言葉では伝わりにくい。スクショで該当部分を見せて「1ピクセル左に」「ここを重ねて」と具体的に指示すると、一発で直る。

08動画・画像は WebP化

サイトの第一印象はロードの速さで決まる。動画はClaudeに「画質落とさず軽量化」、画像は「WebPに変換」と頼む。

09隠れた強み（プレゼント）はLINE特典に

LPの中に作り込んだコンテンツがある場合、それは LINE登録特典として切り出す。リスト取りにもなり、コンテンツも輝く。

10モデリングは "見せ方" まで

モデリング先は文章だけでなく、レイアウト・余白・装飾・数字の見せ方まで参考に。スクショで切り出してClaudeに渡すと再現してくれる。

11構成は Opus、実装は Sonnet

骨組みの再構築・複雑な思考は Opus、その後の細かい実装は Sonnet。プランモードで先に構成を揉むと結果的に早い。

12レスポンシブで揺れない

スマホで横揺れする＝レスポンシブ未対応。「スマホファーストで揺れないように」と指示すれば直る。実機で確認するのが一番確実。