--- version: alpha name: Dreamy Pastel Cloud Self-Care LP description: ラベンダーの星空と白い雲、遊園地モチーフの白い造形を背景に置いたファンタジー調のセルフケアコスメ LP。中央の細いカラムに、生成りと青白い地のセクションを交互に並べる。商品ごとに大きな欧文セリフ見出し、ビジュアル、短い説明、テクスチャ写真、色違いの順で繰り返す。 colors: primary: '#B1C8D8' secondary: '#A2A1BE' background: '#FFFFFF' background-alt: '#F9F3EC' surface: '#F4F5FA' tint-1: '#E8ECF7' accent-1: '#A4C9DE' text: '#7FAED6' text-muted: '#A2A1BE' accent-2: '#B8A1BE' text-accessible: '#397BB3' primary-accessible: '#4D7B9B' typography: display: fontFamily: Playfair Display fontSize: 44px fontWeight: 400 lineHeight: 1.05 accent: fontFamily: Cormorant Garamond fontSize: 18px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.05em note: fontFamily: Cormorant Garamond fontSize: 12px fontWeight: 400 lineHeight: 1.3 rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 24px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' product-title: textColor: '{colors.primary}' typography: '{typography.display}' height: 100px star-divider: textColor: '{colors.primary}' height: 16px arc-label: textColor: '{colors.primary}' typography: '{typography.accent}' height: 30px texture-tile: backgroundColor: '{colors.accent-1}' height: 140px variation-pair: height: 100px dream-visual: backgroundColor: '{colors.secondary}' height: 340px centered-copy: textColor: '{colors.text}' typography: '{typography.body-md}' height: 120px outro-illust: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.accent}' height: 120px --- # DESIGN.md — ラベンダー夜空と雲のパステルコスメ LP（Dreamy Pastel Cloud Self-Care LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: やさしい・柔らかい、かわいい、上品・高級、シンプル・ミニマル - **キーワード**: 夜空のラベンダー・ふわふわの雲・白い遊園地モチーフ・パステルブルー・星の連なり・欧文セリフ - **地の質感**: マットで柔らかいCG調の質感。雲は綿のようにふんわり、夜空には小さな星が散る - **形**: 角のない長方形の写真をそのまま並べる。装飾は小さな星の列と弧を描く欧文ラベルだけ - **温度感**: ひんやりして穏やかな夜の空気感。青みのパステルに生成りを少し混ぜて温かさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#B1C8D8` | 商品名の欧文大見出し・星の装飾 | 1% | 画素の実測 | | `secondary` | `#A2A1BE` | ファーストビューのラベンダー夜空 | 7% | 画素の主要色に補正 | | `background` | `#FFFFFF` | ページ全体の外側の地 | 60% | 画素の実測 | | `background-alt` | `#F9F3EC` | 生成りの商品セクションの地 | 11% | 画素の実測 | | `surface` | `#F4F5FA` | 青白い商品セクションの地 | 9% | 画素の実測 | | `tint-1` | `#E8ECF7` | 香り紹介セクションの淡いブルーの地 | 4% | 画素の実測 | | `accent-1` | `#A4C9DE` | テクスチャ写真の水色背景 | 2% | 画素の実測 | | `text` | `#7FAED6` | リードコピーと本文の青い文字 | 1% | 推定 | | `text-muted` | `#A2A1BE` | 締めのイラスト線画 | 0% | 画素の主要色に補正 | | `accent-2` | `#B8A1BE` | 商品写真の空のラベンダーグラデーション | 4% | 画素の実測 | | `text-accessible` | `#397BB3` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#4D7B9B` | AA を満たす補正値（計算） | | 計算 | - 外側の地は白。コンテンツは中央のカラムに収める - 商品セクションの地は生成り（#F8F3ED）と青白い色（#F4F5FA）を交互に切り替える - 文字はすべてパステルブルー系にして、黒は使わない - 濃い色はラベンダーの夜空写真にまかせる。平面の塗りは淡い色だけにする - テクスチャ写真は水色の単色背景で統一する - 強いコントラストの CTA カラーは置かず、全体を淡いトーンにそろえる - `page` は文字 `#7FAED6` × 背景 `#FFFFFF` のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#397BB3`、4.51:1）を使う。 - `outro-illust` は文字 `#B1C8D8` × 背景 `#FFFFFF` のコントラスト比が 1.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#4D7B9B`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名の欧文大見出し（2行組） | 欧文セリフ | Playfair Display | 400 | 44px | 1.05 | 0.0em | | `accent` | 弧状に配置する小見出し（バリエーション・香りなど） | 欧文セリフ | Cormorant Garamond | 400 | 18px | 1.2 | 0.05em | | `headline-md` | 冒頭のリードコピー | ゴシック | Noto Sans JP | 700 | 15px | 1.7 | 0.05em | | `headline-sm` | 香りの名前など小見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.6 | 0.05em | | `body-md` | 中央揃えの商品説明文 | ゴシック | Noto Sans JP | 500 | 12px | 2.0 | 0.05em | | `note` | クレジット表記 | 欧文セリフ | Cormorant Garamond | 400 | 12px | 1.3 | 0.0em | - 商品名は欧文セリフを大きく使い、単語ごとに改行して中央に置く - 日本語本文は小さめのゴシックを中央揃えにし、行間を 2.0 前後と広く取る - 本文は 1 行を短く切り、詩のように改行する - 欧文の小見出しは上に弧を描くように曲げて配置する - 太字は冒頭のリードと小見出しだけに使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC も中央の細いカラム1列 - **本文ブロックの幅**: 画面幅の約 70% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - 1 商品で 1 セクション。見出し→ビジュアル→説明→テクスチャ→色違いの順で固定する - メインビジュアルは縦長の 3:4 で、カラム幅の約 75% にする - テクスチャ写真は正方形で、カラム幅の約 50% にする - 色違いは小さな商品写真を 2 つ横に並べる - 要素間は 32〜48px 空けて、ゆったりした余白を保つ ## Elevation & Depth - 影は使わずフラットにする - 奥行きは写真の雲と CG の立体感だけで出す ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの長方形と正方形。商品の切り抜き写真は背景なしで置く - **セクション境界**: 背景色の切り替わる位置に、小さな星（★）を横一列に 13 個ほど並べる - カードや枠線は使わない - セクションの区切りは星の列と地色の変化だけで表す - 装飾は星・雲・観覧車などの遊園地モチーフに限る ## Components - **商品名欧文見出し**（`product-title`）: パステルブルーの細い欧文セリフを 2 行で中央に置く - **星の区切り線**（`star-divider`）: 水色の小さな星を等間隔で横一列に並べ、セクションの境目に置く - **弧状の欧文ラベル**（`arc-label`）: 色違いや香りの見出しになる、上に弧を描く小さな欧文。雲のイラストを添えてもよい - **テクスチャ写真**（`texture-tile`）: 水色の地にクリームやジェルを伸ばしたマクロ写真を置いた正方形 - **色違い並び**（`variation-pair`）: 水色と白の色違い商品を、切り抜き写真で 2 つ横に並べる - **夜空ビジュアル**（`dream-visual`）: ラベンダーの星空と雲の上に、商品と遊園地のオブジェを配置した縦長の写真 - **中央揃え本文**（`centered-copy`）: 青い小さなゴシックで書いた、短い行の説明文ブロック - **締めの線画とリンク**（`outro-illust`）: 灰色の観覧車の線画の上に、弧状の欧文リンクを置く ## Do's and Don'ts **Do** - 文字色はパステルブルーで統一する - 商品ごとのセクションは同じ構成を繰り返して、リズムを出す - 生成りと青白い地を交互に使う - 余白を広く取り、静かで夢のような印象を保つ - 背景写真にはラベンダーの夜空と雲を必ず入れる **Don't** - 黒や濃いグレーを本文に使わない - 赤や黄色などの強い CTA ボタンを置かない - 影・枠線・角丸カードを足さない - 太い和文ゴシックで大見出しを組まない - 情報を詰め込んだ表やアイコンの羅列を入れない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（シリーズの世界観を一目で伝える）: ラベンダーの夜空の上で、雲と遊園地モチーフに商品を並べる。シリーズ名は欧文セリフで重ねる 2. **コンセプト導入**（リラックスと夢のイメージを言葉で伝える）: 白地に太字のリードを置き、中央揃えの短い本文と小さなテクスチャ写真を続ける 3. **香りの紹介**（2 種類の香りの違いを説明する）: 淡いブルーの地に弧状の欧文見出しと雲の絵を置き、香りの名前を小見出しにして説明を 2 ブロック並べる 4. **商品紹介（繰り返し）**（各アイテムの使い心地を伝える）: 欧文の大見出し、縦長の夜空ビジュアル、本文、テクスチャ写真、色違いの順で組む。8 商品ほど繰り返す 5. **区切り**（商品セクション同士の境目を示す）: 星の列を置き、背景色を生成りと青白い色で交互に切り替える 6. **一覧リンク**（全商品ページへ誘導する）: 白地に観覧車の線画を置き、弧状の欧文リンクを添える 7. **クレジット**（制作スタッフを記す）: 小さな欧文セリフを水色の中央揃えで並べる ## Imagery - 背景はラベンダーから青紫へのグラデーションの夜空にし、白い小さな星を散らす - 下側に白くふわふわした雲を敷き、商品が雲に浮かぶように見せる - 観覧車・メリーゴーラウンド・ジェットコースターを白いマットな CG オブジェとして添える - テクスチャは水色の単色背景の上で、クリーム・ジェル・オイルを真上から撮る - 商品は水色と白のマットなボトルを背景なしの切り抜きにする - 締めにはグレーの細い線画イラストを使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC でも本文は幅 350px 前後の中央カラムに保ち、左右は白地にする - PC のファーストビューは、左のアイテムマップ・中央のコピー・右のキービジュアルの 3 枚を横に並べる - SP ではファーストビューのキービジュアルを先頭に置き、コピーとアイテムマップを下に縦に積む - SP ではメインビジュアルを幅 85% 程度に広げる - 大見出しは SP で 40〜44px、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-5c348d59`（元 LP の URL から採番） - **元 LP**: https://gelatopique.com/Page/feature/260202_RENEWAL/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/10 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。