--- version: alpha name: Soft Coral Pastel Creator SaaS LP description: コーラルピンクを主役に、ベージュ・淡ピーチ・淡ブルーグレーの面を交互に敷くやさしいSaaS LP。字間を広くとった細めの見出し、ピル型ボタン、フラットな人物イラストで、親しみやすさと信頼感を両立している。 colors: primary: '#FA565C' cta: '#FB717A' on-cta: '#FFFFFF' background: '#FEFEFE' background-alt: '#F7F3F0' tint-1: '#FEEEE7' tint-2: '#EFF2F7' surface: '#F7FBFE' secondary: '#FBD6C9' text: '#4A4A4A' text-muted: '#9F9D99' line: '#C8CCD8' accent-1: '#8FD3C2' dark-section: '#494949' on-dark: '#FFFFFF' cta-accessible: '#ED0716' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 36px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 300 lineHeight: 1.7 letterSpacing: 0.2em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.1em accent: fontFamily: Montserrat fontSize: 40px fontWeight: 500 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 64px 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: 44px button-secondary: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px stat-badge: textColor: '{colors.text}' typography: '{typography.accent}' height: 48px price-circle: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 96px phone-mock: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 240px feature-card: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 200px support-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 72px faq-item: textColor: '{colors.text}' typography: '{typography.body-md}' height: 48px --- # DESIGN.md — コーラル×淡色パステルのクリエイター向けSaaS LP（Soft Coral Pastel Creator SaaS LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: やさしい・柔らかい、シンプル・ミニマル、信頼・誠実、清潔・爽やか - **キーワード**: コーラルピンク・パステル面の切り替え・広い字間・ピル型ボタン・フラットイラスト・スマホ画面モック - **地の質感**: グラデーションをほぼ使わないフラットな単色面。影はごく弱い - **形**: ピル型ボタン、円形バッジ、角丸の端末モック、角丸が小さいカード - **温度感**: 暖色寄り。ピーチとベージュに寒色の淡グレーブルーを差して温度を整える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FA565C` | ブランドのコーラル（ロゴ・主ボタン） | 2% | 画素の実測 | | `cta` | `#FB717A` | 主CTAボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FEFEFE` | 基本の白地 | 12% | 画素の実測 | | `background-alt` | `#F7F3F0` | ベージュのセクション地 | 13% | 画素の実測 | | `tint-1` | `#FEEEE7` | 淡ピーチのセクション地 | 16% | 画素の実測 | | `tint-2` | `#EFF2F7` | 淡ブルーグレーのセクション地 | 15% | 画素の実測 | | `surface` | `#F7FBFE` | ごく淡い青白の面 | 13% | 画素の実測 | | `secondary` | `#FBD6C9` | 数字バッジの淡ピーチ円 | 2% | 画素の実測 | | `text` | `#4A4A4A` | 見出し・本文の濃グレー | 2% | 推定 | | `text-muted` | `#9F9D99` | 注釈の灰色 | 0% | 画素の実測 | | `line` | `#C8CCD8` | サブボタン枠・FAQ点線 | 0% | 推定 | | `accent-1` | `#8FD3C2` | 月桂樹装飾のミント | 0% | 推定 | | `dark-section` | `#494949` | フッター地 | 4% | 画素の実測 | | `on-dark` | `#FFFFFF` | フッター文字 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#ED0716` | AA を満たす補正値（計算） | | 計算 | - セクションごとに白・ベージュ・淡ピーチ・淡ブルーグレーの地を交互に切り替える - コーラルは主CTA、ロゴ、Q.の頭文字、強調数字だけに使う - サブボタンは白地に淡い枠線と青紫寄りグレー文字で控えめにする - 数字の訴求は淡ピーチの円の中に濃グレーの大きな数字で置く - フッターだけ濃グレーで締める - 黒は使わず、文字は濃グレーにする - `button-primary` は文字 `#FFFFFF` × 背景 `#FB717A` のコントラスト比が 2.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#ED0716`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのロゴ級の大見出し | 丸ゴシック | M PLUS Rounded 1c | 700 | 36px | 1.2 | 0.05em | | `headline-lg` | セクション見出し（細め・字間広め） | ゴシック | Noto Sans JP | 300 | 22px | 1.7 | 0.2em | | `headline-sm` | 機能カードの小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.05em | | `body-md` | 本文・機能説明 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.08em | | `note` | 見出し下のリード・注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.1em | | `accent` | 料金・満足度などの大きな数字 | 欧文サンセリフ | Montserrat | 500 | 40px | 1.0 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.0 | 0.05em | - セクション見出しは細字で字間0.2em前後。2行に分けて中央揃えにする - 見出しの下に小さな一行リードを添える - 数字は単位を小さくして数字だけを大きくする - 本文は左揃え、見出しとリードは中央揃え - 太字は小見出しとボタンだけに使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。機能やイラストのグリッドはSPで2列、PCで3〜4列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - セクションの上下余白は広め（56〜72px） - 見出し→リード→コンテンツ→ボタンの順で中央に揃える - 機能紹介はイラスト・小見出し・説明文の縦積みカード - FVは左にロゴ・コピー・CTA、右にスマホモックを横に並べる - FAQは点線区切りのアコーディオン ## Elevation & Depth - 端末モックとサポートカードにだけ、ごく弱い影をつける - 資料サムネイルに薄い落ち影をつける - それ以外はフラットにする ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 人物写真は縦長の矩形で、細い淡ピンク枠をつける。担当者写真は円形 - **セクション境界**: 直線で背景色を切り替えるだけ - ボタンはすべてピル型 - 数字バッジや相談項目は円形 - スマホモックは大きな角丸 - カードの角丸は小さめ ## Components - **主CTAボタン**（`button-primary`）: コーラル塗りのピル型。白い太字 - **サブボタン**（`button-secondary`）: 白地に淡グレー枠のピル型。もっと見る系の導線に使う - **実績バッジ**（`stat-badge`）: 月桂樹装飾で挟んだ小ラベルと大きな数字 - **料金円**（`price-circle`）: 白または淡ピーチの円の中に大きな数字。円の間に＋記号を置く - **スマホ画面モック**（`phone-mock`）: 角丸の白い端末枠。中に写真・価格・小ボタンを入れて横に並べる - **機能カード**（`feature-card`）: フラットイラストの下に太字の小見出しと説明文を置く - **担当者相談カード**（`support-card`）: 円形の人物写真とコーラルのボタン。淡ピーチの枠線つき - **FAQ行**（`faq-item`）: コーラルの「Q.」と質問文、右端にシェブロン。下に点線 ## Do's and Don'ts **Do** - セクションの地色を淡いパステルで交互に変える - 見出しは細字・字間広め・中央揃えにする - CTAはコーラルのピル型で統一する - 人物はフラットで柔らかい色のイラストにする - 数字訴求は円形の枠に入れて大きく見せる **Don't** - 濃い原色や黒の面を本文の地に使わない - 見出しを極太にしない - 強い影やグラデーションを多用しない - コーラルを本文や広い面に使わない - 角ばった四角ボタンにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（何ができるかと無料であることを伝える）: ベージュ地。上部に実績バッジ3つ、左にロゴ・コピー・箇条書き・0円の円バッジ・CTA2つ、右にスマホモックを横並び 2. **導入説明**（利用規模と使い方の幅を伝える）: 白地。左に端末画像、右に段落の本文 3. **資料ダウンロード**（検討層をリードとして獲得する）: ベージュの枠に資料サムネイルと主CTAを置く 4. **オールインワン訴求**（機能の網羅性を見せる）: 淡ピーチ地。中央にスマホ、周囲に機能アイコンを円形に配置 5. **サポート訴求**（不安を解消する）: 青白地。満足度の数字、円形の相談項目3つ、担当者相談カード 6. **機能一覧**（機能を具体的に示す）: 淡ブルーグレー地。イラスト付きカードを3列×3段、最後にサブボタン 7. **料金**（無料と手数料をはっきり示す）: 淡ピーチ地。円の数字を＋でつなぎ、下に主CTA 8. **活用事例**（実際の利用者で信頼を得る）: ベージュ地に縦長の人物ポスターを3列×2段 9. **利用ジャンル**（自分ごと化を促す）: 白地にジャンル別のフラットイラストを4列×2段、下にラベル 10. **記事・メディア掲載**（第三者評価を示す）: 記事バナーを3列、ロゴを4列で並べる 11. **よくある質問**（疑問を解消する）: 淡ピーチ地に点線区切りのアコーディオン 12. **クロージングCTA**（最後に申込を促す）: FVと同じ構成を繰り返す 13. **フッター**（ナビとSNSへの導線）: 濃グレー地に白い小文字のリンク列とSNSアイコン ## Imagery - 人物イラストはフラットで線が少なく、ミント・ピンク・ラベンダーを差し色にする - 写真は明るい自然光で、ヨガや手作業など個人が教える場面 - 事例は人物写真に明朝の縦書きキャッチを重ねた雑誌風ポスター - 端末モックの中にサービス画面を入れて見せる - 月桂樹のラインイラストで実績を飾る - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SPではFVを縦積みにする（ロゴ→コピー→CTA→スマホモックの横スクロール） - 機能カードはSPで1〜2列 - 事例ポスターとイラストグリッドはSPで2列 - 料金円はSPで縦並びか小さくして横並び - グローバルナビはSPでハンバーガーメニューにし、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-ed0805a8`（元 LP の URL から採番） - **元 LP**: https://mosh.jp/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（10/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。