--- version: alpha name: Calm Blue-Gray Recovery Wear LP description: くすんだ青灰と生成りの地に、ダークネイビーの見出しとオレンジのカートボタンを置いた、静かで信頼感のある休養ウェア（一般医療機器）通販 LP。生活シーン写真と線画の図解、サイズ表で機能を丁寧に説明する。 colors: primary: '#344353' background: '#F8F8F8' background-alt: '#DAE1E9' tint-1: '#F7F6F2' tint-2: '#C8CCD5' cta: '#F66E01' on-cta: '#FFFFFF' accent-1: '#D98C55' text: '#3A3A3A' text-body: '#594E49' secondary: '#526375' surface: '#EAEAEA' marker: '#D9333A' line: '#B7B9BC' cta-accessible: '#C15601' accent-1-accessible: '#B26128' marker-accessible: '#D82F36' typography: display: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 15px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.08em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 6px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px button-lineup: backgroundColor: '{colors.secondary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 56px badge-section: backgroundColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 36px label-feature: backgroundColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 22px worry-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 30px effect-circle: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 90px scene-label: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 36px size-table: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' height: 120px notice-box: backgroundColor: '{colors.background}' textColor: '{colors.marker}' typography: '{typography.note}' height: 48px --- # DESIGN.md — 青灰×生成りの休養ウェア通販 LP（Calm Blue-Gray Recovery Wear LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: 信頼・誠実、シンプル・ミニマル、やさしい・柔らかい、清潔・爽やか - **キーワード**: くすみブルーグレー・生成り・休養・科学的根拠・上品な余白・ライフスタイル写真 - **地の質感**: グラデーションや柄はほぼ使わず、マットな単色の面を重ねる。写真は自然光で柔らかい。 - **形**: 四角い写真ブロックと、小さく角丸にしたラベルやピル型の見出しバッジ。効果は丸いぼかし円で表す。 - **温度感**: やや寒色寄りで落ち着いている。生成りとオレンジで少しだけ温かみを足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#344353` | 見出しバッジ・ブランドのダークネイビー | 2% | 画素の実測 | | `background` | `#F8F8F8` | 基本の白地 | 26% | 画素の実測 | | `background-alt` | `#DAE1E9` | 特長セクションの青灰地 | 14% | 画素の実測 | | `tint-1` | `#F7F6F2` | 設計・お手入れ紹介の生成り地 | 12% | 画素の実測 | | `tint-2` | `#C8CCD5` | ファーストビューのグレー地 | 5% | 画素の実測 | | `cta` | `#F66E01` | カートに入れるボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#D98C55` | 効果を示す丸いぼかし円 | 1% | 画素の実測 | | `text` | `#3A3A3A` | 見出し文字 | 1% | 推定 | | `text-body` | `#594E49` | 本文文字 | 2% | 画素の主要色に補正 | | `secondary` | `#526375` | サイズ表の見出しセル | 1% | 画素の実測 | | `surface` | `#EAEAEA` | サイズ表のセル地・カード | 4% | 画素の実測 | | `marker` | `#D9333A` | 注意書きの赤文字 | 0% | 推定 | | `line` | `#B7B9BC` | 罫線・見出しの下線 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#C15601` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#B26128` | AA を満たす補正値（計算） | | 計算 | | `marker-accessible` | `#D82F36` | AA を満たす補正値（計算） | | 計算 | - 地は白・青灰・生成りを交互に使い、セクションの切り替えを色面で示す - 見出しバッジやラベルはダークネイビーで、文字は白にする - オレンジは購入ボタンと効果の丸だけに使う - 本文はグレー寄りの濃色で、真っ黒は使わない - 赤は注意書きの文字だけに使う - サイズ表は青灰の見出しセルと薄いグレーのセルで作る - `button-primary` は文字 `#FFFFFF` × 背景 `#F66E01` のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#C15601`、4.57:1）を使う。 - `effect-circle` は文字 `#FFFFFF` × 背景 `#D98C55` のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#B26128`、4.53:1）を使う。 - `notice-box` は文字 `#D9333A` × 背景 `#F8F8F8` のコントラスト比が 4.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `marker-accessible`（`#D82F36`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチ | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.04em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.05em | | `headline-md` | 特長の小見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.03em | | `headline-sm` | 設計名・商品名 | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | 注記・表の数値 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `accent` | 英字のセクションラベル | 欧文サンセリフ | Montserrat | 500 | 15px | 1.3 | 0.08em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.05em | - ゴシック 1 書体で揃え、大きさと太さで階層を作る - 見出しは中央揃えで、下に細い罫線を引く - 本文は左揃えで行間を広めにとる - 価格は太字で大きくし、円記号を付ける - 悩みの文は「」で囲み、白い枠に入れて並べる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム（PC は特長・商品とサイズ表が 2 カラム、シーン写真は 3 カラム） - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 写真とテキストを左右に交互に置き、SP では写真を上にする - セクションごとに地の色を変え、上下に広い余白をとる - 商品ブロックは写真スライダー→色選択→商品名→価格→評価→ボタンの順に並べる - サイズ表はトップスとボトムスで分け、下に寸法の線画を置く ## Elevation & Depth - 影はほぼ使わず、色面と罫線で区切る - シーンのラベルだけ白地にごく薄い影を付ける - 効果の丸は外側をぼかして柔らかく光らせる ## Shapes - **角丸**: 小 4px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの四角。人物写真は横長か縦長で使う - **セクション境界**: 直線で背景色を切り替える - セクションのラベルはピル型のダークネイビーにする - 購入ボタンは角丸小の横長長方形にする - 効果は 3 つの丸で並べる - 写真の左上に斜めに切ったラベルを重ねる ## Components - **カート追加ボタン**（`button-primary`）: 商品ブロックの最後に置く、幅いっぱいのオレンジのボタン - **ラインナップ誘導ボタン**（`button-lineup`）: 左に小さな写真、右に文字と下向き矢印を入れたグレーのボタン - **ピル型セクションバッジ**（`badge-section`）: 英字や見出しを入れたダークネイビーのピル - **特徴ラベル**（`label-feature`）: 前後に点を付けた小さなダークラベル。特長ブロックの頭に付ける - **悩みの枠**（`worry-box`）: 「」で囲んだ悩みを白い枠で 3 つ縦に並べる - **効果の丸**（`effect-circle`）: オレンジのぼかし円に白文字で効果を書き、3 つ並べる - **シーンの吹き出しラベル**（`scene-label`）: 写真の上に重ねる 2 行の白いラベル - **サイズ表**（`size-table`）: 青灰の見出し行と薄いグレーのセルで作る表 - **注意書きの枠**（`notice-box`）: 細い赤い罫線の枠に赤い小さな文字 ## Do's and Don'ts **Do** - 地の色は白・青灰・生成りの 3 色を交互に使う - 機能説明は線画の図解に注釈線を付けて見せる - オレンジは購入と効果だけに絞る - モデルは同じ服を着たペアで統一感を出す - 数値や規格の情報は表や箇条書きで整理する **Don't** - 彩度の高い色を背景に使わない - 強い影や立体的なボタンにしない - 手書き風やポップな装飾書体を混ぜない - 購入ボタン以外にオレンジを多用しない - 写真に派手なフィルターや枠を付けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の価値と医療機器であることを伝える）: グレー地に浮遊する男女の写真と細い波線。上に 2 行のキャッチ、右に丸いバッジを置く 2. **ラインナップ誘導**（商品一覧へ早めに誘導する）: 白地の中央に写真付きのグレーボタンを置く 3. **コンセプト**（科学的に疲れを減らす考え方を示す）: 左右に人物写真、中央に見出しと短い本文を置く 4. **悩みの提起**（読み手の悩みに共感する）: 問いかけの見出しと白枠の悩み 3 つ。右に疲れた人物の写真 5. **3 つの効果**（効果をひと目で伝える）: 左に寝ている写真、右にオレンジの丸を 3 つ並べる 6. **利用シーン**（日常での使い方を思い浮かべさせる）: 青灰地に写真を 3 枚並べ、白い吹き出しラベルを重ねる 7. **特長**（医療機器としての根拠と素材を説明する）: 罫線付きの見出しの下に 2 カラムの説明。素材の図解を添える 8. **設計上の特徴**（服の形の工夫を見せる）: 生成り地に上下の線画と注釈を 2 カラムで並べる 9. **お手入れ**（洗濯が簡単なことを伝える）: ラベル、横長のペア写真、下線付きの小見出し、短い本文 10. **商品ラインナップ**（タイプ別に比べて購入してもらう）: ピル見出しのあと、写真スライダーと購入ボタン、右にサイズ表と線画をタイプごとに並べる 11. **特記事項**（使用目的や素材などの法定情報を示す）: 白地に小さな文字の箇条書きと、赤い枠の注意書き 12. **関連特集**（ほかの商品へ回遊させる）: 薄いグレー地にピル見出しとバナー 3 枚 ## Imagery - 自然光の明るい室内で、ベッドや作業机、ダイニングで過ごす男女を撮る - 服はネイビーとグレージュ系の無地で、ペアで着せる - 商品写真はグレーの無地背景に全身で立たせ、身長とサイズを添える - 機能は黒い細線の線画と注釈線、丸いハイライトで説明する - ファーストビューには体の動きを表す細い波線を重ねる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP は 1 カラムにし、PC の左右の写真は本文の上に重ねる - PC の 3 枚並びの写真は、SP では横スクロールか縦に並べる - 商品とサイズ表は、SP では商品→サイズ表の順に縦に並べる - サイズ表は SP では横スクロールできるようにする - 効果の丸は SP でも 3 つ横に並べ、直径を約 90px にする ## 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-2f3079b5`（元 LP の URL から採番） - **元 LP**: https://www.gunze.jp/store/e/esciensleep/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。