AIでピラティスのLP制作。読むだけで終わらせない設計。

こんにちは、Kumo Designの楠本です。

今回はマンツーマンピラティスのLPを、Claude Codeで作りました。

ただ「きれいなLPを作る」ではなく、タップすると診断結果が変わるチェックリストを入れています。読むだけで終わらせない設計です。

この記事では、制作前に言語化した4つのことと、実際に使ったプロンプトをそのまま公開します。

なぜ「4つの言語化」から始めるのか

AIにLPを作らせると、だいたい「それっぽいけど、どこかで見たもの」が出てきます。

理由はシンプルで、指示が曖昧だからです。「おしゃれなピラティスのLPを作って」と投げると、AIは学習データの平均値を返します。誰も嫌わない代わりに、誰の記憶にも残らないものです。

なので私は、手を動かす前にこの4つを必ず言葉にします。

1｜ゴール

痩せることではなく、体の形を整える価値を伝えて、体験予約につなげる。

ここを「予約を増やす」だけにすると、ありがちな訴求になります。「何を価値として伝えた結果、予約につながるのか」まで書くのがポイントです。

今回は「体重」ではなく「形」を価値の中心に置きました。この一行が決まると、以降の判断が全部ぶれなくなります。

2｜悩み・課題

ピラティスのLPは、やさしい雰囲気だけで作ると、ほかのサイトと同じに見えやすい。

女性向け＝やわらかい色、丸い形、細い明朝体。この組み合わせは正解ではありますが、全員が同じ正解を選んでいる状態です。

課題を言語化しておくと、AIが「無難な方向」に寄ったときに気づけます。

3｜提供価値

体重ではなく、姿勢や左右差に目を向けてもらうこと。

これはターゲットの視点を変える作業です。

「痩せたのに、きれいに見えない」という状態を言語化してあげると、読み手は自分ごとになります。ファーストビューのコピーは、ここから決まりました。

痩せたのに、きれいに見えない。その理由は、形です。

4｜参考サイト — ここが一番大事

同業に限らず、余白と明朝体がきれいな女性向けサイトを選び、構造だけを参考にする。

参考サイトは「真似する対象」ではなく「構造を借りる対象」です。

見るべきは配色やあしらいではなく、

・ファーストビューで何を言い切っているか
・共感 → 原因 → 解決 の順番がどう組まれているか
・CTAがどこに、何回置かれているか

この3つです。世界観は自分の案件に合わせて翻案します。

実装したインタラクション

タップで変わる診断チェックリスト（推しポイント）

「食事を減らしてもお腹だけ出ている」など5つの悩みを並べ、タップするとチェックが入ります。

そして該当数に応じて、

・半円メーターが伸びる（色も5段階で変化）
・診断メッセージが変わる（「はじまりのサインです」→「いますぐ、形を戻す段階です」）
・「このまま何もしなかった場合の戻りにくさ」が、いま／3ヶ月後／1年後の3本のバーで伸びる

読むだけのLPと、自分の状態として体験できるLPでは、そのあとの行動が変わります。

そのほかの動き

・スクロールに合わせたフェードアップ
・カードが順番に出てくるスタッガー
・グラフのライン描画（体重は横ばい、ウエストは下がる、を線の形で見せる）

ただ、動きは入れすぎません。

目立たせるためではなく、内容を理解しやすくするために使う。これだけ決めておくと、動きが「素人っぽく」なりません。

そのまま使えるプロンプト

あなたは女性向けブランドサイトを数多く手がける、
優秀なアートディレクター兼フロントエンドエンジニアです。
参考サイトの構造を読み解き、別ジャンルへ翻案するのが得意です。

【業種・サービス名】の女性向けLPを1枚のHTMLで作ってください。

参考サイト：【参考サイトのURL】

制作前に、次の4つを踏まえてください。

ゴール：【何につなげたいか】

2. 悩み・課題：【ターゲットが今つまずいていること】

3. 提供価値：【何に目を向けてもらうか】

4. 参考サイトから引き継ぐのは「構造」だけ。配色・書体・世界観は
【ターゲット】向けに翻案する

構成は ファーストビュー → 共感 → 原因 → 解決策 の順。

共感パートは、タップでチェックできるリストにしてください。
該当数に応じて、メーターと診断メッセージ、「このまま何もしなかった場合」の
数値が連動して変わるようにします。

動きは、スクロールに合わせたフェードアップ、カードが順番に出るスタッガー、
グラフのライン描画を入れてください。ただし装飾ではなく、内容の理解を助ける目的で使います。

配色は2〜3色に絞り、角丸・影・カードを多用しないでください。

使うときのコツ

【 】の中を埋めるだけで動きます。ただし、4つを埋めるときに手を抜かないでください。

「ゴール：予約を増やす」ではなく「痩せることではなく体の形を整える価値を伝えて、体験予約につなげる」まで書く。ここの解像度が、そのまま出力の解像度になります。

参考サイトは、同業だけでなくいろんな業界を見てみてください^^同業だと構造ごと似てしまう場合があるので、視野を広げるのもコツです！

まとめ

AIでLPを作る時代になっても、参考を選ぶ目と、言語化する力は変わらず武器になります。

むしろ、手を動かす部分をAIが担うぶん、その前段の判断がそのまま成果物の差になります。

Instagram @_kumo_design

AI時代のデザインについて、個別相談もやっています。
詳しくは公式LINEから。
👇kumo_design 公式LINE