GRILL · LP SYSTEM · Ver 2.0

美容クリニックLP
制作ガイド

AIを使って新規LPをゼロから作る手順書。
Gift Clinic銀座LP（v4）が原型。最短20分で公開できる。

📄 Gift Clinic v4 ベース 🤖 Claude / AIDesigner 📱 スマホ対応
はじめに

最初の1回だけやること

初めてLPを作る前に、以下の3つを準備しておく。一度やれば次からは不要。

1
AIDesigner MCP を Claude Code に接続する
Claude Code のターミナルで以下を実行してセットアップ：
npx -y @aidesigner/agent-skills init

実行後、Claude Code を開いて /mcp コマンドを実行 → aidesigner にサインイン。
サインイン後、/aidesigner コマンドが使えるようになる。
初回のみ必要
2
Unsplash のアカウントを作る（フリープランでOK）
unsplash.com/developers でアカウント登録 → アプリを作成 → Access Key を取得。
無料プランで月50リクエスト/時間まで使える。LPの背景・内観写真の検索に使う。

取得したキーはメモしておく（Claude に渡すか、自分で管理する）。
院長・症例写真は実写を使うので、必須ではない。背景写真が必要な時だけ。
3
クライアントの素材をフォルダに格納する
LPで使う写真は projects/lp/ の下にクライアント名のフォルダを作ってまとめて入れる。

フォルダ構成の例：
フォルダ構成
projects/lp/ ├── ○○クリニック-lp-v1.html ← LPファイル本体 ├── ○○クリニック-lp-v2.html ← 修正版（旧バージョンは消さない） └── ○○クリニック-assets/ ← 素材フォルダ ├── doctor/ │ └── director.jpg ← 院長写真 ├── cases/ │ ├── case-01.jpg ← 症例写真（部位別） │ ├── case-02.jpg │ └── ... └── ogp.jpg ← SNSシェア用サムネイル（1200×630px）
💡
HTMLからの参照は相対パス：src="○○クリニック-assets/doctor/director.jpg" のように書く。/make-lp や AIDesigner に渡す際は「素材は ○○-assets/ に入っています」と伝えると自動でパスを設定してくれる。
準備が終わったら → この順番で進める
01Claude で LP を生成（/make-lp）→ 詳細へ
02デザインを変えたい場合は AIDesigner を使う → 詳細へ
03モバイルファースト で確認・修正 → 詳細へ
04写真がない場合は フリー素材 で補う → 詳細へ
05迷ったら エージェントにディベートさせる → 詳細へ
06公開前チェック → 詳細へ
Workflow · 01

基本：Claudeで LP を生成する

Claude Code（PC）で /make-lp コマンドを使うのが一番速い。 クライアント情報を渡すだけで完全な1ファイルHTMLが出力される。

1
クライアントから素材・情報を集める
必須：LINE URL、施術名・価格、院長名
あれば：院長写真、症例写真（部位別4枚以上）、モニター情報、FAQ
写真がなければフリー素材で代替可（後述）
2
Claude Code で /make-lp を実行
以下の形式でコマンドを渡す。
Claude Code コマンド例
/make-lp クリニック名: ○○クリニック 施術名: 糸リフト 院長名: ○○先生 症例数: 1,500件以上 LINE URL: https://lin.ee/XXXXX モニター: あり（Nリフト ¥15,000〜） 料金: Nリフト ¥25,000〜 / アルテミスリフト ¥60,000〜 FAQ: 痛みはありますか？/ダウンタイムは？/バレますか？/持続期間は？
3
出力されたHTMLを projects/lp/ に保存
ファイル名は ○○クリニック-lp-v1.html の形式で保存。
修正が入ったら -v2, -v3 と番号を上げていく。旧バージョンは消さない。
4
写真パス・LINE URL を実際の値に差し替え
テキストエディタで LINE_URL と画像パスを検索して置き換える。
画像は gift-assets/ のような専用フォルダに入れると管理しやすい。
5
公開・URLを共有
ファイルを配置すれば即アクセス可能：
https://lp.grill-dashboard.uk/{ファイル名}.html
Workflow · 02

AIDesigner MCP — デザインをAIに生成させる

Claude に接続している AIDesigner MCP を使うと、プロンプトからHTML/CSSデザインを自動生成できる。 /make-lp との違いは「デザインの自由度」。make-lpは決まった型で速く作れる。AIDesignerはより独自のデザインが出せる。

💡
使い分けの目安：
· make-lp：Gift Clinic v4 と同じクオリティ・同じ型で速く作りたい → こちらを使う
· AIDesigner：デザインを変えたい、クライアントに合わせたオリジナルデザインを作りたい → こちらを使う
1
DESIGN.md を作る（推奨）
クライアントフォルダ（例：projects/design-md/○○クリニック/）に DESIGN.md を作る。
カラー・雰囲気・ターゲット・セクション構成を書いておくと AIDesigner の精度が上がる。
参考：projects/design-md/leap-clinic/DESIGN.md
なくてもコマンドだけで動く。精度を上げたい時に作る。
2
/aidesigner でデザインを生成
Claude Code で実行：
コマンド例
/aidesigner ○○クリニック 糸リフトLP。高級感・医療信頼感。 クリーム×ゴールドカラー。LINE予約導線。モバイルファースト。
3
出力を確認・refine で修正
気に入らない箇所は追加指示で修正できる：
/aidesigner CTAボタンをもっと目立たせて。HEROの文字を大きく。
4
projects/lp/ に保存して公開
生成されたHTMLは .aidesigner/mcp-latest.html に保存される。
内容確認後、LPフォルダにコピーして LINE URL・写真を差し替えて公開。
⚠️
クレジット消費に注意：AIDesigner は1回の生成でクレジットを消費する。まず DESIGN.md や要件を整理してから呼び出す。2〜3回の refine で仕上げる想定で動く。
Workflow · 03

モバイルファーストで作る

LPの閲覧の大半はスマホ経由。にもかかわらず、PCで作るとPC画面で確認しながら進めるため、気づかずPC寄りのデザインになりやすい。 最初からスマホ表示を正として設計することで、完成度が上がる。

📱
なぜモバイルファーストか：美容クリニックへの問い合わせの多くはSNS広告経由で、閲覧デバイスはほぼスマホ。PC版は「スマホ版が自然に広がった結果」として設計すると、ユーザー体験が一貫しやすい。

設計の進め方

1
AIへの指示でモバイルを「主」として指定する
/make-lp や AIDesigner に渡すプロンプトに 「モバイルファースト」「スマホ表示を優先」 と明示する。
指定しないと PC 寄りのレイアウトで生成されやすい。
2
確認は Chrome DevTools のスマホ表示で行う
ブラウザで F12 → 左上のデバイスアイコン → iPhone 14 Pro などを選択。
PC画面での見た目を確認する前に、必ずスマホ表示を先に見る習慣をつける。
これをやるだけで品質が変わる
3
モバイルで先に整えてからPCを調整する
CTAボタンの大きさ・文字サイズ・余白・画像の見え方をスマホで確認・修正してから、PC表示を見て追加調整する順番で進める。

モバイルで特に確認すべきポイント

👆
CTAボタンのタップ領域
最低44px以上の高さを確保。小さすぎると押せない。フローティングCTAは親指が届く下部に配置。
📝
文字サイズ
本文は最低14px以上。12px以下は読めない。キャッチコピーは画面幅に合わせて clamp() で可変にする。
🖼️
HERO画像の見え方
PC用の横長画像をそのまま使うと顔が切れる。モバイルHEROは縦長構図の写真か、フルスクリーン背景画像で使う。
↔️
横スクロールが発生していないか
コンテンツが画面幅をはみ出すと横スクロールが発生する。必ず overflow-x: hidden を確認する。
Assets · 01

フリー素材 API — 写真がない時の代替

院長・症例写真は必ず実写を使う。フリー素材の「医師風写真」は別人が院長に見えるのでNG。
背景・内観・雰囲気写真にフリー素材を使うのはOK。

🖼️
Unsplash（最推奨）
高品質写真が無料。APIキー不要でURLに直埋め。商用OK。
https://source.unsplash.com/1200x800/?clinic,beauty
📸
Pexels API
無料APIキー取得後に使える。キーワード検索で写真を取得。商用OK。
api.pexels.com/v1/search?query=clinic
🎲
Lorem Picsum
URLにサイズを入れるだけ。プロトタイプ・開発中の仮画像専用。
https://picsum.photos/800/600
🤖
AI生成（Midjourney等）
「清潔な白いクリニック内装」などの背景写真をAI生成。人物写真はNG。
⛔
使ってはいけない
・他クリニックの症例写真（著作権違反）
・SNSから拾った画像
・フリー素材の医師風人物写真
・解像度の低い症例写真（ぼやけ）
⚠️
Picsum は公開時に必ず差し替える：ランダムURLは毎回別の写真が出てしまう。公開時は Unsplash 固定ID または実写に変える。
Quality · 01

さらに品質を上げるテクニック

Gift Clinic LP v4 にまだ入っていない実装。優先度順に並んでいる。コードはそのままコピーして使える。

★
Before/After スライダー
症例写真を左右ドラッグで比較するUI。クリニックLPで最も効果的な要素。「ここまで変わるのか」という驚きを演出できる。input[type=range] とCSSだけで実装可能。
優先度 高
★
スクロールアニメーション
セクションが画面に入った瞬間にフェードインする演出。ライブラリ不要・純粋なJSで実装。「滑らかに出てくる感」だけで高級感が上がる。
優先度 高
2
OGP タグ（SNSシェア最適化）
LINEやInstagramでURLをシェアした時にサムネイルと説明文が出るようにする設定。6行追加するだけ。
優先度 中
2
構造化データ（JSON-LD）
Google検索結果にクリニックの住所・電話番号・営業時間を出す設定。LocalBusiness スキーマを追加するだけ。
優先度 中
3
動画背景 HERO
院内の雰囲気動画をHEROに流す。素材があれば空気感を伝えられる。必ず autoplay muted loop playsinline を設定する。
優先度 低（素材がある場合のみ）

コピーして使えるスニペット

JS · スクロールフェードイン（ライブラリなし）
/* CSS: アニメーションさせたい要素に class="fade-in" を付ける */ .fade-in { opacity:0; transform:translateY(24px); transition:opacity 0.7s ease, transform 0.7s ease; } .fade-in.visible { opacity:1; transform:translateY(0); } /* HTML */ <section class="fade-in">...</section> /* JS: bodyの閉じタグ前に追加 */ const obs = new IntersectionObserver( entries => entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); } }), { threshold: 0.15 } ); document.querySelectorAll('.fade-in').forEach(el => obs.observe(el));
HTML+CSS+JS · Before/After スライダー
<!-- HTML --> <div class="ba"> <img class="ba-after" src="after.jpg" alt="施術後"/> <div class="ba-before-wrap"><img src="before.jpg" alt="施術前"/></div> <input type="range" class="ba-slider" min="0" max="100" value="50"/> </div> /* CSS */ .ba { position:relative; overflow:hidden; border-radius:12px; user-select:none; } .ba-after { display:block; width:100%; height:auto; } .ba-before-wrap { position:absolute; inset:0; overflow:hidden; width:50%; } .ba-before-wrap img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .ba-slider { position:absolute; inset:0; opacity:0; cursor:col-resize; width:100%; height:100%; margin:0; } /* JS */ document.querySelectorAll('.ba-slider').forEach(s => s.addEventListener('input', () => s.previousElementSibling.style.width = s.value + '%') );
HTML · OGP タグ（<head> に追加）
<meta property="og:title" content="○○クリニック｜糸リフト専門"/> <meta property="og:description" content="糸リフト2,000件以上。無料カウンセリング受付中。"/> <meta property="og:image" content="https://lp.grill-dashboard.uk/○○/ogp.jpg"/> <meta property="og:url" content="https://lp.grill-dashboard.uk/○○-lp-v1.html"/> <meta property="og:type" content="website"/> <meta name="twitter:card" content="summary_large_image"/>
Quality · 02

エージェント同士をディベートさせる

1人のAIに「良いLPを作って」と頼むより、異なる立場のエージェント同士に議論させて最終判断を引き出す方が質が上がる。 自分では気づかない盲点が炙り出されやすく、コピー・構成・デザインの判断に使える。

💡
基本の型：「AはXを主張。BはYを主張。議論して結論を出してください。」
役割・主張・結論の出し方の3点を指定すると精度が上がる。

登場するエージェント

以下のエージェントは Grill のシステムに定義済み。ディベートプロンプトでそのまま名前で呼べる。

Kate（コピーライター）
CVR最大化のコピー専門家。「伝わらなければ存在しないのと同じ」。医療広告ガイドラインを熟知した上でギリギリの表現を探る。
Lily（クリエイティブディレクター）
「見た目が9割」「ファーストビューで勝負が決まる」。感性とデータの両方でクリエイティブを判断するCD。
Amy（UIデザイナー）
「足すな、引け」のミニマリスト。ピクセルパーフェクトにこだわり、ユーザーの認知負荷を下げることに集中する。
Noah（データアナリスト）
数字と根拠で語る。感覚論を嫌い、CVR・CTR・滞在時間などの指標から判断する。

ディベートプロンプト例

ケース 1 — キャッチコピーをどちらにするか迷っている時
コピー案の優劣をディベートさせる
以下の2案について、Kate（コピーライター）と Noah（データアナリスト）の立場でディベートしてください。 【案A】「それ、糸リフトで変わります。」 【案B】「2,000件の実績が、あなたの不安を解消します。」 Kate：コピーとして「刺さる」かどうかの観点で案を評価・主張 Noah：CVRデータ・心理学的根拠から優劣を論じる 最後に Lily（クリエイティブディレクター）が両者の意見を聞いて最終判断を下してください。 ターゲット：30〜50代女性。SNS広告経由でLPに流入してくる。
ケース 2 — 価格をどこで出すか迷っている時
LP内の価格表示タイミングをディベートさせる
美容クリニックLPで「価格をどこで最初に見せるか」について議論してください。 【Lily の立場】：HEROの直下（告知バー）で先に価格を出すべき。安さがフックになる。 【Amy の立場】：先に症例・院長・信頼を積み上げてから価格を出すべき。安売り感が出る。 それぞれの立場で主張した後、以下の条件でどちらが正しいか結論を出してください。 ・施術：糸リフト（Nリフト ¥11,000〜モニター価格） ・ターゲット：価格に敏感だが品質も気にする30代女性 ・流入元：Meta広告（CPC型）
ケース 3 — CTAボタンのコピーを最適化したい時
CTAボタンのテキストを3者で議論させる
LPのメインCTAボタンのテキストについて、3人で議論してください。 現在のCTA：「LINEで無料相談・予約」 Kate：CVRを上げるためのコピー改善案を3つ提示して根拠を説明する Amy ：ボタンのUX（文字数・読みやすさ・行動の明確さ）の観点で評価する Noah：A/Bテストの観点で「どれが勝ちやすいか」を仮説立てする 議論の後、最も勝率が高いと思われるCTAを1つ選んで理由を述べてください。
ケース 4 — セクション構成の優先順位を決めたい時
LP構成の順序をエージェントに検討させる
新しいクリニックLP（糸リフト専門、症例2,000件、銀座）の構成について議論してください。 Lily の案：HERO → 症例写真 → 料金 → 院長 → FAQ → CTA Kate の案：HERO → 院長 → 症例写真 → 料金 → FAQ → CTA それぞれの案の「なぜその順番なのか」を議論させ、ユーザーの心理フロー（信頼→興味→行動）の観点で最適な構成を決めてください。 なお流入元はInstagram広告で、ユーザーはブランドを知らない状態でLPに入ってきます。
ケース 5 — LPのクオリティを総合的にレビューさせたい時
完成したLPを複数視点でレビューさせる
以下のLPをそれぞれの専門視点でレビューしてください。 [LPのHTMLまたはURLをここに貼る] Kate ：コピー（キャッチ・CTA・マイクロコピー）の改善点を指摘 Amy ：UIデザイン（余白・文字サイズ・タップ領域・視線誘導）の改善点を指摘 Noah ：CVRを下げている可能性がある箇所を数値根拠付きで指摘 Lily ：全体のクリエイティブ方針として「このLPは勝てるか」を総評 最後に優先度順（高・中・低）で改善リストを出してください。
💡
ディベートを活かすコツ：「どちらが正しいか答えを出してください」まで書くのが重要。議論だけで終わらせると結論が曖昧になる。最終判断を下すエージェントを1人指名しておくと締まりがよい。
Pre-Launch

公開前チェックリスト

Grill Inc. · LP制作ガイド v2.0 · 2026-04 原型: Gift Clinic 銀座 LP v4