DESIGN.md — 紺×紫×山吹の宅配レンタルサービス LP（Navy Purple Rental Service Problem-Solution LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: 悩み→解決の反復・濃紺×紫の帯・山吹色CTA・ゆるキャラ・ジャケット横スクロール・黄色の円背景
• 地の質感: ベタ塗り中心。紫帯には細かいドット柄のグラデーションを重ねる。写真は白背景の切り抜き人物。
• 形: 角丸カードと角丸ボタン。人物は黄色の大きな円の上に配置。見出しは左に黄色の縦線。
• 温度感: 暗い寒色の地に、黄・オレンジの暖色アクセントを置いた明るめの温度感

Colors

• 悩みの導入は濃紺の帯から紫のドット帯へ切り替える2段構成にする
• 解決策は白地に置き、オレンジの見出しで答えを強調する
• 主CTAは山吹色の面に濃紺の文字。下に濃い黄の影を付ける
• サブボタンは濃紺地に黄の細枠と黄文字のアウトライン型
• クロージングと作品一覧は全体を濃紺地にし、白文字で見せる
• 黄色の円は人物やキャラクターの背景だけに使う
• button-tel は文字 #FFFFFF × 背景 #43918A のコントラスト比が 3.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#3C817B、4.55:1）を使う。
• solution-tag は文字 #FFFFFF × 背景 #F35A24 のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D6400C、4.57:1）を使う。

Typography

• 見出しは極太のゴシックで短く切る
• 悩みの文の後半は濃い帯マーカーに白文字で敷く
• 解決の答えはオレンジの極太文字で2行にする
• 数量の実績は大きな数字と小さな単位の組み合わせで見せる
• 人物の横に縦書きの手書き風セリフを添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。品ぞろえは 3 列のグリッド、作品は横スクロール
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 悩み帯→白地の解決→実績の小見出し群→人物の喜ぶ写真、を1セットとして3回繰り返す
• CTAブロックは中央揃えのロゴ、主ボタン、サブボタン、電話の順に縦に積む
• 作品カルーセルは右端を見切れさせ、右に半透明の矢印を置く
• 解決見出しの右にキャラクターを置く

Elevation & Depth

• 主CTAの下に濃い黄の平らな影を4px付ける
• ジャケット画像には薄いドロップシャドウを付ける
• それ以外はフラットで影を付けない

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は白背景の切り抜きで、黄色の円の上に載せる。ジャケットは矩形のまま
• セクション境界: 直線で色を切り替える。濃紺の帯から紫のドット帯へ段差で変える
• ボタンとカードは中くらいの角丸
• 解決ラベルは吹き出し形の角丸タグ
• 吹き出しは太い黒枠の楕円

Components

• 主CTAボタン（button-primary）: 山吹色の横長ボタン。極太文字と右向きの矢印、下に影
• サブプランボタン（button-outline）: 黄の細枠と黄の小さな文字のアウトライン型
• 電話ボタン（button-tel）: 青緑の面に電話アイコンと大きな番号
• 悩みカード（worry-card）: 淡紫の面に悩む人物の写真と、帯マーカー付きの悩み文、もやもや線の落書き
• 解決ラベル（solution-tag）: オレンジの吹き出しタグにチェックアイコンとサービス名
• 縦線見出し（heading-bar）: 左に黄の太い縦線を付けた黒の見出し
• ステップカード（step-card）: 灰色の角丸カードにキャラのイラストと2段のテキスト。間に下向き矢印
• 料金カード（price-card）: 濃紺地の上の白カード。黄の見出しと点線区切り、価格、箇条書き
• 吹き出し（speech-bubble）: 白地に濃紺の太枠の角丸吹き出し。悩みから解決へつなぐ

Do's and Don'ts

Do - 悩み→解決→証拠→喜ぶ人物の順を、悩みごとに繰り返す - CTAブロックは冒頭・中盤・最後に同じ形で置く - キャラクターを解決見出しやステップに入れて親しみを出す - 数量の実績は大きな数字で示し、注釈を必ず添える

Don't - CTAを山吹色以外にしない - 解決見出しにオレンジ以外の強調色を混ぜない - 白地のセクションに紫のグラデーションを入れない - 人物写真に背景を残したまま載せない

Page Structure

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

1. ファーストビュー（品ぞろえの多さと実績を一目で伝える）: コンテンツ画像のコラージュの上に笑顔の人物と白い極太キャッチを置き、金色の実績メダルを添える
2. CTA（すぐに登録へ誘導する）: 濃紺地にロゴ、山吹色の主ボタン、アウトラインのサブボタン
3. 悩みの提起（共感を得る）: 紫のドット地に、斜線で挟んだ導入文、白い見出し、悩みカード3枚。吹き出しとキャラで解決を予告する
4. 悩み1と解決（一つ目の不満を解消する）: 紫帯の悩み→白地に解決タグとオレンジ見出し→作品の横スクロール
5. 悩み2と解決（品ぞろえを証明する）: カバー率の円柱グラフ、ジャンル別の数量を3列グリッドで見せる
6. 悩み3と解決（利用方法の不安をなくす）: 3ステップのカードを縦に並べ、間に矢印を置く
7. CTA（申込と問い合わせ）: ロゴ、主ボタン、サブボタン、電話ボタン、営業時間
8. 料金（価格の提示）: 濃紺地の上に白い料金カードを置き、アイコンと箇条書きで説明する
9. 話題の作品（具体的な作品で興味を引く）: 濃紺地に白見出し。カテゴリごとにジャケットを横スクロールで並べる
10. クロージングCTA（最後の申込）: 上のCTAブロックと同じ構成を繰り返す

Imagery

• 人物は白い服で、表情の大きな写真を切り抜いて使う。悩み顔と笑顔の2種類を用意する
• 笑顔の人物は淡黄の大きな円と濃い黄の半円の上に置き、クラッカーのイラストを添える
• 黒い線のゆるいキャラクターを肌色のベタ塗りで描き、ポーズを変えて各所に置く
• 悩みの人物の頭の横に黒いぐるぐる線の落書きを入れる
• 作品ジャケットは矩形のまま並べる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも中央の約900px幅に収め、両側まで背景色を伸ばす
• 悩みカードは PC で3枚横並びの縦型カードにする
• ステップは PC で横3列にし、間に矢印を置く
• ジャンル別グリッドは PC で画像と数字を横並びにした3列にする
• 作品カルーセルは PC で一度に10枚以上並べる

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 行書くと起動時に読み込まれる。