--- version: alpha name: Dusty Rose Watercolor Lingerie Audition LP description: くすみローズとベージュピンクを地に敷き、水彩ファッションイラストとアルコールインク風の背景で甘く上品にまとめた、女性向けアンバサダー募集LP。字間を広くとった細めゴシックとセリフ体の英字見出しで、雑誌のような余白感を出している。 colors: primary: '#C9406A' cta: '#DC8EA3' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#F5E8E2' secondary: '#E6BDBE' dark-section: '#BC968E' surface: '#F4ECEA' tint-1: '#F6E6DB' tint-2: '#FFF6F1' text-body: '#765B5A' on-dark: '#FFFFFF' accent-1: '#B39E6C' line: '#D46A85' cta-accessible: '#C74A6C' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.04em headline-lg: fontFamily: Playfair Display fontSize: 36px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.12em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.15em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.12em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.08em accent: fontFamily: Great Vibes fontSize: 18px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.04em rounded: sm: 4px md: 8px lg: 24px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px ribbon-banner: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' height: 50px cta-box: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 150px section-title-en: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 80px sns-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 480px check-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 400px step-number: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 70px brush-heading: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 50px notice-box: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 600px --- # DESIGN.md — くすみピンク×水彩画のランジェリー募集LP（Dusty Rose Watercolor Lingerie Audition LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: かわいい、上品・高級、やさしい・柔らかい - **キーワード**: くすみローズ・水彩イラスト・アルコールインク・広い字間・SNS投稿風カード・フェミニン - **地の質感**: 水彩の滲みとピンク×金のマーブル背景。半透明の白パネルを写真の上に重ねる - **形**: ピル型ボタン、丸く切り抜いたイラスト、斜めのリボン帯、点線の区切り - **温度感**: 暖色寄りのやわらかいピンクベージュ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C9406A` | 見出し・強調のローズ | 2% | 推定 | | `cta` | `#DC8EA3` | ピル型ボタンの面 | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 21% | 画素の実測 | | `background-alt` | `#F5E8E2` | FV・注意事項の淡ピンクベージュ地 | 18% | 画素の実測 | | `secondary` | `#E6BDBE` | コンセプトセクションのくすみピンク地 | 11% | 画素の実測 | | `dark-section` | `#BC968E` | 募集要項背景のモーヴブラウン | 8% | 画素の実測 | | `surface` | `#F4ECEA` | 写真上の半透明白パネル | 6% | 画素の実測 | | `tint-1` | `#F6E6DB` | イラストの丸背景ベージュ | 3% | 画素の主要色に補正 | | `tint-2` | `#FFF6F1` | 写真ギャラリーの淡ピーチ帯 | 5% | 画素の実測 | | `text-body` | `#765B5A` | 本文のグレー | 2% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | ピンク地上の白文字 | 1% | 画素の主要色に補正 | | `accent-1` | `#B39E6C` | 金額・英字筆記体のゴールド | 0% | 画素の実測 | | `line` | `#D46A85` | 点線区切りのローズ | 0% | 推定 | | `cta-accessible` | `#C74A6C` | AA を満たす補正値（計算） | | 計算 | - 地は白・淡ピンクベージュ・くすみピンクをセクションごとに切り替える - 見出しとチェックアイコンは濃いローズ1色にそろえる - CTAは彩度を落としたローズピンクのピル型にする - 金色は金額数字と筆記体の英字飾りだけに使う - 本文は黒にせず、温かみのあるグレーにする - 写真の背景には半透明の白パネルをのせて文字を読ませる - `button-primary` は文字 `#FFFFFF` × 背景 `#DC8EA3` のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#C74A6C`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大見出し | ゴシック | Zen Kaku Gothic New | 400 | 30px | 1.3 | 0.04em | | `headline-lg` | 英字セクション見出し | 欧文セリフ | Playfair Display | 400 | 36px | 1.1 | 0.12em | | `headline-md` | 日本語のセクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.4 | 0.08em | | `headline-sm` | 小見出し・ステップ名 | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.5 | 0.15em | | `body-md` | 本文・リスト | ゴシック | Zen Kaku Gothic New | 400 | 14px | 1.9 | 0.12em | | `note` | 注意事項・英字サブ | ゴシック | Noto Sans JP | 400 | 12px | 1.8 | 0.08em | | `accent` | 筆記体の英字飾り | 欧文スクリプト | Great Vibes | 400 | 18px | 1.2 | 0.0em | | `label-button` | ボタン文字 | 丸ゴシック | M PLUS Rounded 1c | 500 | 18px | 1.3 | 0.04em | - 本文は字間0.1em以上、中央揃えの短い改行で詩のように組む - 英字の大見出しの下に日本語の小さなサブ見出しを添える - 筆記体の英字は見出しの左上に斜めに重ねる - 太字は見出しとステップ名だけにする - 数字のステップ番号は細いセリフ体を大きく使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。投稿カードは横スクロール、または3列グリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - セクションは上下に広い余白をとる - コンセプト文は中央揃えの短い行で縦に長く並べる - ステップはイラストの丸と説明文を左右に並べ、間を三角矢印でつなぐ - 要項は写真背景の上に半透明パネルを置き、チェック付きリストにする - ステップ番号の左右に点線を引く ## Elevation & Depth - 影はほぼ使わずフラットにする - 投稿カードにはごく薄い影か細い枠を付ける - パネルは影の代わりに半透明で奥行きを出す ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: イラストは正円の丸背景に入れて下端をはみ出させる。写真は角丸なしの四角 - **セクション境界**: 直線で地色を切り替える。ページ上端はゆるい弧 - CTAはピル型にする - 帯見出しは斜めのリボン状の平行四辺形にする - パネルの角に斜めのピンク帯を重ねて飾る - 説明文には手描き風の吹き出し線を使う ## Components - **ピル型CTA**（`button-primary`）: くすみローズのピル型ボタン。白文字を中央に置き、幅いっぱいに配置 - **斜めリボン帯**（`ribbon-banner`）: 白い平行四辺形の両端にピンクの斜線を入れ、特典を金色の数字で目立たせる - **呼びかけ白ボックス**（`cta-box`）: 白いボックスに斜めの点線で挟んだ問いかけ文とCTAを入れる - **英字セリフ見出し**（`section-title-en`）: ローズ色の大きなセリフ英字の下にグレーの日本語サブ見出しを付ける - **SNS投稿風カード**（`sns-card`）: アイコン・写真・いいね欄までを白カードで再現し、活動例として見せる - **チェックリストパネル**（`check-panel`）: 半透明の白パネルにローズの見出しと丸チェック付きリストを並べる - **ステップ番号**（`step-number`）: 小さな英字STEPと大きな細い数字を中央に置き、左右に点線を引く - **筆跡下敷き見出し**（`brush-heading`）: ローズの見出し文字の下に淡いピンクの水彩ブラシを敷く - **注意事項ブロック**（`notice-box`）: 淡ピンク地に警告アイコンと見出しを置き、中黒付きの注意文を並べる ## Do's and Don'ts **Do** - 水彩タッチの女性ファッションイラストを主役にする - ピンクの階調で地色を切り替えてリズムを作る - 本文は字間を広くとり、中央揃えにする - 英字の大見出しと筆記体の飾りを組み合わせる - 応募の流れは番号付きのステップとイラストで見せる **Don't** - 原色の赤や黒の太いボタンは使わない - 角ばった太ゴシックの煽り見出しは使わない - 強い影やグラデーションのボタンは使わない - 本文を詰めて組まない - 寒色を大きな面に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（募集内容と世界観を伝える）: 淡ピンクベージュ地。中央揃えのローズ大見出し、英字のコピー、二人の女性の水彩イラスト、特典を入れたリボン帯 2. **CTA導入**（参加を呼びかける）: 白いボックスに点線で挟んだ問いかけ文とピル型ボタン 3. **コンセプト**（ブランドとの関係性を語る）: くすみピンク地に淡い線画を透かし、白文字の詩的な文章を中央揃えで組む 4. **活動内容**（具体的な活動を見せる）: マーブル背景に英字見出し。点線付きの小見出しとSNS投稿風カードを横スクロールで並べる 5. **投稿ギャラリー**（既存の投稿で実績を示す）: 投稿カードを3列グリッドに並べる 6. **募集要項**（応募条件を伝える）: 人物写真の背景の上に半透明白パネルを置き、チェック付きリストにする 7. **待遇**（報酬と特典を伝える）: 同じ形式のパネルにする。詳細リンクは下線付きのピンク文字 8. **審査ステップ**（応募の手軽さを示す）: 筆跡見出し、STEP番号、丸背景イラストと説明、三角矢印でつなぐ 9. **写真例**（応募写真のイメージを示す）: 淡ピーチ帯に四角いイラストを2×2で少しずらして配置し、筆記体のラベルを付ける 10. **結果待ち**（応募後の流れを伝える）: STEP02の下に手描き吹き出しと丸イラストを置く 11. **注意事項**（応募前の注意を伝える）: 淡ピンク地に警告アイコン付きの見出しと注意文の箇条 12. **最終CTA**（エントリーへ誘導する）: 白地に幅広のピル型ボタン ## Imagery - 墨の線に水彩で色をのせた、ファッション誌風の女性イラストを使う - イラストはベージュの正円に入れ、手描きの筆記体を添える - 背景はピンク×金のアルコールインク風マーブルにする - 人物写真はくすみピンクの層を重ね、ソフトフォーカスにする - コンセプトの背景は、線画を白く薄く透かして敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCではFVを左テキスト・右イラストの2カラムにする - PCでは活動内容のカードを3枚横並びにし、投稿は5列グリッドにする - PCではステップのイラストを横並びにし、横向きの三角矢印でつなぐ - PCでは写真例を4枚横一列に並べる - パネルとCTAは最大幅を約900pxにして中央に置く ## 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-c23fe0d9`（元 LP の URL から採番） - **元 LP**: https://www.tu-hacci.co.jp/f/feature/23_ambassador - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。