DESIGN.md — 青×淡青のアイソメ図解 宿泊業向けSaaS LP（Soft Blue Isometric SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、クール・先進的、情報量多め・訴求型
• キーワード: ロイヤルブルー・淡い青のグラデーション・白い角丸カード・フラットイラスト・繰り返しCTA帯
• 地の質感: フラットで質感なし。ファーストビューと課題セクションに水色から白へのやわらかいグラデーション
• 形: 角丸の大きいカード、ピル型ボタン、課題セクションの下端は大きな弧
• 温度感: 寒色寄りで、冷たすぎない爽やかさ

Colors

• 地は白と淡青を交互に使い、CTA帯だけ濃い青で塗る
• 主ボタンは鮮やかな青の塗り、副ボタンは白地に青の枠線と青文字
• 小見出しラベルと強調語は紺の文字色にする
• 数値の強調は黒の太字＋黄色マーカー線だけにする
• アイコンは青一色の線画。補助のチェック・歯車だけ水色
• 本文は濃いグレー、注釈は薄いグレーで階層を分ける

Typography

• 全体をゴシック1書体でまとめ、太さで階層を作る
• セクション見出しは中央揃え、機能説明は左揃え
• 数値は大きな欧文太字にして単位は小さくする
• 小見出しの上に紺の短いラベルを置く
• 副題は斜線で挟む「＼ ／」型の囲みを使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは縦積み
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• カード幅は画面の約85%で中央に置く
• 効果カードはさらに細い約55%幅
• 機能説明は ラベル→見出し→本文→イラスト の順
• CTA帯は 3 枚のカード（資料・相談・電話）を縦に並べる
• ステップは短いカードを小さな下向き矢印でつなぐ

Elevation & Depth

• カードは白地にぼかし大きめの薄い青灰色の影（0 4px 12px rgba(80,100,160,.15)）
• ボタンには影を付けない
• 課題チェックのピル型カードにも弱い影を付ける

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: イラストは角丸12pxの淡青の四角に入れる。事例写真はカード上部いっぱいに角丸で
• セクション境界: 基本はまっすぐな境界。課題セクションだけ下端を大きな弧にする
• ボタンはすべてピル型
• タグは角丸小の淡青ラベル
• STEP番号はピル型の青バッジをカード上端にかぶせる

Components

• 主CTAボタン（button-primary）: 青塗りのピル型。左に書類アイコン
• 副ボタン（button-secondary）: 白地に青い枠線と青文字のピル型。紙飛行機や丸矢印のアイコン付き
• CTAカード（cta-card）: 濃い青の帯の上に置く白い角丸カード。アイコン、小見出し、ボタンの順に並べる
• 効果数値カード（stat-card）: 円形の背景に入れたイラスト、施策、下向きV字、大きな数値と黄色マーカーを縦に並べる
• 課題チェック（check-pill）: 青チェックと短い課題文を入れた白いピル型カード
• 機能カード（feature-card）: 上に青の線アイコン、下に太字タイトルと説明文を置く白いカード
• STEPバッジ（step-badge）: STEP番号を入れた青いピル型のバッジ。白カードの上端に重ねる
• FAQ行（faq-row）: 左にQ、右に＋を置き、区切り線で分けるアコーディオン
• タグ（tag）: 淡青の地に紺文字の小さなラベル

Do's and Don'ts

Do - CTA帯は濃い青で、ページ内に3回以上繰り返す - イラストは青紫系のフラットなタッチで統一する - カードは大きめの角丸にして、薄い影を付ける - 数値の効果は黄色マーカーで1か所だけ強調する - 注釈は※付きの小さいグレー文字で添える

Don't - 暖色を面積の大きい背景に使わない - 写真は事例カード以外に多用しない - ボタンを角張った四角にしない - 濃い影や立体的なグラデーションボタンを使わない - 見出しに明朝や装飾書体を使わない

Page Structure

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

1. ファーストビュー（サービス名と価値を伝え、資料請求へ誘導する）: 水色から白へのグラデーション。製品ラベル、2行のキャッチ、アイソメ図、2つのピル型ボタンを中央揃えで並べる
2. 導入効果（削減率で成果を示す）: 左揃えの2段見出しの下に、効果数値カードを縦に2枚置く
3. 悩みの提起（現場の課題に共感してもらう）: 淡青のグラデーション地に課題チェックのピルを3つ並べる。下端は弧にし、V字の矢印で解決へつなぐ
4. 解決策・特長（機能ごとの価値を説明する）: 紺のラベル、見出し、本文、淡青の角丸イラストを4ブロック繰り返す
5. CTA（資料・相談・電話への導線）: 濃い青の帯に白いCTAカードを3枚置く
6. 主な機能（機能の一覧を見せる）: アイコン付きの機能カードを縦に積み、最後に「もっとみる」ボタンを置く
7. CTA（訴求文付き）（相談を後押しする）: 青い帯に左揃えの白い見出しと説明文を入れ、CTAカードを3枚置く
8. 導入事例（実績で信頼を得る）: 写真付きの事例カードにタグと説明を入れ、一覧ボタンを置く
9. 料金（費用の構成を示す）: 淡青の地に白カードを置き、初期費用と月額を淡青のラベルで並べ、見積もりボタンを置く
10. 導入の流れ（導入までの手順を示す）: STEPバッジ付きのカードを6つ、小さな矢印でつなぐ
11. サポート体制（導入前後の安心感を伝える）: 丸いイラスト、紺の小見出し、本文を入れた大きな白カードを2枚置く
12. セキュリティ（安全性を示す）: 青い線アイコンと紺の見出しを入れたカードを3枚置く
13. よくある質問（不安を解消する）: 白い地にQ＋のアコーディオンを線で区切って並べる
14. 関連サービス・フッター（回遊させる）: 灰色の地にサービスカードを置き、その下に2列のテキストリンクを並べる

Imagery

• アイソメトリック調のフラットイラストで、PC画面・グラフ・虫眼鏡などを組み合わせる
• 人物は青紫系の制服を着たスタッフや客をシンプルな図案で描く
• イラストの背景には淡青の角丸四角か円を敷く
• アイコンは青一色の太い線か面で描き、チェックや歯車の小さな水色バッジを添える
• 写真は事例の建物外観だけ。晴天で明るいものを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではファーストビューを左右2分割にし、左にテキストとボタン、右に図解を置く
• PCでは機能説明をテキストとイラストの左右交互配置にする
• PCでは機能カードを3列、CTAカードを3列横並びにする
• PCではステップを横一列に並べる
• PCではヘッダーにナビとCTAボタン2つを常に表示する

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