--- version: alpha name: Idol Pink Heart Color Contact LP description: ピンクのギンガム地にハート・リボン・キラキラを重ねた、アイドル系ワンデーカラコンの LP。色ごとに背景色（ピンク／ラテベージュ／サーモン／ココア）を変えた商品紹介ブロックをくり返し、白い縁取りの立体ロゴ見出しとハート型スペックバッジで「推し」の世界観をつくる。 colors: primary: '#EC91B3' background: '#F6BAD6' background-alt: '#F5B1CA' surface: '#FEFCFE' tint-1: '#D4BAAE' tint-2: '#C49C8D' accent-1: '#FEBABB' accent-2: '#F2C46A' text: '#3A2C2F' text-body: '#5A4A4E' marker: '#EC91B3' line: '#FBCDE3' tint-1-alt-unused: '#FDE9EB' primary-accessible: '#DA2B6C' background-alt-accessible: '#E11D65' typography: display: fontFamily: Playfair Display fontSize: 44px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.02em accent: fontFamily: Great Vibes fontSize: 26px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 48px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.02em headline-md: fontFamily: Zen Maru Gothic fontSize: 22px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-sm: fontFamily: Nunito fontSize: 17px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em body-md: fontFamily: Zen Kaku Gothic New fontSize: 12px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.04em note: fontFamily: Montserrat fontSize: 9px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.3em label-button: fontFamily: M PLUS Rounded 1c fontSize: 11px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heart-spec-badge: backgroundColor: '{colors.primary}' textColor: '{colors.surface}' typography: '{typography.headline-sm}' height: 50px logo-heading: textColor: '{colors.primary}' typography: '{typography.display}' height: 70px sweetness-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 200px feature-cross: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 50px compare-pill: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 20px heart-copy-bubble: backgroundColor: '{colors.background-alt}' textColor: '{colors.surface}' typography: '{typography.body-md}' height: 140px price-heart: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 400px profile-memo: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 300px --- # DESIGN.md — ピンク×ハートのアイドル系カラコン LP（Idol Pink Heart Color Contact LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい - **キーワード**: アイドル・ハート・ギンガムチェック・リボン・キラキラ・推し活 - **地の質感**: 薄いギンガム格子と光沢グラデーション。ハートや宝石のつやと、ぼかした光の粒 - **形**: ハートの枠、角丸カード、ポラロイド風写真、ピル型ラベル、レース縁 - **温度感**: 暖かく甘い。ピンクを基調に、ブラウンとベージュで色の違いを出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EC91B3` | ブランドピンク（見出し・強調） | 6% | 画素の主要色に補正 | | `background` | `#F6BAD6` | ピンクのギンガム地 | 30% | 画素の実測 | | `background-alt` | `#F5B1CA` | 淡いピンクの地 | 11% | 画素の実測 | | `surface` | `#FEFCFE` | 白いカード・テキスト枠 | 11% | 画素の実測 | | `tint-1` | `#D4BAAE` | ラテ色セクションの地 | 8% | 画素の実測 | | `tint-2` | `#C49C8D` | ショコラ色セクションの地 | 6% | 画素の実測 | | `accent-1` | `#FEBABB` | サーモンピンクセクションの地 | 6% | 画素の実測 | | `accent-2` | `#F2C46A` | ハチミツ色のハートバッジ | 1% | 推定 | | `text` | `#3A2C2F` | 大見出しの文字 | 3% | 画素の主要色に補正 | | `text-body` | `#5A4A4E` | 本文の文字 | 2% | 推定 | | `marker` | `#EC91B3` | 本文中の強調ピンク文字 | 1% | 画素の主要色に補正 | | `line` | `#FBCDE3` | 点線・カード枠 | 1% | 画素の主要色に補正 | | `tint-1-alt-unused` | `#FDE9EB` | | 5% | 画素の実測 | | `primary-accessible` | `#DA2B6C` | AA を満たす補正値（計算） | | 計算 | | `background-alt-accessible` | `#E11D65` | AA を満たす補正値（計算） | | 計算 | - 地はピンクのギンガム格子を基本にする - 商品ごとにセクションの地色を変える（ピンク／ベージュ／サーモン／ココア） - テキストは白カードにのせ、強調語だけピンクにする - 大見出しは白い縁取りとドロップシャドウで浮かせる - スペックバッジは、その色ブロックの色に合わせたハートで作る - 黒は使わず、濃い文字はこげ茶寄りにする - `heart-spec-badge` は文字 `#FEFCFE` × 背景 `#EC91B3` のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DA2B6C`、4.53:1）を使う。 - `heart-copy-bubble` は文字 `#FEFCFE` × 背景 `#F5B1CA` のコントラスト比が 1.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-alt-accessible`（`#E11D65`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名・セクションの英字ロゴ見出し | 欧文セリフ | Playfair Display | 900 | 44px | 1.0 | -0.02em | | `accent` | 英字の筆記体の飾り見出し | 欧文スクリプト | Great Vibes | 400 | 26px | 1.1 | 0.0em | | `headline-lg` | 価格訴求の極太の数字と見出し | 丸ゴシック | M PLUS Rounded 1c | 900 | 48px | 1.1 | 0.02em | | `headline-md` | 特長コピーの縁取り見出し | 丸ゴシック | Zen Maru Gothic | 900 | 22px | 1.2 | 0.02em | | `headline-sm` | カラー名・機能名 | 欧文サンセリフ | Nunito | 800 | 17px | 1.3 | 0.02em | | `body-md` | 説明文 | ゴシック | Zen Kaku Gothic New | 500 | 12px | 1.7 | 0.04em | | `note` | 注釈・字間の広い英字ラベル | 欧文サンセリフ | Montserrat | 600 | 9px | 1.4 | 0.3em | | `label-button` | ピル型ラベル | 丸ゴシック | M PLUS Rounded 1c | 700 | 11px | 1.2 | 0.05em | - 見出しには白い縁取りと、ピンクのグラデーションまたは影を付ける - 英字の筆記体は飾りとして見出しの上に重ねる - 本文は中央揃えで短い行にする - 強調語だけを色替えし、太字にはしない - 字間の広い英字の大文字を、ハートで挟んだ区切りラベルにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。比較写真とラインナップは 2 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算） - 商品ブロックは同じ構成をくり返す - 人物の写真は見出しに重ねて大きく配置する - カード・写真・ハートを少しずつ重ねて動きを出す - 使用前後の比較は左右に並べる ## Elevation & Depth - 白カードにはやわらかい影を付ける - 見出しの文字には、厚みの出るドロップシャドウを付ける - 切り抜き人物には白いフチと、外側の淡い光を付ける - ハートバッジは宝石のような光沢グラデーションにする ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: ハート型・ポラロイド風の白フチ・角丸の横長（目元）・円（レンズ） - **セクション境界**: 写真やハートを重ねてつなぐ。直線では区切らない - スペックはハート型のバッジにする - カードの縁はレースやスカラップ模様にする - ラベルはピル型にする - レンズ画像は正円で配置する ## Components - **ハートのスペックバッジ**（`heart-spec-badge`）: ハートの中に数値と単位を入れて、3 つ並べる - **立体ロゴ見出し**（`logo-heading`）: 英字の大見出しに白い縁取りを付け、下にカタカナ名を添える - **甘さレベルカード**（`sweetness-card`）: 白カードに写真とハートの評価、短い説明を入れる - **特長かけ合わせコピー**（`feature-cross`）: 2 つの特長を「×」でつないだ縁取り文字 - **比較ラベル**（`compare-pill`）: 着用前後の写真の上に付けるピル型ラベル - **ハート吹き出し**（`heart-copy-bubble`）: 半透明のハートの中にキャッチ文を入れる - **価格訴求ハート**（`price-heart`）: 大きなハートの上に、極太の割引訴求と単価を置く - **メモ帳プロフィール**（`profile-memo`）: リング綴じのメモ帳風カードに、見出し帯と点線を付ける ## Do's and Don'ts **Do** - ハート・リボン・キラキラを各セクションに散らす - 色ごとに地色を変えて、くり返しの構成にする - 見出しは縁取りと影で立体的にする - 比較写真は同じ構図・同じサイズで並べる - ピンクの彩度は中程度にして甘さを保つ **Don't** - 寒色や原色を主役にしない - 装飾のないフラットなデザインにしない - 直線的・角張った区切りを使わない - 純黒の太い文字を多用しない - 本文を長い段落にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観とブランドを提示する）: ハート枠の人物写真に手書き文字・ロゴ・レンズ 5 色・スペック行を重ねる 2. **ブランド紹介**（新ブランドの登場を伝える）: 大きな宝石ハートの背景に手書き風コピーと色数を置く 3. **コンセプト**（情緒的な価値を伝える）: 人物写真の下に白枠で詩的な短文を入れる 4. **ラインナップ一覧**（全色を見せる）: レース縁の横長カードに目元写真・レンズ円・色名を入れて縦に 5 枚並べる 5. **各色の詳細（×5）**（色ごとの魅力を伝える）: 大きな写真、ロゴ見出し、ハートバッジ、甘さカード、全身の切り抜き、レンズ拡大、比較写真の順。地色は色ごとに変える 6. **価格訴求**（まとめ買いを促す）: 大きなハートの上に極太の割引文言と単価、商品パッケージを置く 7. **ラインナップまとめ**（全色を見比べてもらう）: 白い大枠に 2 カラムで目元とレンズを並べ、スペック帯を挟む 8. **カラーチャート**（違いを図で示す）: 縦横の軸のマップにレンズの円を配置し、軸の端にピル型ラベルを付ける 9. **レンズの特長**（機能面で安心してもらう）: 点線で区切った 2 カラムのグリッドに、ハートアイコンと見出し、説明を入れる 10. **モデル紹介**（親近感と信頼をつくる）: パールで縁取ったハート枠の写真の下に、メモ帳風のプロフィールを置く 11. **商品の物撮り**（商品を印象づけて締める）: サテンの上にパッケージと小物を並べたイメージ写真 ## Imagery - 人物はピンク寄りのハイキーな写真にし、肌をつややかに見せる - 全身写真は切り抜き、白フチと光彩を付ける - 目元は横長でアップに撮り、着用前後を同じ条件にそろえる - レンズは正面から撮り、白背景の円で見せる - ハート・リボン・王冠・宝石・キラキラを手書き風の線画で散らす - 物撮りはサテン布・パール・ジュエリーを使い、ピンクの光で撮る - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像がないため、以下は推奨。PC では中央に 480〜600px の SP 幅カラムを置き、左右をギンガム地で埋める - ラインナップと比較写真は PC で 3〜5 列にしてもよい - 見出し画像は最大幅を制限する - 装飾は左右の余白に追加で散らす ## 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-1d714773`（元 LP の URL から採番） - **元 LP**: https://www.queen-eyes.com/c/idoly/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。