DESIGN.md — 紺×朱色の信頼系ホテル経営コンサル LP（Navy and Coral Hospitality Consulting LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: 濃紺ヘッダーのカード・朱色の診断CTA帯・青い強調語・線画ビジネスイラスト・成長曲線グラフ・淡青グレーの地
• 地の質感: フラットな単色面に薄いドロップシャドウのカード。グラデーションは最小限。
• 形: 角丸8〜16pxのカード、ピル型の数値吹き出し、丸い番号バッジ。
• 温度感: 白と紺のクールな地に朱色を差す、やや涼しめの配色。

Colors

• 地は白と淡青白#F6FAFDを交互に使いセクションを区切る
• 濃紺はカード見出し帯・番号・フッターに限定する
• 朱色は診断CTAブロック専用、本文には使わない
• 見出しの一語だけ明るい青にし、下に青の点線を引く
• グラフは導入前を朱色、導入後を青にして変化を示す
• 最終CTAはロイヤルブルー地に白枠ボタンで朱色CTAと差をつける
• cta-diagnosis は文字 #FEFEFE × 背景 #FE603B のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E12C01、4.56:1）を使う。

Typography

• 見出しは太字ゴシック中央揃え、強調語のみ青色＋点線下線
• 本文は13px・行間1.8で左揃え
• 本文中の重要語は太字で強調する
• 数値は欧文太字で大きく、単位は小さく添える
• 引用見出しには大きな引用符を左上と右下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、PC は 2〜3 カラムのカードグリッド
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右12px程度の余白でほぼ全幅
• カード同士の間隔は24px前後
• 実績ブロックは見出し→罫線→グラフカード→本文→データ→写真の順
• ステップは縦積みで間に下向きシェブロンを置く
• 朱色CTAブロックは複数セクションの後に繰り返し挿入

Elevation & Depth

• お客様の声カードは柔らかいドロップシャドウ(0 4px 12px rgba(0,0,0,.15))
• CTA内の診断結果サンプル画像に強めの影
• ステップカード・FAQは影なしのフラット面

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの横長矩形で全幅配置
• セクション境界: 直線で地色を切り替え。CTA内に斜めの濃色面
• カードは角丸12〜16px
• ボタンは角丸4px程度の長方形
• 数値吹き出しは青い太枠のピル型
• 番号は濃紺の正円バッジ

Components

• お客様の声カード（voice-card）: 濃紺の見出し帯に番号ラベル、白地に引用符付き見出しと人物線画、本文
• 朱色の診断CTAブロック（cta-diagnosis）: 小コピー＋見出し、白い全幅ボタン、下部に診断結果サンプル画像
• 白地ボタン（button-white）: アイコン付きの白い長方形ボタン、文字は濃グレー太字
• 実績グラフカード（result-graph-card）: 淡グレーカードに朱色→青の成長曲線と青枠ピルの数値
• 流れのステップカード（step-card）: 上辺に濃紺番号丸、見出し、線画イラスト、一行説明
• FAQ項目（faq-item）: 淡青白帯に青いQと質問、下に白地でAと回答
• 点線下線見出し（heading-underline）: 中央見出しの強調語を青色にし下に青の点線
• 最終相談CTAボックス（cta-final-box）: ロイヤルブルー地に斜線で挟んだ小見出しと白枠ボタン2つ

Do's and Don'ts

Do - 強調語は青＋点線で一語だけにする - 朱色CTAは同じデザインで3回以上繰り返す - 人物は青と紺の線画イラストで統一する - 実績は数値・グラフ・所在地データ・写真をセットで見せる - 白と淡青白の地を交互に使いリズムを作る

Don't - 朱色を見出しや本文に多用しない - 写真に重いフィルターや角丸をつけない - ポップな丸ゴシックや手書き体を使わない - カードに強い影や太い枠線を付けない - 濃紺の大面積をページ中盤に置かない

Page Structure

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

1. ファーストビュー（短期での利益改善を約束）: 商談写真を背景に白太字の大見出しと実績グラフ、朱色と青の2ボタン
2. 悩みの提起（経営課題への共感）: チェック付きの白カードを2列で8つ並べる
3. 解決策（3つの改善軸を提示）: 紺写真地に番号付き白カード3枚
4. 選ばれる理由（強みを4つ提示）: 紺の丸番号と線画アイコンの枠付きカード
5. サービス領域（支援範囲の可視化）: 十字軸で4象限に分けたカード
6. プラン紹介（改善プランの詳細）: 左にタブ、右に紺地の詳細パネル
7. お客様の声（信頼の獲得）: 紺見出し帯の引用カードを縦に4枚
8. CTA（無料診断へ誘導）: 朱色ブロックに白ボタンと診断サンプル
9. 実績（数値で効果を証明）: 成長グラフカード、本文、施設データ、横長写真
10. 導入の流れ（申込後の不安解消）: 番号付きステップカード4枚をシェブロンで接続
11. よくある質問（疑問の解消）: Q帯とA回答の展開済みリスト6問
12. 最終CTA（相談・資料請求）: ロイヤルブルーボックスに白枠ボタン2つ
13. フッター（会社情報）: 濃紺地に白のロゴと所在地

Imagery

• 人物はスーツ姿の線画イラストで、紺の線と明るい青の塗り
• 考える人物には黄色の電球アイコンを添える
• 施設写真は夕景・夜景のライトアップを横長に
• FVは打ち合わせ中のビジネスパーソン写真
• 診断結果はレーダーチャートの紙面風サンプル
• グラフは朱色から青へのグラデーション曲線と点線グリッド
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央最大幅約1000pxで2〜3カラムのカードグリッド
• お客様の声はPCで2列2段
• 実績はPCでグラフ左・本文右の2カラム
• 朱色CTAはPCで横長にし画像を右へ配置
• PCヘッダーに電話番号と朱色・青のボタンを常設

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