--- version: alpha name: Soft Blue Isometric SaaS LP description: ロイヤルブルーと淡い青の面を交互に使う、宿泊施設向け業務システムのBtoB LP。白い角丸カードにふんわり影を付け、フラットなイソメトリック調イラストと線アイコンで機能を説明する。CTAセクションは濃い青の帯で何度も繰り返す。 colors: primary: '#4C6ED9' cta: '#4158FE' on-cta: '#EDF9FF' background: '#FFFFFF' background-alt: '#DAE6FF' tint-1: '#DAE6FF' surface: '#FDFEFE' secondary: '#020A82' text: '#323539' text-muted: '#777777' background-alt-2: '#F3F4F5' marker: '#FFE14D' line: '#F1F3F5' accent-1: '#1BA8F0' typography: display: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 headline-sm: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 28px fontWeight: 800 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 4px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px button-secondary: backgroundColor: '{colors.surface}' textColor: '{colors.cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px cta-card: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 120px stat-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 210px check-pill: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 44px feature-card: backgroundColor: '{colors.surface}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 150px step-badge: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 24px faq-row: backgroundColor: '{colors.background}' typography: '{typography.body-md}' height: 34px tag: backgroundColor: '{colors.tint-1}' textColor: '{colors.secondary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 16px --- # 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 | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#4C6ED9` | CTA帯の背景・ブランドの青 | 8% | 画素の実測 | | `cta` | `#4158FE` | 資料請求ボタン | 1% | 画素の実測 | | `on-cta` | `#EDF9FF` | CTAボタンの文字 | 0% | 画素の実測 | | `background` | `#FFFFFF` | 基本の地 | 52% | 画素の実測 | | `background-alt` | `#DAE6FF` | 料金〜セキュリティの淡青の地 | 14% | 画素の実測 | | `tint-1` | `#DAE6FF` | イラスト背景・料金ラベル面 | 3% | 画素の実測 | | `surface` | `#FDFEFE` | カード面 | 10% | 画素の実測 | | `secondary` | `#020A82` | 小見出しラベル・強調文字の紺 | 0% | 画素の実測 | | `text` | `#323539` | 見出し文字 | 1% | 画素の実測 | | `text-muted` | `#777777` | 注釈・補足本文 | 0% | 推定 | | `background-alt-2` | `#F3F4F5` | その他サービスの灰地 | 4% | 画素の実測 | | `marker` | `#FFE14D` | 数値下の黄色マーカー | 0% | 推定 | | `line` | `#F1F3F5` | FAQ区切り線・カード枠 | 0% | 画素の主要色に補正 | | `accent-1` | `#1BA8F0` | アイコンのチェック円の水色 | 0% | 推定 | - 地は白と淡青を交互に使い、CTA帯だけ濃い青で塗る - 主ボタンは鮮やかな青の塗り、副ボタンは白地に青の枠線と青文字 - 小見出しラベルと強調語は紺の文字色にする - 数値の強調は黒の太字＋黄色マーカー線だけにする - アイコンは青一色の線画。補助のチェック・歯車だけ水色 - 本文は濃いグレー、注釈は薄いグレーで階層を分ける ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチ | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.04em | | `headline-lg` | セクション見出し（中央揃え） | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.02em | | `headline-md` | 機能説明の見出し（左揃え2行） | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.0em | | `headline-sm` | カードタイトル・紺の小ラベル | ゴシック | Noto Sans JP | 700 | 12px | 1.5 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 11px | 1.8 | 0.02em | | `note` | 注釈・受付時間 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.0em | | `accent` | 効果数値・電話番号 | 欧文サンセリフ | Montserrat | 800 | 28px | 1.1 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.2 | 0.02em | - 全体をゴシック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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-73794a82`（元 LP の URL から採番） - **元 LP**: https://www.dyn.co.jp/service/pms/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。