--- version: alpha name: Ocean Blue Cloud SaaS LP description: 濃い青とティールを軸に、淡い水色の地と白カードを重ねた清潔なBtoB SaaS LP。番号付きの特長、アイコンの機能カード、黄色のハイライトで価格を見せ、オレンジは問い合わせ導線だけに使う。 colors: primary: '#017EBE' secondary: '#00AFBC' cta: '#EA6E0C' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#E8F2FB' surface: '#F6FBFE' tint-1: '#EBEFEE' marker: '#F3EE86' text: '#26292A' text-body: '#4A4A4A' accent-1: '#017FBB' text-muted: '#728493' line: '#A9CED4' secondary-accessible: '#00828C' cta-accessible: '#BE590A' accent-1-accessible: '#017DB8' typography: display: fontFamily: Montserrat fontSize: 48px fontWeight: 500 lineHeight: 1.1 headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Montserrat fontSize: 14px fontWeight: 500 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em rounded: sm: 4px md: 6px lg: 10px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 46px button-category: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 56px button-cta: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 50px numbered-point: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 50px worry-bubble: backgroundColor: '{colors.tint-1}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 64px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 150px price-card: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 300px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 160px marker-label: backgroundColor: '{colors.marker}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 28px --- # DESIGN.md — 海の青×ティールの業務クラウドLP（Ocean Blue Cloud SaaS LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、清潔・爽やか、クール・先進的、情報量多め・訴求型 - **キーワード**: 青と水色・白カード・回路線の装飾・番号付き特長・フラットイラスト - **地の質感**: フラットな面に薄い影。背景に細い回路線の模様を薄く敷く - **形**: 角丸4〜8pxの矩形カード。ボタンは横幅いっぱいの角丸矩形で、右端に矢印 - **温度感**: 寒色中心のクールで落ち着いた印象。黄色とオレンジを少しだけ差して温かみを出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#017EBE` | ブランドの濃い青（帯・ボタン） | 8% | 画素の実測 | | `secondary` | `#00AFBC` | ティールのサブボタン・料金帯 | 5% | 画素の実測 | | `cta` | `#EA6E0C` | 問い合わせボタンのオレンジ | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 31% | 画素の主要色に補正 | | `background-alt` | `#E8F2FB` | 淡い水色のセクション地 | 9% | 画素の実測 | | `surface` | `#F6FBFE` | カード内の薄い地 | 6% | 画素の実測 | | `tint-1` | `#EBEFEE` | 悩み吹き出しのグレー地 | 2% | 画素の実測 | | `marker` | `#F3EE86` | 価格・ラベルの黄色帯 | 3% | 画素の実測 | | `text` | `#26292A` | 見出しの濃いグレー | 1% | 画素の実測 | | `text-body` | `#4A4A4A` | 本文グレー | 2% | 推定 | | `accent-1` | `#017FBB` | 小見出しの青文字 | 1% | 画素の主要色に補正 | | `text-muted` | `#728493` | Aアイコン・注記グレー | 0% | 画素の実測 | | `line` | `#A9CED4` | 区切り線 | 0% | 画素の実測 | | `secondary-accessible` | `#00828C` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#BE590A` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#017DB8` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡い水色を交互にして、セクションの区切りを表す - 導入事例と料金は濃い青〜ティールの面で包み、強調する - 主ボタンはティール、カテゴリ導線は濃い青にする - オレンジは問い合わせとヘッダーの連絡ボタンだけに使う - 価格・ラベル・吹き出しバッジは黄色の帯で目立たせる - 本文はグレー、小見出しとリンクは青にする - `button-primary` は文字 `#FFFFFF` × 背景 `#00AFBC` のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#00828C`、4.59:1）を使う。 - `button-cta` は文字 `#FFFFFF` × 背景 `#EA6E0C` のコントラスト比が 3.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#BE590A`、4.54:1）を使う。 - `numbered-point` は文字 `#017FBB` × 背景 `#FFFFFF` のコントラスト比が 4.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#017DB8`、4.54:1）を使う。 - `price-card` は文字 `#017FBB` × 背景 `#FFFFFF` のコントラスト比が 4.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#017DB8`、4.54:1）を使う。 - `marker-label` は文字 `#017FBB` × 背景 `#F3EE86` のコントラスト比が 3.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#017DB8`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの製品ロゴ風の大文字 | 欧文サンセリフ | Montserrat | 500 | 48px | 1.1 | 0.0em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.03em | | `headline-md` | 特長の小見出し（青） | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.0em | | `headline-sm` | カードのタイトル・質問 | ゴシック | Noto Sans JP | 700 | 13px | 1.5 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.02em | | `note` | 注記・日付・業種ラベル | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 番号（01〜）の欧文 | 欧文サンセリフ | Montserrat | 500 | 14px | 1.0 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.02em | - 見出しは太字のゴシックを中央揃えにする - 小見出しは青の太字で左揃えにする - 見出しの中のキーワードはオレンジや青で色を変える - 背景に薄い大きな番号を敷き、その上に小見出しを重ねる - 本文は行間を広めにとり、読みやすくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。機能カードは左にアイコン、右に本文の2列 - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 左右の余白は約12pxで、カードは画面幅いっぱい近くまで広げる - セクション見出しの上下に32px前後の余白をとる - 特長は番号・小見出し・本文・写真の順で縦に積む - ボタンは各セクションの最後に1本置く - 事例カードは写真を幅約60%で中央に置く ## Elevation & Depth - 白カードには薄く広い影（0 4px 16px rgba(0,60,100,.08)）をつける - ボタンにも軽い影をつけて浮かせる - 写真は角丸にして薄い影をつける ## Shapes - **角丸**: 小 4px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸の矩形。担当者アイコンだけ円形 - **セクション境界**: 直線で切り替える。一部はゆるい弧や、帯の途中から色が変わる形 - ボタンは角丸6pxの矩形にし、右端に小さな「>」を置く - 番号バッジは円や角の欠けた四角形にする - 料金表は黄色の見出し帯と白い値の行を交互に重ねる ## Components - **ティールの導線ボタン**（`button-primary`）: 横幅いっぱいの角丸ボタン。白の太字と右矢印 - **濃い青のカテゴリボタン**（`button-category`）: 2行の文字を中央に置く。縦に3つ並べる - **問い合わせボタン**（`button-cta`）: 青い帯の中に置くオレンジのボタン。メールアイコン付き - **番号付きの訴求カード**（`numbered-point`）: 白カードの左上に、円形ティールの番号をはみ出させて置く - **悩みの吹き出し**（`worry-bubble`）: 円形の人物アイコンと、グレーの吹き出しを横に並べる - **機能カード**（`feature-card`）: 左上に番号、左にフラットなアイコン、右に青い題と本文 - **料金プランカード**（`price-card`）: 水色の見出し、黄色の価格帯、チェック付きの項目行を重ねる - **Q&A**（`faq-item`）: 青丸のQとグレー丸のAを置く。上にタブで分類する - **黄色ラベル**（`marker-label`）: 価格や小さな告知を載せる黄色い帯。丸いバッジにもする ## Do's and Don'ts **Do** - 地は白と淡い水色を交互に並べ、清潔感を保つ - 特長は番号と青い小見出しで整理する - 機能はフラットなイラストアイコンで見せる - 各セクションの最後にティールのボタンを置く - 数値や価格は黄色い帯で強調する **Don't** - オレンジを問い合わせ以外に多用しない - 暖色の大きな面を作らない - 装飾的な書体や手書きの書体を使わない - 濃い影や立体的なグラデーションのボタンにしない - 写真は彩度の高いポップなものにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（価格と製品カテゴリ、主な3つの利点を一度に伝える）: 港や海の青い写真の上に、黄色の価格帯、白抜きの大ロゴ、番号付きの白カード3枚、ティールのボタンを置く 2. **悩みの提起**（担当者の悩みを3つ示して共感を得る）: 白い枠の中に、円形の人物アイコンとグレーの吹き出しを3段並べる 3. **解決宣言**（悩みから製品の紹介へつなぐ）: 下向き三角の後に、青い大きな文字で解決を宣言する 4. **できること（特長）**（3つの主な価値を説明する）: 水色の地に、薄い大番号・青い小見出し・本文・角丸の写真を交互に並べる 5. **信頼性の補足**（セキュリティや認定を示す）: 濃い青のボタン3つの後に、チェックアイコン付きの項目カードを縦に並べる 6. **機能紹介**（8つの機能を一覧にする）: 番号付きの白カードに、フラットなイラストを添えて並べる 7. **導入事例**（実績で信頼を高める）: 上半分が青い帯。人物写真のカード、業種ラベル、青い社名、詳細リンクを並べる 8. **満足度とロゴ**（数値と取引先で裏付ける）: 暖色の満足度バナーと、横に流れるロゴ列を置く 9. **導入の流れ**（導入までの手軽さを伝える）: 水色の地に、本文・ボタン・写真を置く 10. **料金プラン**（費用を明示する）: 青からティールの面に、白いプランカードと黄色い帯の料金表を置く 11. **よくある質問**（不安を解消する）: タブの切り替えと、Q/Aアイコン付きの白カード 12. **コラム・お知らせ**（更新性を示す）: サムネイル付きリストと、日付付きのテキストリスト 13. **CTA**（資料請求や問い合わせを促す）: 回路線模様の青い帯に、黄色ラベル・オレンジのボタン・電話番号を置く 14. **フッター**（認定マークと会社情報を載せる）: 認定バッジ、2列のリンク、グレーの会社情報欄、ティールの固定バー ## Imagery - 写真は明るく白っぽいオフィスやPC作業の場面を選び、寒色寄りに補正する - ファーストビューは港・コンテナ船など物流の写真に、青いオーバーレイをかける - 機能のアイコンは、青・ティール・オレンジ・黄色のフラットなイラストにする - 背景に細い回路線や地球を薄い水色で敷く - 人物はアウトラインのない丸型のフラットなアバターにする - 事例は笑顔の担当者が並ぶ自然な集合写真にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央の幅約1000pxに収め、上部にナビゲーションと電話・問い合わせボタンを置く - PCのファーストビューは、利点カード3枚とボタンを横一列に並べる - PCの特長は、写真と本文を左右交互の2カラムにする - PCの機能紹介は3列のグリッドにし、見出しを左に置く - PCの事例・料金・FAQは、2〜3列に並べて横幅を活かす - PCのCTAは、左に写真、右に青いパネルの左右分割にする ## 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-d8fd1693`（元 LP の URL から採番） - **元 LP**: https://www.code-x.co.jp/ - **解析に使った画像**: 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/）からご連絡ください。