DESIGN.md — 蛍光ライム×濃紺のパーソナルジム LP（Neon Lime and Navy Personal Gym LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 美容サロン・エステ・脱毛 ／ 雰囲気: ポップ・元気、力強い・インパクト、スポーティ、情報量多め・訴求型
• キーワード: 蛍光ライム・濃紺・スポーティ・訴求型・手書きアクセント・明るいグレー地
• 地の質感: フラットな塗りが基本。カードと CTA には軽いドロップシャドウを付け、背景には薄いモノクロ写真を透かして敷く。
• 形: 角丸カード、ライムの円、ギザギザの吹き出し、ピンで留めたメモ紙、斜めに切れた番号ラベル。
• 温度感: 高彩度でエネルギッシュ。濃紺が全体を引き締め、信頼感を残している。

Colors

• 地は明るいグレーと白を基本にし、要所に蛍光ライムの全面帯と濃紺の帯を挟んでリズムを作る。
• ライムは FV・特典・円形装飾・番号ラベルなど『元気さ』を出す面に使う。本文の地には使わない。
• 濃紺地の上の見出しはライムで、本文は白で書く。
• 主 CTA は青一色にする。ライムと競合させない。
• 価格・無料など数字の強調はピンク。値引き前の価格は取り消し線で示す。
• 問い合わせ方法ごとに枠の色を変える（電話=青、LINE=緑、メール=ピンク枠＋クリーム地）。

Typography

• 見出しは『英字ラベル（青・字間広め）＋日本語見出し（太字）』の 2 段組みで中央にそろえる。
• FV の数字は極太にし、単位や（税込）は小さく添える。
• 本文の要所は青の太字で強調する。
• 手書き書体は吹き出し・メモ紙・ラベルだけに使う。
• コンセプトの悩み列挙は中央揃えのかぎ括弧付きで 1 行ずつ並べる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。アイコン類は 3 列、食事写真は 2 列のグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに地の色を切り替え、境界は直線にする。
• カードは左右に約 6% の余白をとって中央に置く。
• 主 CTA は 3〜4 セクションごとに同じ形で繰り返す。
• 比較表は自社の列をライムで塗って目立たせる。
• 店舗情報は濃紺のタブ見出しの下にグレーの角丸カードを置き、縦に積む。

Elevation & Depth

• CTA ボタンには下方向にやや濃い影を付けて立体感を出す。
• 特典カード・メニューカードには柔らかいドロップシャドウを付ける。
• FAQ の行には下側にライムのずらし影を付ける。
• 本文カードは基本フラットにする。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は円形に切り抜き、ライムの円弧を添える。施設写真は角丸なしの横長長方形。
• セクション境界: 直線で地の色を切り替える
• 主 CTA は角丸 4〜6px の横長ボタンにし、右端に丸い矢印アイコンを置く。
• サブボタン（もっと見る・地図）はピル型のグレー。
• 番号ラベルは角を斜めに切ったライムのタグ。
• 吹き出しは手描き線のギザギザ形やクラウド形にする。

Components

• 主 CTA ボタン（button-primary）: 青の横長ボタン。白い太字と右端の丸矢印、下影付き。
• 2 段見出し（section-heading）: 英字ラベル（青）の下に日本語太字見出しを中央に置く。
• 特典カード（benefit-card）: 白カードの左に縦長の青い『特典＋番号』帯。価格の強調はピンク。
• 番号タグ（reason-label）: 写真の左上に重ねる、角が斜めに切れたライムの『REASON 01』タグ。
• お客様の声の吹き出し（voice-bubble）: 手書き線の吹き出しに手書き書体の一言、右に線画イラストの人物。
• もっと見るボタン（button-more）: グレーのピル型。白文字。
• 競合比較表（comparison-table）: 自社の列をライム塗り＋濃紺ヘッダーに。他社の列はグレー。
• FAQ 行（faq-item）: 白の角丸行。左に濃紺の Q マーク、右に開閉矢印、下側にライムのずらし影。
• 流れのメモ紙（flow-memo）: 写真の右に、ライムの角丸パネルとピンで留めた手書きメモ紙を重ねる。
• 問い合わせフォーム（contact-form）: ピンク枠とクリーム地のパネル。必須はピンクのバッジ、入力欄は白の四角。

Do's and Don'ts

Do - ライムと濃紺の帯を交互に置いて、躍動感を保つ。 - 数字（価格・体重差・分数）は大きく太くし、強調色で示す。 - 見出しは英字ラベルと日本語見出しの 2 段構成で統一する。 - 手書きの吹き出しやメモ紙を少しだけ混ぜて、親しみを出す。 - CTA を一定の間隔で同じデザインのまま繰り返す。

Don't - ライムを本文の地や長い文章の背景に使わない。 - CTA の色をライムやピンクに変えない。 - 明朝体や細い書体で高級感を出さない。 - 影を強くしすぎて重たく見せない。 - 手書き書体を本文に使わない。

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（業態と低価格を一目で伝える）: ライムの全面に大きな白抜きロゴ、女性モデルの切り抜き、極太の価格。直後に濃紺の帯で受賞バッジを 2 つ並べる。
2. キャンペーン特典（申込みの動機を作る）: ライム地に期限の一文を置き、特典カードを 4 枚縦に並べる。最後に濃紺の保証バナー。
3. CTA（無料体験へ誘導する）: 白地の中央に青いボタン。
4. コンセプト（悩みへの共感と理念を伝える）: モノクロ写真を薄く敷き、ライムの円を 3 つ。悩みを中央揃えで列挙し、理念は濃紺の箱に入れる。
5. 理想のスタイル（叶う姿を見せる）: 円形の人物写真を 3×2 で並べ、下に短いラベル。
6. ビフォーアフター（実績で信頼を得る）: 濃紺とライムで左右に分け、数値の表と青い矢印の差分ラベル。症例はカルーセルで見せる。
7. 動画・著名人の推薦（権威付け）: 埋め込み動画と、ライム枠の人物写真に太字の推薦見出し。
8. お客様の声（共感と安心）: 手書き吹き出しとイラストに本文を添え、続きはもっと見るボタンで開く。
9. 選ばれる理由（差別化）: 濃紺地に写真とライムの番号タグを置き、ライムの見出しと白の本文を 5 項目並べる。
10. メソッド・メニュー・食事（サービス内容の具体化）: ライムの円で 3 手法、ティール枠のグラフ。メニューはピン留めのカード、食事は 2 列の写真グリッド。
11. トレーナー・流れ・比較（不安の解消と比較優位）: 人物のカルーセル、メモ紙付きのフロー、自社の列をライムにした比較表、無料サービスのアイコン。
12. カウンセリングの流れ・店舗情報（来店イメージと所在地を伝える）: 濃紺地に大きな線文字の番号と写真。店舗は濃紺タブ付きのグレーのカードで縦に並べる。
13. よくある質問・メッセージ（最終の後押し）: ライムの影付き FAQ 行。続いて濃紺写真地に、青マーカー付きの白文字メッセージ。
14. 問い合わせ・フッター（コンバージョン）: 手書きのギザギザ吹き出しを 3 つ置き、電話・LINE・メールのパネルを色分けして並べる。最後に濃紺のフッター。

Imagery

• 女性モデルがスポーツウェア姿でトレーナーと一緒にトレーニングする明るい室内写真。
• FV のモデルは背景を抜いた全身の切り抜きで、ライム地に重ねる。
• 施設は白壁とラックが写る広角の写真。
• お客様の声は淡彩の線画イラストの人物にする。
• 装飾は手描きの吹き出し、ピン・クリップで留めたメモ紙、キラキラの線。
• 食事は真上から撮ったワンプレートの写真をグリッドに並べる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 900px に固定し、中央に寄せる。
• 特典カード・店舗カード・食事コースは PC で 2 列にする。
• 理由は PC で写真と文章を左右交互に並べる。
• PC のヘッダーにはナビと電話番号を横に並べる。
• トレーナーは PC で 4 人並ぶカルーセルにする。

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。