--- version: alpha name: Icy Blue Cooling Cosmetic Editorial LP description: 淡い氷色のブルーグラデーションを地にして、イタリック体の欧文セリフと赤の差し色でまとめた、韓国コスメ風の縦長エディトリアル LP。モデル写真と商品の静物写真を交互に置く。データグラフや Before/After で冷却やテカリ防止の効果を数値で見せる、情報量の多い作り。 colors: primary: '#7C9DBB' accent-1: '#C21C22' background: '#E5ECF2' background-alt: '#F6F6F6' tint-1: '#EBF5FE' secondary: '#7C9DBB' tint-2: '#C6D8E6' surface: '#FEFEFF' text: '#333333' text-muted: '#9A9A9A' dark-section: '#4D7499' on-dark: '#E5ECEE' line: '#D4DDE8' secondary-accessible: '#496D8D' primary-accessible: '#40607C' typography: display: fontFamily: Playfair Display fontSize: 80px fontWeight: 400 lineHeight: 0.9 letterSpacing: -0.02em accent: fontFamily: Playfair Display fontSize: 18px fontWeight: 400 lineHeight: 1.2 letterSpacing: -0.01em headline-lg: fontFamily: Playfair Display fontSize: 44px fontWeight: 400 lineHeight: 1.0 letterSpacing: -0.03em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 500 lineHeight: 1.5 headline-sm: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' point-label: textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 24px hashtag-keyword: textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 30px label-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 30px graph-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 220px before-after: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 180px satisfaction-bar: backgroundColor: '{colors.tint-2}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 12px tip-pill: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 20px faq-item: textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 110px --- # DESIGN.md — 氷のブルー×差し赤の冷感コスメ LP（Icy Blue Cooling Cosmetic Editorial LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 清潔・爽やか、クール・先進的、上品・高級、情報量多め・訴求型 - **キーワード**: 氷・冷感・エディトリアル・淡いブルー・赤の差し色・データ訴求 - **地の質感**: 霧がかったブルーグラデーションと氷の質感。背景に大きな欧文セリフを薄い透かし文字で敷く - **形**: 角丸は小さめのカード、円形の成分写真、細いスライダーバー - **温度感**: 寒色で冷たい印象。赤をポイントに少しだけ効かせる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#7C9DBB` | ブランドブルー（見出し強調・グラフ） | 4% | 画素の主要色に補正 | | `accent-1` | `#C21C22` | 差し色の赤（Point 番号・欧文タイトル） | 1% | 画素の実測 | | `background` | `#E5ECF2` | 淡い氷色の地 | 30% | 画素の実測 | | `background-alt` | `#F6F6F6` | 明るいグレーの地 | 10% | 画素の実測 | | `tint-1` | `#EBF5FE` | 水色の淡い地 | 12% | 画素の実測 | | `secondary` | `#7C9DBB` | くすみブルーの帯・ラベル | 5% | 画素の主要色に補正 | | `tint-2` | `#C6D8E6` | やや濃い水色の面 | 8% | 画素の実測 | | `surface` | `#FEFEFF` | グラフ用の白いカード | 6% | 画素の実測 | | `text` | `#333333` | 見出しの濃いグレー | 2% | 推定 | | `text-muted` | `#9A9A9A` | 注釈のグレー | 1% | 推定 | | `dark-section` | `#4D7499` | 濃いデニムブルーの写真地 | 6% | 画素の実測 | | `on-dark` | `#E5ECEE` | 写真上の白い文字 | 1% | 画素の実測 | | `line` | `#D4DDE8` | 区切り線・グラフ罫線 | 1% | 画素の主要色に補正 | | `secondary-accessible` | `#496D8D` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#40607C` | AA を満たす補正値（計算） | | 計算 | - 地は淡いブルー・水色・明るいグレーの 3 種類を、セクションごとに切り替える - 強調テキストはブランドブルーの太字。ハッシュタグ風のキーワードに使う - 赤は Point 番号・欧文タイトルの頭・改善率のバッジだけに限る - グラフは比較対象をグレー、自社をブルーのグラデーション棒にする - 暖色はモデルの肌と商品の赤以外に使わない - `label-band` は文字 `#E5ECEE` × 背景 `#7C9DBB` のコントラスト比が 2.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#496D8D`、4.56:1）を使う。 - `before-after` は文字 `#E5ECEE` × 背景 `#7C9DBB` のコントラスト比が 2.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#496D8D`、4.56:1）を使う。 - `satisfaction-bar` は文字 `#7C9DBB` × 背景 `#C6D8E6` のコントラスト比が 1.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#40607C`、4.51:1）を使う。 - `tip-pill` は文字 `#E5ECEE` × 背景 `#7C9DBB` のコントラスト比が 2.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#496D8D`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の欧文イタリックのロゴ風タイトル | 欧文セリフ | Playfair Display | 400 | 80px | 0.9 | -0.02em | | `accent` | Point 番号・欧文の小見出し・背景の透かし文字 | 欧文セリフ | Playfair Display | 400 | 18px | 1.2 | -0.01em | | `headline-lg` | マイナス温度などの大きな数値 | 欧文セリフ | Playfair Display | 400 | 44px | 1.0 | -0.03em | | `headline-md` | セクションの見出し（2 行） | ゴシック | Noto Sans JP | 500 | 18px | 1.5 | 0.0em | | `headline-sm` | ブルーの太字キーワード・グラフのタイトル | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.02em | | `body-md` | 中央揃えの説明文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.0em | | `note` | 試験条件などの注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em | - 欧文セリフは細めで字間を詰め、幅の狭い印象にする - 和文は中央揃え。1 行目を灰色の導入、2 行目をブルーの太字の結論にする - キーワードには「#」を付けてハッシュタグ風に見せる - 背景に大きな欧文の透かし文字（白〜淡ブルー、不透明度 30% 前後）を敷く - 数値は欧文セリフで大きく、単位は小さくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。比較画像は 2〜3 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 写真は全幅か左右 18px 余白で配置する - Point ごとに「番号 → 見出し → 説明 → 写真 → グラフ」の順に並べる - グラフは白いカードに入れ、下に注釈を添える - 満足度は横長のスライダーバーと大きな % で見せる ## Elevation & Depth - グラフのカードは影なし、または極薄の影 - 商品の静物写真は柔らかい落ち影で浮かせる - 基本はフラットで、立体感は写真で出す ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 角丸 6px の長方形。成分は円形に切り抜く - **セクション境界**: 直線で地の色を切り替える。FV だけ大きな弧状の背景面を使う - Tip ラベルや吹き出しタグは小さなピル型 - Before/After の写真は下にラベルの帯を付ける - 円弧や円のモチーフで冷却パウダーのパクトを連想させる ## Components - **Point 番号**（`point-label`）: 赤い欧文セリフで Point と番号を中央に置く - **ハッシュタグ強調**（`hashtag-keyword`）: # 付きのブルー太字キーワード。下に淡いブルーのマーカー帯を敷くこともある - **ブルーの帯見出し**（`label-band`）: ブルーの面に白文字の短いキャッチ - **グラフカード**（`graph-card`）: 白いカードに棒グラフと改善率の円バッジを載せる - **比較写真**（`before-after`）: 2 枚を並べ、下の帯をグレーとブルーで塗り分けたラベル - **満足度バー**（`satisfaction-bar`）: ブルーのグラデーションのバーと大きな % 数値 - **Tip ラベル**（`tip-pill`）: ブルーのピル型に白い欧文で Tip と入れる - **Q&A 項目**（`faq-item`）: ブルーの欧文セリフの Q と太字の質問、灰色の回答 ## Do's and Don'ts **Do** - 淡いブルーの地と白を基調に、冷たく透明感のある画面にする - 効果は数値・グラフ・試験注釈で裏付ける - 赤はごく少量だけ使い、視線を誘導する - モデル写真と商品写真を交互に挟み、リズムを作る - 欧文セリフの透かし文字で雑誌風の奥行きを出す **Don't** - 暖色系のベタ塗りの背景を使わない - 太い角ゴシックの極太見出しを多用しない - 赤を広い面に使わない - グラフの色をブルーとグレー以外にしない - 影の強いカードや派手なグラデーションのボタンを使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドの世界観と商品名を印象づける）: 白〜ブルーの弧の背景に、大きなイタリックの欧文とモデルのアップを置く 2. **商品紹介**（商品の外観と冷感を伝える）: 氷の上の商品写真。和名と欧文名を左揃えで小さく添える 3. **キービジュアル（数値訴求）**（冷却温度という主な数値を示す）: 大きな温度の数値と温度計状の円形図。背景に透かし文字 4. **特長一覧**（5 つのポイントを俯瞰させる）: 3＋2 の列。縦の罫線で区切り、赤い Point 番号とブルーのハッシュタグを入れる 5. **Point 1 詳細**（皮脂吸着の効果を証明する）: 使用写真、テクスチャ比較、グラフカード、満足度バー 6. **Point 2 詳細**（白浮きしない仕上がりを訴求する）: 商品の静物写真、手の甲の比較、毛穴カバーのグラフ 7. **モデルビジュアル**（世界観を補強する）: ブルーの箱型セットでのモデル写真に、赤と白の欧文タイトルを重ねる 8. **Point 3 詳細**（冷却効果を可視化する）: サーモ画像の比較、温度スライダー、2 つの棒グラフ 9. **Point 4 詳細**（水分配合を説明する）: 浮遊する商品写真、円形の成分比較、成分表、肌断面のイラスト 10. **Point 5 詳細**（ブルー成分を紹介する）: 青く色調補正した成分写真を 3 列グリッドで並べ、円形のブースト成分を添える 11. **使い方**（使用シーンを示す）: 大きな透かし欧文の上に Tip 番号、写真、ピル型の Tip 注記 12. **よくある質問**（不安を解消する）: ブルーのグラデーション地に Q 形式のリスト。最後に商品と氷の写真、保管上の注意 ## Imagery - デニム衣装のモデルを、淡いブルーの壁や箱型のセットで撮る - 白と赤の商品を氷の塊や浮遊構図でクールに撮る - 成分写真は青く色調補正し、トーンを揃える - 肌のアップは明るく、ツヤとマットの比較がわかるように撮る - 肌断面などの図解はフラットなイラスト（水色の粒＋ベージュの細胞）で描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 750px 前後の 1 カラムで、SP の画像を拡大して使う想定 - 左右の余白は淡いブルーの地で埋める - Point 一覧は PC では 5 列横並びにしてもよい - グラフカードは最大幅 640px に収める ## 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-07356836`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/espoirglobal/es-pd-010/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。