--- version: alpha name: Soft Dusty Pink and Gold Women's Career School LP description: くすみピンク・グレージュ・淡いグラデーションの地に、金色の帯とサーモンレッドの強調文字を重ねた、女性向けオンラインスクールの訴求型LP。白い角丸カード、ピル型タグ、手書き風の数字、ポラロイド写真で柔らかさを出す。一方でカウントダウンの帯や緑のCTA、価格比較表をくり返し入れて申込を後押しする。 colors: primary: '#D4A2AE' secondary: '#829196' cta: '#2DB24A' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#FFFCF3' accent-1: '#E2766A' accent-2: '#CAA44B' accent-3: '#F5E184' dark-section: '#335D5C' tint-1: '#FDF4DB' tint-2: '#D7E1E3' text: '#545252' text-body: '#5F6B7A' marker: '#FBF3C4' cta-accessible: '#228738' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 44px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Zen Maru Gothic fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Zen Maru Gothic fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 10px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em accent: fontFamily: Yomogi fontSize: 34px fontWeight: 400 lineHeight: 1.0 label-button: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 6px md: 16px lg: 40px full: 999px spacing: unit: 8px card: 20px section: 64px 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.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 80px countdown-bar: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-md}' height: 72px section-eyebrow: typography: '{typography.headline-sm}' height: 18px check-strip: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 44px skill-tag: backgroundColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 28px label-yellow: backgroundColor: '{colors.accent-3}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 40px feature-card: textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 280px price-box: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 200px faq-item: textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 56px gold-heading-pill: backgroundColor: '{colors.accent-2}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 40px --- # DESIGN.md — くすみピンク×金の女性向けスクールLP（Soft Dusty Pink and Gold Women's Career School LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: やさしい・柔らかい、上品・高級、情報量多め・訴求型、かわいい - **キーワード**: くすみピンク・金の帯・手書き数字・白カード・淡いグラデーション・キャンペーン訴求 - **地の質感**: ざらっとした紙のようなノイズを乗せた淡いグラデーション地。方眼の地紋や、ぼけた光の粒を散らした地も使う - **形**: 大きな角丸カード、ピル型タグ、ポラロイド風に傾けた写真、波形と大きな角丸のセクション境界 - **温度感**: 暖かめ（ピンク・ベージュ・金）。そこにグレー青を少し差して落ち着かせる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D4A2AE` | くすみピンク（実績枠・タグ） | 6% | 推定 | | `secondary` | `#829196` | グレー青（タグ・帯・フッター） | 4% | 画素の実測 | | `cta` | `#2DB24A` | 緑のCTAボタン | 2% | 推定 | | `on-cta` | `#FFFFFF` | CTAボタン上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 30% | 画素の主要色に補正 | | `background-alt` | `#FFFCF3` | クリーム色の方眼地 | 6% | 画素の実測 | | `accent-1` | `#E2766A` | サーモンレッドの強調文字 | 1% | 推定 | | `accent-2` | `#CAA44B` | 金色（ラベル・帯・下線） | 5% | 画素の実測 | | `accent-3` | `#F5E184` | 見出しラベルの黄色 | 1% | 画素の実測 | | `dark-section` | `#335D5C` | カウントダウンの深緑帯 | 2% | 画素の実測 | | `tint-1` | `#FDF4DB` | 価格ボックスの淡い黄ストライプ | 3% | 画素の実測 | | `tint-2` | `#D7E1E3` | よくある質問セクションの青灰地 | 5% | 画素の実測 | | `text` | `#545252` | 見出し文字 | 1% | 画素の実測 | | `text-body` | `#5F6B7A` | 本文のグレー青文字 | 2% | 推定 | | `marker` | `#FBF3C4` | 黄色の蛍光マーカー | 0% | 画素の実測 | | `cta-accessible` | `#228738` | AA を満たす補正値（計算） | | 計算 | - 地は白・クリーム・くすみピンク・ベージュのグラデーションを交互に使い、セクションごとに色を変える - 見出しは濃いグレーにし、キーワードだけサーモンレッドにする - 金色は価格・割引・ラベル・下線など、お得さを伝える部分に限って使う - CTAは鮮やかな緑だけにして、淡い地の上で目立たせる - カウントダウンは深緑の帯に白文字を置き、数字は白い箱に入れる - タグはピンクとグレー青の2色を、カテゴリごとに使い分ける - 本文中の強調は黄色マーカーとサーモンレッドの太字で行う - `button-primary` は文字 `#FFFFFF` × 背景 `#2DB24A` のコントラスト比が 2.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#228738`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの縦書きキャッチ | ゴシック | Zen Kaku Gothic New | 700 | 44px | 1.2 | 0.05em | | `headline-lg` | セクション見出し | 丸ゴシック | Zen Maru Gothic | 700 | 22px | 1.5 | 0.05em | | `headline-md` | カード見出し・価格の大見出し | 丸ゴシック | Zen Maru Gothic | 700 | 18px | 1.5 | 0.05em | | `headline-sm` | 見出し上の小ラベル（斜線で挟む） | 丸ゴシック | M PLUS Rounded 1c | 500 | 10px | 1.4 | 0.1em | | `body-md` | 本文・リスト | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.08em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.02em | | `accent` | 手書き風の番号・吹き出し | 手書き・筆 | Yomogi | 400 | 34px | 1.0 | 0.0em | | `label-button` | CTAボタンの文字 | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.4 | 0.08em | - 見出しは中央揃えにし、上に斜線で挟んだ小ラベルを置く - 見出しの中のキーワードだけサーモンレッドにし、少し大きくする - 数字（割引率・価格）は本文の2〜3倍の大きさにし、単位は小さくする - 番号は細い手書き風の書体で大きく入れ、色はピンクにする - 本文は字間を広めにとり、行間は1.8前後にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは中央に縦積み - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクションは小ラベル→見出し→リード文→コンテンツの順に組む - カードは左右に4%ずつ余白をとり、白地の角丸で浮かせる - 悩みと変化のリストは左右に少しずつずらして配置し、リズムを出す - CTAのまとまり（カウントダウン＋バナー＋ボタン）はページ中で3回くり返す - 料金は通常価格の表→下向き矢印→割引後の価格の順に縦に流す ## Elevation & Depth - 白カードには下方向にやわらかい影（0 6px 16px rgba(0,0,0,.12)）をつける - チェックリストの短冊には薄い影をつける - ポラロイド写真は白い枠と影をつけ、傾けて置く - CTAボタンには濃い緑の縁取りと軽い影をつける ## Shapes - **角丸**: 小 6px ／ 中 16px ／ 大 40px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は円形または角丸で切り抜く。スキル紹介の写真は円形にして金の細い線で囲む。実績のスクショはピンクの枠に入れる - **セクション境界**: 波形、大きな角丸で下側をすぼめる形、中央が下に尖るV字 - タグはピル型で、ピンクまたはグレー青の地に白文字 - 見出しの帯はピル型で、下に吹き出しのしっぽをつける - 理由を並べるカードは左右が半円の横長カプセル型で、細い赤線で縁取る - 講師カードは左上だけ大きく角を丸め、右上に金色の名札を置く - CTAボタンは角丸を小さくした長方形にし、上にピル型のバッジを重ねる ## Components - **緑のCTAボタン**（`button-primary`）: 緑のグラデーションで角丸の長方形。白い太字で2行まで入れ、上辺に白地で緑縁のピル型バッジを重ねる - **カウントダウン帯**（`countdown-bar`）: 深緑の全幅帯。上段にキャンペーン終了までの文言、下段に白い箱に入った数字と日・時間・分・秒 - **斜線で挟む小ラベル**（`section-eyebrow`）: 見出しの上に置く小さな文字。左右を『＼ ／』の斜線で挟む - **チェック付きの短冊**（`check-strip`）: 白地の横長の短冊。左にチェック、キーワードには黄色マーカー。左右に少しずらして縦に並べる - **スキルタグ**（`skill-tag`）: ピル型。ピンクまたはグレー青の地に白文字。折り返して並べる - **黄色の見出しラベル**（`label-yellow`）: 黄色の長方形を細い線の枠とずらして重ねる。カードの上辺にまたがせて置く - **番号付きの特長カード**（`feature-card`）: 白い角丸カード。上に線画アイコン、手書きの番号＋見出し、金色の下線で区切った箇条書き - **割引価格ボックス**（`price-box`）: 淡い黄色の斜めストライプ地。金色の下線、大きな数字 - **よくある質問のアコーディオン**（`faq-item`）: 白い角丸の行。左に金色のQ、右に金色の＋ - **金色の吹き出し見出し**（`gold-heading-pill`）: 金色のピル型の帯に白い太字。下にしっぽがあり、金の線で縁取ったボックスにつながる ## Do's and Don'ts **Do** - 地色はセクションごとに淡い色を切り替え、境界は波形か大きな角丸にする - 強調はサーモンレッド・黄色マーカー・金色の3つだけに絞る - 番号は手書き風の書体で入れ、柔らかさを出す - CTAのまとまりはページ中で複数回くり返す - 人物写真は自然光で明るく、笑顔の女性を使う **Don't** - 真っ黒や原色の赤を広い面に使わない - 角ばったシャープなカードを並べない - CTA以外に緑を使わない - 見出しを左揃えの無装飾にしない - 金色を本文の文字色にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（対象者と価値を一目で伝える）: くすみピンク地に笑顔の女性写真。白枠の縦書きキャッチ、金の帯のサブコピー、円形バッジを3つ並べる 2. **補助金バナーとキャンペーン**（お得さと期限を示す）: 白カードに割引率、流れる欧文の帯、カウントダウン、キャンペーンのバナー、緑のCTA 3. **悩みの提起**（共感を得る）: 悩む女性の写真と、チェック付きの短冊4つ。下端はV字で閉じる 4. **成果物の実績**（習得できるレベルを見せる）: 白い大カードの中に、ピンク枠のタブ付きギャラリー 5. **受講後の変化**（理想の未来を描く）: ピンク地にチェックリストと、傾けたポラロイド写真 6. **特長**（学び方の3本柱を伝える）: 番号付きの白カードを3枚、縦に並べる 7. **身につくスキル**（学習範囲を示す）: 方眼地に、黄色ラベル・円形写真・ピル型タグの入ったカード 8. **選ばれる理由**（サポート体制を示す）: カプセル型のカードに線画イラストと箇条書き 9. **講師紹介・お客様の声**（信頼を補強する）: グラデーション地のスライダー。左右の矢印と下のドット 10. **料金と比較**（価格の妥当性を示す）: 金色の帯の見出し、価格表、矢印、ストライプの価格ボックス、自社列だけ金色の比較表 11. **メッセージと補助金の説明**（感情面で背中を押す）: ベージュの光の地に左揃えの詩的な文と女性写真。続けて金色の帯と割引額の計算 12. **よくある質問**（不安を解消する）: 青灰地に白いアコーディオン 13. **特典とクロージングCTA**（申込を促す）: 番号付きのタグ型カードを11枚、カウントダウン、緑のCTA、グレー青のフッター ## Imagery - 20〜30代の女性を明るい自然光で撮る。ノートPCを使う在宅のシーン - 彩度を抑えたベージュ・白系の室内 - 細い線の手書き風イラストで、髪だけサーモンピンクの女性を描く - PC型の線画アイコンはピンクの淡い面と組み合わせる - 地にきらめきやぼけた光の粒、紙のノイズを散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に約80%幅で配置し、背景は全幅にする - 特長カードはPCで3カラム、スキルカードは2カラムにする - 悩みのセクションは、PCで写真を左・リストを右に並べる - 比較表はSPでは横スクロール、PCでは全列を表示する - 特典の一覧はPCで2カラムにする - キャンペーンのバナーとカウントダウンは、PCで横長の1枚にまとめる ## 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-c3ac0b63`（元 LP の URL から採番） - **元 LP**: https://mystar-web.jp/lp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（9/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。