お忙しい時間にもかかわらず、最後までお付き合いいただきありがとうございました。
今回は7名分のLPを拝見しました。みなさん本当に完成度が高くて、こちらが感動した時間でした。
お一人ずつ丁寧にまとめましたので、ご自身の番から見ていってください。
クリックして再生 — 当日のフィードバック会、まるごと録画です
3期生のみなさん、今回もたくさんLPを出していただいて本当にありがとうございます。もう完成と言っていいレベルの方も多くて、私たち3人もいい刺激をもらいました。
このレポートでは、当日お伝えしたことを省略せずそのままお届けします。Claudeへの指示にコピペして使えるよう、プロンプト例も入れてあります。途中までで大丈夫なので、できたところからどんどんSlackに投げてくださいね。
そして当日に出てきた Claude Codeの使いこなしTips（メモリ・コンテキスト管理・スキル化・GitHub/Cloudflareデプロイ）も後半にまとめました。3期生だけでなく、ほかの方にも使ってもらえる内容になっています。
4番のあたりで 画像が切れて文字が出ている状態。リンク切れの可能性があります。「文字が表示されている＝画像の代替テキストが見えている」状態なので、画像のリンク（パス）を確認してください。
4番セクションの画像が表示されず、代替テキスト「4ヶ月」だけが見えている状態です。画像のリンクを確認して、本来の画像が表示されるように修正してください。
1ヶ月のカリキュラム（9月開始予定）の表示で、曜日や細かい説明文字が少し小さい。みなさんスマホで見るので、もう少し大きくしてOKです。
「自分らしさを整える」のような、すみーさんが 一番伝えたいキーメッセージ がもう少し目立ってもいいです。
「自分らしさを整える」の部分を、サイト全体の中で一番目立たせたいです。白い枠の中に濃い色の文字を入れる装飾、または、その文字だけふわっと現れるアニメーションをつけてください。
テキスト区切りに使っている縦線（｜）や中黒（・）を、横棒（——）のあしらいに置き換えてください。
特典セクションには、内容に合わせた画像（チェックリストの絵、動画マニュアルのサムネなど）を配置してください。
ファーストビューを スマホで開いた瞬間にCTAボタンまで見える 状態にしたい。現在は顔が隠れないように余白を取っていますが、ボタンも一緒に入りきる構成に。
スマホで開いた1画面目に、写真とタイトルとCTAボタンがすべて入りきるようにファーストビューを調整してください。スマホファーストでお願いします。
赤と青のパキッとした色がご希望（プロフィール写真と統一感）だけど、食品LPだと真っ赤は少し難しいのと、お好みのパキッと感が活きるかどうか迷いどころでしたね。
あやちゃんが、なっちゃんのお写真＋ドーナツ＋ロゴを ChatGPTに投げて、パキッとしたファーストビュー画像を作ってみました。「ロースイーツドーナツ オンライン体験」が一発で伝わる構成。
添付の画像をファーストビューに使ってください。
このファーストビューのカラーリング（オレンジ・赤の差し色、明るい雰囲気）に合わせて、サイト全体のトンマナを統一してください。要所要所にオレンジや赤を散りばめてリズムを出してください。
インタラクティブな動画背景がとても素敵！ただ、文字を置くために 黒のオーバーレイ をかけているので、ドーナツが暗そう＝美味しくなさそうに見えてしまう瞬間があります。
現状、何のLPかが パッと見て分かりにくい 状態。「砂糖なしでも満足できる、あげない焼かない夏ロースイーツドーナツ」の キャッチを大きく。
モデリング先の影響で、ファーストビュー脇に 縦に入った文字が出てきています。これは無くしてOKです。
ファーストビュー脇に縦に表示されている文字は削除してください。
体験レッスンはドーナツがメイン。ただ、他にもロースイーツがあるのを匂わせたい、というニーズ。
動画が大きすぎて反映できない状態とのこと。画質を落とさずに軽量化するライブラリ（ffmpeg / WebP等）をClaudeに入れてもらってください。
動画のクオリティはそのままで、サイト表示用に軽量化してください。画像はすべて WebP 形式に変換してください。
（既存の安全なライブラリ・ツールを利用してOKです）
3秒以上待たされると離脱するユーザーが急増するので、ここは最優先。
後ろにふわふわ漂っている 音符の図形。よく見ると、丸（黒玉）と棒（伸ばし棒）が少しズレていて、ジクザクして見える状態です。
（音符部分のスクショを添付）
画像の音符の「丸（黒玉）」と「伸ばし棒」がズレています。
これらを重ねて、自然な音符の形にしてください。
具体的には、丸の中心と棒の根元が一致するようにお願いします。
「もうちょっと色味を持たせたい」というご相談。新しい色を加えるのではなく、既にあるピンクの割合を増やすのがおすすめです。
今は動画背景に黒のオーバーレイがかかっていて、少し暗い印象。文字を見せるためのオーバーレイは必要なのですが、「くり抜き型」のアプローチで両立できます。
ファーストビューの背景動画を、卵型のくり抜き図形の中だけに表示する形に変えてください。くり抜きの外側は白またはピンクの背景にして、文字をそちらに配置します。動画自体は色をそのままパキッと見せたいです。
現状、LINEのアイコンが 白い四角枠 + 中の吹き出しで、ピンクっぽくなって LINE感が弱まっています。
ファーストビューに 「キャンドルワークショップ」が2か所登場しています。どちらか1つにまとめてOK。
現状「Instagram DM」での申し込みとなっていますが、これは ユーザー側のハードルが高いです。何を書けばいいか迷ってしまう。
「コピペでこれに返事してね」のような形にしておくと、ユーザーは 迷わないのでハードルがぐっと下がります。これがリストにもなります。
セクション見出しの絵文字を、シンプルな SVGアイコンに置き換えると、ボタニカルの雰囲気と統一感が出てAI感が消えます。
セクション見出しの絵文字をすべて外し、雰囲気に合うシンプルな1色のSVGアイコンに置き換えてください。
現状、ファーストビューに 固定ボタン＋ファーストビュー内のボタンが両方表示されていて、2個ボタンが見えている状態。
固定CTAボタンの表示挙動を変えてください。
1. ファーストビューが見えている間は非表示
2. ファーストビューを過ぎたタイミングでスクロール連動してフェードイン
3. ページ最下部のCTAエリアに到達したら非表示
導線が公式LINE経由になるので、CTAボタンも「LINEで申し込む」で統一すると、ユーザーが何が起きるか予測できて安心。
ファーストビューに入れたカリグラフィー文字、Claudeに何度指示しても 太い・細いのコントラストが思い通りにならない、というお悩み。
スマホファーストで全体を再構築してください。レスポンシブ対応で、スマホでもデスクトップでも崩れない設計にしてください。
現状、「PTGL」（略称ロゴ）が一番大きい状態ですが、これは略称なので一番大きい必要はありません。
あやちゃんがゆきさんのファーストビュー案を作ってみました。「GoogleMap活用＋3ヶ月伴走で集客の仕組みを整える」がパッと見て分かる構成です。
※ ただし、Google Mapは「1ヶ月目（導入レッスン）」だけというのが当日判明したので、構成は要調整。
情報量が非常に多く、順序の重複・情報の散らばりが課題です。これは Sonnet ではなく Opus を使って、構成段階から相談するのがおすすめ。
（このフィードバックレポートを添付）
このフィードバックを踏まえて、LP全体の構成を組み直したいです。
まずはプランモードで、新しいセクション構成を提案してください。
実装はそのあとで行います。
K先生は顔出しNGとのことで、現状ぼかしで対応されていますが、ぼかしより「イラスト」の方が違和感が少なく雰囲気も保てます。
「気約という盾」が突然登場して、文脈なくドラクエ感が出ています。3ヶ月で得られる変化のところに説明はあるのですが、登場と説明が離れているので混乱します。
これも超パワーワード！「1人で6時間かかっていた集客が、伴奏で45分でGoogleに掲載できた」という事実が、こっそり書いてあるだけでもったいない。
これが LPの心臓部なのに、現状さらっと書かれていてもったいない。
スマホ版で、お客様の声の顔写真の 頭と顎で切れている ところがあります。デスクトップ版はとても綺麗なのですが。
「お客様の声」セクションで、スマホ表示時に顔写真の頭と顎が切れています。顔がきちんと収まるようにアスペクト比や object-position を調整してください。
サービス内容セクション、現状 スマホ絵文字が使われている部分があるので、ページの雰囲気に合う おしゃれなアイコンに。
サービス内容セクションの絵文字を、内容別のSVGアイコンに置き換えてください。
- 同行ショッピング → 買い物バッグのアイコン
- メイク → リップやコスメのアイコン
など、内容を直感的に伝えるアイコンでお願いします。
ファーストビューに 「LINEで相談する」「まずは話を聞いてみる」の2つのCTAがあって、押す側が迷う状態。
現状「あなたの世界観を動画へ未どう撮影」「思いを込めた、込め込んだ空間へと〜」など、「〜へ」が連続して長く、何をする人かが伝わりにくい。
現状、上から2タップしたあたりで 離脱が激しそう な情報密度。「何でも書いてある」状態を「要点だけ伝わる」状態へ。
（このフィードバックレポートを添付）
このLP、全体的に文字量が多いので、要点を絞って3割減を目安に構成し直してください。
詳細はアコーディオンや別タブに移動させ、メインの流れはシンプルに。
プランモードで先に構成を提案してください。
「6フォト」「6リール」など、表記が混在していて 動画なのか写真なのか分かりにくい状態。
「プランオプション」の表示で 「+」マークが使われていますが、これは ウェブデザインの慣習で「アコーディオン展開」に見えます。
これを LPの中にひっそり置くのは本当にもったいないです。
これ単体でも「LINEに登録する価値」が一発で伝わる強さがあります。
すごい実績がある！のに、1番下に配置されている状態。
モデリング先のサイトを参考にするとき、内容だけでなく "見せ方" までモデリングするのがおすすめ。
（モデリング先の見せ方部分のスクショを添付）
このスクショの見せ方を参考にしたいです。
具体的には、「サービス一覧の見せ方（アイコン＋枠＋短文）」「他社比較の表組み」「実績の数字の見せ方」を、私のLPに合わせて再現してください。
LPの構成・骨組みを作る段階は、Sonnet ではなく Opus を使う。「フィードバックを揉んで構成し直して」と渡すと、Sonnetよりずっと深く考えてくれる。
いきなり実装に入らず、まず プランモードで構成を相談。納得してから実装に進むとトークン消費もぐっと減るし、出来上がりの満足度も上がる。
同じセッション内で会話が長くなると、Claudeが少しずつバカになる。残量バーが下がってきたら、「メモリして」とお願いして要点を保存してもらう。
/compact：会話を圧縮しつつ記憶は残す。
/clear：完全に記憶喪失（メモリは残るので、次のセッションでメモリを読んで思い出してくれる）。
メモリは 軽量な MD ファイル として保存される。容量を圧迫しないので、こまめにメモリさせてOK。「今日の続き、明日もよろしく」も簡単。
同じ作業を何度もやるなら スキル化。「今日終わる時には必ず記録して」「GitHubにプッシュしてCloudflareにデプロイ」などをスキル化しておくと、一言で発動できる。
「ここを直して」を言葉で伝えるより、スクショに丸をつけて渡す方が圧倒的に早い。Claude Codeのプレビュー機能の「要素を選択」も同じ役割。
動画・画像が重いなら「画質はそのまま、軽量化してください」「画像は WebP に」と頼むだけでOK。ffmpegなど安全なライブラリを自動で導入してくれる。
診断・クイズ・フォーム等のツールも、LPと同じくClaude Codeで作れる。音声入力で「こういう意図でこういうの作りたい」と話すだけで形にしてくれる（Opus推奨）。
作ったツール／LPは GitHubにプッシュ → Cloudflare PagesでデプロイでURL化。これもスキル化しておけば「公開して」の一言で完了。
Claude Codeの 「コンテキストウィンドウ」 って何ですか？青がどんどん増えてるんですが、何か対策はありますか？満タンになったら、もう使えなくなるのでは……と心配しています。
満タンになっても、使えなくなることはありません。どうぞご安心ください。
まず、いまみなさんが見ているのはこの画面ですよね。
↑ この画面の 上の青いバー が「コンテキストウィンドウ」、下の3本 が「プランの使用状況」です。
なぜ大丈夫なのか、そもそも「コンテキスト」って何なのかを、できるだけやさしくご説明しますね。
Claude Codeと会話している間、AIはそのやりとりをぜんぶ覚えながら作業しています。あなたが出した指示、読み込んだファイルの中身、AI自身が返した答え——こういったものが、ぜんぶ一枚の「作業机」の上に広げられているイメージです。
コンテキストウィンドウは、その 「机の広さ（＝AIが一度に見ていられる情報量）」 を表しています。
会話を続けたり、ファイルを読ませたりするたびに、机の上に紙が積み重なっていきます。だから作業すればするほど青い部分が増えていく——これは 正常な動き で、故障ではありません。
画面の 388.1k / 1.0M（39%） のような表示は、「机の広さ100万のうち、いま39%使っている」という意味です（※この 1.0M＝100万 という机は、実はかなり大きいサイズです）。
ここが一番安心してほしいところです。机がいっぱいになりそうになると、Claude Codeが 自動で"お片付け" をしてくれます。古いやりとりを要約して1枚にまとめ直し、元の紙は片付けてスペースを空け、そのまま作業を続けます。
この自動お片付けを 「コンパクト（compact）」 と呼びます。つまり、満タンで止まる・使えなくなる、ということは起きません。勝手に整理して続けてくれます。
放っておいても自動で片付きますが、より快適に使いたい方は、入力欄に次のコマンドを打つこともできます。
/clear … 机をまっさらにリセット。今までと全然ちがう作業に切り替えるときに。/compact … 今の作業の流れは残したまま、会話を要約して軽くする。同じ作業を続けたいときに。/context … いま何が机のスペースを使っているかを確認できる。ちょっとしたコツとして、長い文章やファイルを 直接コピペで貼り付けるより、「このファイルを読んで」とお願いしてClaude自身に読ませる ほうが、机を圧迫しにくいです。
この青い「コンテキストウィンドウ」のバーと、その下にある「プランの使用状況（5時間制限・週次）」は、まったく別物です。
「使える／使えない」に関わるのは 下のプラン使用状況のほう で、上の青いバーは"今の会話の机"の話なので、満タンでも心配いりません。
/clear や /compact で自分でも整理できる青が増えても焦らず、普段どおり使って大丈夫です ✦
「何のサービスか」が一発で伝わるか。装飾より、まずキーメッセージを大きく。スマホ1画面にタイトル＋写真＋CTAボタンまで収まることが理想。
全部書きたい気持ちはわかるけど、ユーザーは2タップで離脱する。詳細はアコーディオンや別ページに、メインは要点だけに絞る。
CTAボタンは数を絞る。Instagram DMより、フォーム＋公式LINEで「選ぶだけ」で完了できる動線が親切。
スマホ絵文字をSVGアイコンに置き換えるだけで、AI感が消えて雰囲気が大人になる。アイコンは内容を直感的に伝える形で。
共感を生む強いコピーや、すごい数字（時間短縮の比較など）が、さらっと書かれているのはもったいない。比較表や強調装飾で前に出す。
実績を1番下にだけ置くと、そこまで読まれず終わる可能性が高い。実績は上の方にも先出ししてから、流れに入っていく。
細かい配置や音符のズレなどは、言葉では伝わりにくい。スクショで該当部分を見せて「1ピクセル左に」「ここを重ねて」と具体的に指示すると、一発で直る。
サイトの第一印象はロードの速さで決まる。動画はClaudeに「画質落とさず軽量化」、画像は「WebPに変換」と頼む。
LPの中に作り込んだコンテンツがある場合、それは LINE登録特典として切り出す。リスト取りにもなり、コンテンツも輝く。
モデリング先は文章だけでなく、レイアウト・余白・装飾・数字の見せ方まで参考に。スクショで切り出してClaudeに渡すと再現してくれる。
骨組みの再構築・複雑な思考は Opus、その後の細かい実装は Sonnet。プランモードで先に構成を揉むと結果的に早い。
スマホで横揺れする＝レスポンシブ未対応。「スマホファーストで揺れないように」と指示すれば直る。実機で確認するのが一番確実。