--- version: alpha name: Glassy Sky Blue Base Makeup LP description: 空色のグラデーションと淡いグレーの光沢背景に、明朝の見出しと欧文イタリックの飾り文字を重ねた化粧品 LP。半円形の青い帯の上に商品を置き、透明感とツヤを表現する。後半のセルフチェックはピーチベージュ地に切り替わる。 colors: primary: '#5BAED3' secondary: '#3A5BA8' background: '#FFFFFF' background-alt: '#F9F9FC' tint-1: '#F0DCD1' surface: '#FBFAF5' dark-section: '#E2E3E4' accent-1: '#74ABDA' accent-2: '#817264' text: '#333333' text-muted: '#777777' line: '#9EBBD6' cta: '#05C555' on-cta: '#FFFFFF' primary-accessible: '#2B7DA2' cta-accessible: '#03893B' accent-2-accessible: '#807163' typography: display: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.08em headline-lg: fontFamily: Montserrat fontSize: 30px fontWeight: 300 lineHeight: 1.2 letterSpacing: 0.1em accent: fontFamily: Playfair Display fontSize: 34px fontWeight: 400 lineHeight: 1.1 headline-md: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 2px md: 12px lg: 40px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-outline: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-line: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 46px category-label: backgroundColor: '{colors.accent-1}' typography: '{typography.note}' height: 20px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 130px highlight-marker: backgroundColor: '{colors.primary}' typography: '{typography.display}' height: 26px half-capsule-band: backgroundColor: '{colors.primary}' textColor: '{colors.secondary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 170px nav-grid: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.label-button}' height: 120px quiz-card: backgroundColor: '{colors.surface}' textColor: '{colors.accent-2}' typography: '{typography.display}' rounded: '{rounded.lg}' height: 310px date-badge: backgroundColor: '{colors.secondary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 100px --- # DESIGN.md — 空色グラデと透明感のベースメイク LP（Glassy Sky Blue Base Makeup LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、清潔・爽やか、やさしい・柔らかい - **キーワード**: 透明感・ツヤ・空色グラデーション・明朝×欧文イタリック・光の映り込み - **地の質感**: 白〜淡グレーの地に、光が差したような柔らかいグラデーションと薄い影を重ねる。キャンペーン部分は細かい紙のようなグレーの粒子地。 - **形**: 大きく角丸をとった半円の青い帯、角丸の写真、ピル型のアウトラインボタン、アーチ型のカード。 - **温度感**: やや寒色。青と白が基調で、セルフチェック部分だけ暖かいピーチ色。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#5BAED3` | ブランドの空色（ブランド帯・半円帯） | 9% | 推定 | | `secondary` | `#3A5BA8` | 濃い青（見出し文字・ラベル帯・New の文字） | 2% | 推定 | | `background` | `#FFFFFF` | 白の基本地 | 25% | 画素の実測 | | `background-alt` | `#F9F9FC` | 淡い青グレーの光沢地 | 30% | 画素の実測 | | `tint-1` | `#F0DCD1` | セルフチェックのピーチ地 | 5% | 画素の実測 | | `surface` | `#FBFAF5` | セルフチェックのクリーム色カード | 2% | 画素の実測 | | `dark-section` | `#E2E3E4` | キャンペーンの粒子グレー地 | 6% | 画素の実測 | | `accent-1` | `#74ABDA` | ラベルの中間青（カテゴリ帯） | 1% | 画素の実測 | | `accent-2` | `#817264` | セルフチェックの茶色文字・ボタン線 | 1% | 画素の実測 | | `text` | `#333333` | 本文・見出しの濃いグレー | 3% | 推定 | | `text-muted` | `#777777` | 注釈の薄いグレー | 1% | 推定 | | `line` | `#9EBBD6` | ボタン枠・ナビ区切りの淡い青線 | 1% | 画素の実測 | | `cta` | `#05C555` | LINE 登録ボタンの緑 | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA 上の白文字 | 0% | 画素の主要色に補正 | | `primary-accessible` | `#2B7DA2` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#03893B` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#807163` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡い青グレーを交互に使い、光が差したようなグラデーションで変化をつける。 - 空色は半円帯・ブランド帯・円形の商品背景など大きな面にだけ使う。 - 濃い青は見出し・カテゴリラベル・欧文の飾り文字に限定する。 - 強調語は空色〜青の帯で塗りつぶし、白抜き文字にする。 - セルフチェック診断のみピーチ地と茶色文字に切り替え、暖色の区切りを作る。 - 緑は LINE 登録ボタンだけに使い、ほかの部分には使わない。 - `button-outline` は文字 `#5BAED3` × 背景 `#FFFFFF` のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#2B7DA2`、4.61:1）を使う。 - `button-line` は文字 `#FFFFFF` × 背景 `#05C555` のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#03893B`、4.52:1）を使う。 - `half-capsule-band` は文字 `#3A5BA8` × 背景 `#5BAED3` のコントラスト比が 2.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#2B7DA2`、4.51:1）を使う。 - `quiz-card` は文字 `#817264` × 背景 `#FBFAF5` のコントラスト比が 4.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#807163`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品キャッチ・セクションのリード文 | 明朝 | Shippori Mincho | 500 | 20px | 1.7 | 0.08em | | `headline-lg` | CAMPAIGN・LINE UP などの欧文見出し | 欧文サンセリフ | Montserrat | 300 | 30px | 1.2 | 0.1em | | `accent` | New・Base・How to Use などのイタリック飾り文字 | 欧文セリフ | Playfair Display | 400 | 34px | 1.1 | 0.0em | | `headline-md` | Lasting などの特長カード見出し帯 | 欧文セリフ | Noto Serif JP | 500 | 18px | 1.3 | 0.05em | | `headline-sm` | 商品名（下線つき）・使い方の小見出し | ゴシック | Noto Sans JP | 500 | 14px | 1.6 | 0.03em | | `body-md` | 本文・スペック表記 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em | | `label-button` | アウトラインボタン・ナビ | ゴシック | Noto Sans JP | 500 | 14px | 1.4 | 0.1em | - 感情に訴えるコピーは明朝で中央揃えにし、2〜3 行に分けて改行する。 - スペック・説明はゴシックの小さめサイズで左揃えにする。 - 欧文イタリックの飾り文字は商品写真や帯に重ね、少し斜めに置いて動きを出す。 - 商品名には下線を引き、その上に小さなカテゴリラベルを置く。 - 注釈番号は小さく上付きにし、近くにまとめて記載する。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ナビだけ 2×2 のグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 商品ブロックは『写真＋半円帯 → カテゴリラベル → 商品名 → スペック』の順に縦に並べる。 - 写真は横幅の約 56% の角丸縦長で中央に置き、下に飾り文字を重ねる。 - 特長カードは横いっぱいに置き、青い帯の見出しと白い本文エリアで作る。 - How to Use は左右に点線を引いた中央見出しにし、その下にイラストと手順を並べる。 - 余白は大きめにとり、セクション同士は背景のトーン変化で区切る。 ## Elevation & Depth - 特長カードと写真には、青みのある大きくぼかした影（0 10px 30px rgba(90,150,200,.25)）をつける。 - 円形の特徴バッジは、真珠のような虹色の光沢とごく薄い影で作る。 - ボタンは影を使わず、枠線だけで表現する。 ## Shapes - **角丸**: 小 2px ／ 中 12px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 人物写真は角丸の縦長長方形。商品は切り抜いて、半円帯や円形グラデーションの上に置く。 - **セクション境界**: 直線で区切り、背景トーンを切り替える。半円の帯が画面の端からはみ出すように配置する。 - 空色の帯は片側だけ大きく丸めた半円（カプセル半分）の形にする。 - キャンペーンのカードは上部がアーチ型の白いカード。 - カテゴリラベルは角丸のない小さな長方形の帯。 - 特長の補足は大きなピル型のアウトライン枠に入れる。 ## Components - **アウトラインピルボタン**（`button-outline`）: 淡い青の細い枠に空色の文字。右端に丸で囲んだ＋アイコン。カラーチャートなどの展開に使う。 - **LINE 登録 CTA**（`button-line`）: 緑の角丸ボタンに白文字とアイコン。グレーの枠で囲んだ白い箱の中に置く。 - **カテゴリラベル**（`category-label`）: 商品名の上に置く、中間青の長方形帯に白い小さな文字。 - **特長カード**（`feature-card`）: 濃い青のグラデーション帯に欧文見出し、その下に白地の説明。影つき。 - **塗りつぶしの強調語**（`highlight-marker`）: 明朝コピー中のキーワードを青い帯で塗り、白抜き文字にする。 - **半円の空色帯**（`half-capsule-band`）: 画面の端から伸びる半カプセル形の空色グラデーション面。その上に商品と New の飾り文字を重ねる。 - **2×2 ページ内ナビ**（`nav-grid`）: 白地を細い線で区切った 4 マスのナビ。文字は青。 - **セルフチェック設問カード**（`quiz-card`）: クリーム色の大きな角丸カードに Q 番号と質問文、茶色枠の選択肢ボタン、ページ送りのドット。 - **日付の円形バッジ**（`date-badge`）: 青のグラデーションの正円に、白いイタリックで日付と start を入れる。 ## Do's and Don'ts **Do** - 透明感を出すため、地は白〜淡い青グレーにとどめ、光のグラデーションを重ねる。 - コピーは明朝、情報はゴシック、飾りは欧文イタリックと、書体を役割で使い分ける。 - 商品は切り抜き写真にし、空色の半円や円形グラデーションの上に浮かせる。 - 注釈は ※ 番号で小さく、近くにまとめる。 - 余白を広くとり、1 画面に置く要素を絞る。 **Don't** - 原色の赤・黄の強い CTA ボタンは使わない。 - 太いゴシックの大見出しで押し出さない。 - ボタンをベタ塗りで多用しない（基本はアウトライン）。 - 濃い暗色の背景面は作らない。 - 写真に装飾フレームや強いドロップシャドウをつけない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドとツヤ肌の世界観を一瞬で伝える）: 青背景のモデルのアップ写真に白のロゴ、明朝のキャッチ、商品の切り抜きを重ねる。 2. **ブランドコンセプト**（シリーズの思想を伝える）: 空色のグラデーション全面に白いロゴと、明朝の中央揃えの文を置く。 3. **ページ内ナビ**（主要コンテンツへ誘導する）: 白地の 2×2 グリッドに青文字を置き、細線で区切る。 4. **新商品紹介（ファンデーション）**（主力の新商品を訴求する）: 半円の空色帯に商品と New の飾り文字。その下にラベル・商品名・スペック、円形の特徴バッジ。 5. **技術・特長**（独自技術と性能を示す）: テクスチャ写真に欧文の飾り文字と引き出し線。強調帯入りの明朝コピー、青帯見出しの特長カードを縦に並べる。 6. **使用イメージと使い方**（仕上がりと使用方法を見せる）: 角丸の人物写真に、空色帯とイタリックのコピー。点線つきの How to Use 見出し、線画イラスト、手順文、アウトラインボタン。 7. **新商品紹介（2〜3 品目）**（関連商品を同じ型で訴求する）: 同じ商品ブロックの型を繰り返す。補足はピル型の枠に入れる。 8. **キャンペーン**（購入の動機づけ）: 粒子のあるグレー地に白いアーチ型カード。欧文の見出し、日付の円形バッジ、プレゼント商品、注釈。 9. **セルフチェック診断**（自分に合う商品へ導く）: ピーチ地に茶色の明朝見出しと商品の集合写真。クリーム色のカードで質問を出し、選択肢ボタンを置く。 10. **ラインアップ**（シリーズ全商品を一覧する）: 欧文見出しと、カテゴリごとの明朝コピー、円形の青グラデーションに置いた商品、点線区切りの展開リンク。 11. **LINE 登録 CTA**（サンプルクーポンの獲得）: グレー枠の白い箱に案内文と緑のボタンを置く。 12. **店舗・相談導線**（来店とオンライン相談へ誘導する）: 人物写真の上に色帯を敷いたバナーを 2 つ並べる。 ## Imagery - モデルは素肌感のあるツヤ肌のアップ。光が差す明るいトーンで、背景は空色かニュートラルにする。 - 商品は真上〜斜め上から撮った切り抜き。パールや金の細部が見えるように柔らかい反射を残す。 - テクスチャはクリームを X 字に塗り広げたスウォッチを白地に置く。 - 使い方は細い黒線の手描き風イラスト。円の中に顔パーツを描き、青い矢印で動きを示す。 - 背景には窓から差す光のような斜めの白いグラデーションと、ぼかした影を入れる。 - 特徴バッジはシャボン玉のような虹色の光沢を持つ正円にする。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 70% の幅に収め、商品ブロックを『左にテキスト・右に商品と半円帯』の 2 カラムにし、ブロックごとに左右を入れ替える。 - 特長カードは PC では 3 枚横並びにする。 - 使い方は PC では左に写真、右にイラストと手順文の 2 カラムにする。 - ナビは PC では 1 行 4 項目の横並びにし、縦線で区切る。 - セルフチェックは PC では左に見出しと集合写真、右に設問の 2 分割にする。 - ラインアップは 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-78b6211f`（元 LP の URL から採番） - **元 LP**: https://www.albion.co.jp/ccloseup/fd/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。