--- version: alpha name: Soft Pink and Aqua Beauty Community Signup LP description: 白地をベースに、水色の帯と淡いピンクの面を交互に置いた美容メディアの会員募集 LP。欧文は字間を広くとった細いジオメトリック書体を見出しに、和文は丸みのあるゴシックで小さく軽く組む。濃いグレーの影を付けたくすみピンクのピル型ボタンを何度も繰り返し、登録へ誘導する。 colors: primary: '#DD8294' secondary: '#87C7D0' background: '#FEFEFE' background-alt: '#F2F7FA' tint-1: '#FCF2F3' surface: '#FFFFFF' cta: '#DD8294' on-cta: '#FFF1F6' text: '#424245' text-body: '#5E5A5B' line: '#E2DDDF' dark-section: '#595758' on-dark: '#FEFDFE' accent-1: '#F3EBA0' cta-accessible: '#C93A56' secondary-accessible: '#337983' primary-accessible: '#CD4661' typography: display: fontFamily: Josefin Sans fontSize: 40px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Josefin Sans fontSize: 24px fontWeight: 300 lineHeight: 1.3 letterSpacing: 0.18em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 9px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.1em body-md: fontFamily: Zen Kaku Gothic New fontSize: 11px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.08em accent: fontFamily: Montserrat fontSize: 32px fontWeight: 700 lineHeight: 1.0 label-button: fontFamily: Josefin Sans fontSize: 22px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.03em note: fontFamily: Zen Kaku Gothic New fontSize: 10px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 16px 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.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px free-label: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 20px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 36px benefit-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 250px section-title: textColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 56px ribbon-label: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 30px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 120px text-link: textColor: '{colors.primary}' typography: '{typography.note}' height: 18px footer: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 200px --- # DESIGN.md — くすみピンク×水色の美容会員募集 LP（Soft Pink and Aqua Beauty Community Signup LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: かわいい、やさしい・柔らかい、清潔・爽やか、シンプル・ミニマル - **キーワード**: くすみピンク・ミントブルー・字間広めの欧文見出し・線画アイコン・ピル型ボタン・コスメ写真 - **地の質感**: 白い大理石風の背景と、フラットな単色の面 - **形**: 角丸カード、影付きのピル型ボタン、吹き出し型ラベル、旗ガーランド - **温度感**: やや明るめ。ピンクと水色を中間の温度でバランスよく使う ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#DD8294` | ボタン・番号・小見出しのくすみピンク | 3% | 画素の実測 | | `secondary` | `#87C7D0` | 特典セクションの水色帯・欧文見出し | 9% | 画素の実測 | | `background` | `#FEFEFE` | 基本背景の白 | 41% | 画素の実測 | | `background-alt` | `#F2F7FA` | 説明セクションの薄い青灰色 | 7% | 画素の実測 | | `tint-1` | `#FCF2F3` | SNSセクションの淡いピンク地 | 12% | 画素の実測 | | `surface` | `#FFFFFF` | 特典カードの白 | 8% | 画素の実測 | | `cta` | `#DD8294` | 主ボタンの面 | 2% | 画素の実測 | | `on-cta` | `#FFF1F6` | ボタン上の白文字 | 0% | 画素の実測 | | `text` | `#424245` | 見出しの濃いグレー | 1% | 画素の実測 | | `text-body` | `#5E5A5B` | 本文のグレー | 2% | 推定 | | `line` | `#E2DDDF` | FAQ区切り線・ボタンの影 | 0% | 画素の主要色に補正 | | `dark-section` | `#595758` | フッターのダークグレー | 2% | 画素の実測 | | `on-dark` | `#FEFDFE` | フッター文字 | 0% | 画素の実測 | | `accent-1` | `#F3EBA0` | 線画アイコンのきらめき黄色 | 0% | 推定 | | `cta-accessible` | `#C93A56` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#337983` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#CD4661` | AA を満たす補正値（計算） | | 計算 | - 基本の地は白。説明パートは薄い青灰色、特典パートは水色の帯、SNSパートは淡いピンクにして、セクションごとに地色を変える - ピンクは主ボタン、番号、小見出し、Q.の記号、テキストリンクに限って使う - 水色は欧文の見出し、特典帯、サブボタンに使う - ボタンには濃いグレー（#4A4A4A程度）の縁と、右下へずらした影を付ける - 本文は黒にせず、グレー系でやわらかく見せる - フッターだけダークグレーにして、ページを締める - `button-primary` は文字 `#FFF1F6` × 背景 `#DD8294` のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#C93A56`、4.54:1）を使う。 - `button-secondary` は文字 `#FFF1F6` × 背景 `#87C7D0` のコントラスト比が 1.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#337983`、4.56:1）を使う。 - `ribbon-label` は文字 `#DD8294` × 背景 `#FFFFFF` のコントラスト比が 2.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#CD4661`、4.52:1）を使う。 - `faq-item` は文字 `#DD8294` × 背景 `#FEFEFE` のコントラスト比が 2.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#CD4661`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大見出し（欧文と和文の組み合わせ） | 欧文サンセリフ | Josefin Sans | 400 | 40px | 1.2 | 0.02em | | `headline-lg` | セクションの欧文見出し（字間を広く） | 欧文サンセリフ | Josefin Sans | 300 | 24px | 1.3 | 0.18em | | `headline-md` | ピンクのキャッチ見出し・カードの見出し | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.5 | 0.05em | | `headline-sm` | 欧文見出しの下に添える和文の小見出し | ゴシック | Zen Kaku Gothic New | 400 | 9px | 1.5 | 0.1em | | `body-md` | 本文・FAQの回答 | ゴシック | Zen Kaku Gothic New | 400 | 11px | 2.0 | 0.08em | | `accent` | カード番号（01〜05） | 欧文サンセリフ | Montserrat | 700 | 32px | 1.0 | 0.0em | | `label-button` | ボタンのラベル（欧文を大きく、和文を小さく） | 欧文サンセリフ | Josefin Sans | 400 | 22px | 1.0 | 0.03em | | `note` | 規約リンクなどの注記 | ゴシック | Zen Kaku Gothic New | 700 | 10px | 1.5 | 0.05em | - セクション見出しは、細い欧文を大きく置き、その下に和文を小さく添える2段構成にする - 本文は11px前後と小さめにし、行間2.0で軽く見せる - 強調はピンクの太字で行い、マーカーは使わない - ボタンのラベルは、欧文を大きく、和文を小さく並べる - 本文は中央揃えを基本にし、FAQと長い説明文だけ左揃えにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC では特典カードを 5 列、SNS 埋め込みを 2 列にする - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - セクションの上下に48〜64pxの余白を取る - カードは左右に約8%の余白を残し、カード同士の間隔は16px - 主CTAのブロックは「斜線で挟んだ無料ラベル＋ボタン＋規約リンク」の3点を1セットにする - SNS埋め込みは白枠の中に縦に並べる - FAQは区切り線で仕切ったリストにする ## Elevation & Depth - ボタンは、ぼかさない濃いグレーの影を右下に3〜4pxずらして付ける - カードは影なしのフラットにし、地色との差だけで区別する - 埋め込みの枠は1pxの薄い線にする ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: コスメは切り抜き写真にして、散らすように配置する - **セクション境界**: 直線で地色を切り替える - ボタンはピル型にし、濃い縁と影を付ける - カードの角丸は12〜16px - ロゴの上には吹き出し型のラベルを付ける - 特典帯の左右の角に旗ガーランドのイラストを置く - 見出しラベルにはリボン型の白帯を使う ## Components - **主登録ボタン**（`button-primary`）: ピンクのピル型ボタン。濃いグレーの縁と、ずらした影を付ける。欧文を大きく、和文を小さく組む - **斜線で挟んだ無料ラベル**（`free-label`）: ボタンの上に、左右を「＼ ／」で挟んだピンクの太字を置く - **外部リンクボタン**（`button-secondary`）: 水色のピル型ボタン。主ボタンと同じ影を付け、外部リンクのアイコンを添える - **番号付きの特典カード**（`benefit-card`）: 白いカードの左上に大きなピンクの番号を置き、その右にピンクの見出し、中央に線画アイコン、下に説明文を入れる - **欧文の見出し＋和文の小見出し**（`section-title`）: 字間を広くとった細い欧文と、その下の小さな和文を中央に揃える - **リボン型の見出しラベル**（`ribbon-label`）: 水色の帯の上に、両端を切り欠いた白いリボンを置き、中にピンクの文字を入れる - **FAQ項目**（`faq-item`）: ピンクの「Q.」と太字の質問、グレーの「A.」と回答を並べ、下に区切り線を引く - **下線付きのピンクのリンク**（`text-link`）: 規約などへのリンク。点線の下線を付けたピンクの太字にする - **ダークフッター**（`footer`）: ダークグレーの地に、白でロゴ、リンク、コピーライトを中央揃えで置く。右上にトップへ戻るタブを付ける ## Do's and Don'ts **Do** - CTAセットはページ内に4回以上繰り返して置く - 欧文見出しは細く、字間を広くとる - アイコンはグレーの線画で描き、黄色のきらめきを添える - 地色は白・青灰色・水色・淡いピンクで、セクションごとに切り替える - ピンクの使いどころは、ボタン・番号・強調の3つに絞る **Don't** - 原色の赤や鮮やかなショッキングピンクは使わない - 太く重い見出し書体で画面を埋めない - カードにぼかしたドロップシャドウを付けない - 本文を真っ黒にしない - 写真を全面に敷いて文字を重ねない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（会員募集を告知し、すぐ登録へ誘導する）: 大理石風の背景にコスメの切り抜き写真を散らし、中央の水色の板に、吹き出し型ラベル・大見出し・白帯のサブコピーを置く。その下にCTAセットを配置する 2. **メディア紹介**（運営メディアの理念を伝える）: 白地に欧文見出し、ピンクのキャッチ、中央揃えの短い文を並べる 3. **会員とは**（会員制度の概要を説明する）: 青灰色の地に、左揃えの説明文を置き、冒頭だけ水色の太字にする 4. **特典**（5つのメリットを見せる）: 水色の帯の中に、旗ガーランド、リボン型ラベル、番号付きの白カード5枚を並べる 5. **中間CTA**（便利さを一言添えて登録を促す）: 白地に2行の太字コピーを置き、その下にCTAセットを配置する 6. **上位会員の紹介**（活動するとステップアップできることを示す）: 青灰色の地に、ロゴを入れた白い角丸ボックスと水色の太字の説明を置く 7. **登録方法**（手順を案内する）: 見出し、2行の案内文、CTAセットの順に並べる 8. **公式SNS**（実際の発信内容を見せて親近感を持たせる）: 淡いピンクの地に、SNSごとの小さなピンクの見出しと埋め込みを縦に並べる。最後に水色の外部リンクボタンを置く 9. **よくある質問**（費用・条件・手続きの不安を解消する）: 白地に、Q&Aを区切り線で仕切ったリストで並べ、ピンクのリンクを付ける 10. **最終CTA・フッター**（最後のひと押しと、運営情報の提示）: CTAセットの下に、ダークグレーのフッターを置く ## Imagery - リップ、パレット、マスカラなどのコスメを俯瞰で撮って切り抜き、斜めに散らして配置する - 背景は白い大理石に、金色の細い筋が入ったテクスチャにする - アイコンは濃いグレーの太めの単線で、ギフト・チューブ・スマホ・チケット・封筒をシンプルに描く - アイコンの周りに、薄い黄色の四芒星のきらめきを添える - 旗ガーランドは白とグレーの線画で描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは本文ブロックの幅を約70%に絞り、中央に置く - 特典カードは、PCでは5列に並べ、カード内の要素を縦に中央揃えにする - 上位会員の紹介は、PCではロゴと説明文を左右2列に並べる - SNS埋め込みは、PCでは2列のグリッドにする - ファーストビューは、PCでは写真を左右の外側に広げ、中央の水色の板を細めにする - フッターは、PCではロゴを左、リンクを右に分けて置く ## 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-a71d1037`（元 LP の URL から採番） - **元 LP**: https://mimitv.co.jp/lp/mimist/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。