DESIGN.md — ラベンダー夜空と雲のパステルコスメ LP（Dreamy Pastel Cloud Self-Care LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: やさしい・柔らかい、かわいい、上品・高級、シンプル・ミニマル
• キーワード: 夜空のラベンダー・ふわふわの雲・白い遊園地モチーフ・パステルブルー・星の連なり・欧文セリフ
• 地の質感: マットで柔らかいCG調の質感。雲は綿のようにふんわり、夜空には小さな星が散る
• 形: 角のない長方形の写真をそのまま並べる。装飾は小さな星の列と弧を描く欧文ラベルだけ
• 温度感: ひんやりして穏やかな夜の空気感。青みのパステルに生成りを少し混ぜて温かさを足す

Colors

• 外側の地は白。コンテンツは中央のカラムに収める
• 商品セクションの地は生成り（#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

• 商品名は欧文セリフを大きく使い、単語ごとに改行して中央に置く
• 日本語本文は小さめのゴシックを中央揃えにし、行間を 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。