--- version: alpha name: Diagonal Pastel Protein Food LP description: 淡いグレーとピンクの地を斜めに切り替えて、セクションを区切るプロテイン食品のLPです。英字の極太見出しとサーモン系の赤い強調文字が軸になっています。白カードに大きな番号を添えた解説、フレーバーごとのパステル色カード、斜め切り抜きの写真で、明るく爽やかな女性向けの印象を作ります。 colors: primary: '#F0605A' background: '#FFFFFF' background-alt: '#F2F2F2' tint-1: '#FFE8E6' secondary: '#E5E5E5' text: '#000000' text-muted: '#888888' surface: '#FDFDFD' accent-1: '#FFEAC3' accent-2: '#DEF6D8' accent-3: '#FD8B2B' tint-2: '#FEE1E9' dark-section: '#1A1A1A' typography: display: fontFamily: Montserrat fontSize: 34px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.12em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 900 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: 12px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 40px fontWeight: 300 lineHeight: 1.0 label-button: fontFamily: Montserrat fontSize: 11px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 0px md: 2px lg: 4px full: 999px spacing: unit: 8px card: 20px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-title-en: textColor: '{colors.text}' typography: '{typography.display}' height: 70px numbered-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 110px flavor-card: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 200px point-label: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.accent}' height: 40px flavor-circle: backgroundColor: '{colors.accent-3}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 80px product-banner: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 180px slash-heading: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 30px store-logo-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' height: 56px nav-pill: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 20px --- # DESIGN.md — 斜め帯×淡ピンクグレーのプロテイン食品LP（Diagonal Pastel Protein Food LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 清潔・爽やか、やさしい・柔らかい、情報量多め・訴求型、ポップ・元気 - **キーワード**: 斜め帯・パステル・英字極太見出し・サーモン強調・白カード・フレーバー色分け - **地の質感**: フラットな単色面。白カードにごく薄い影を付ける - **形**: 角丸なしの四角いカードと斜めのセクション境界。フレーバーを示す円だけが丸い - **温度感**: やや暖かい。淡いピンクとニュートラルなグレーの組み合わせ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F0605A` | 番号・強調見出し・グラフ | 2% | 推定 | | `background` | `#FFFFFF` | 基本の地 | 34% | 画素の実測 | | `background-alt` | `#F2F2F2` | 斜め帯のグレー地 | 19% | 画素の実測 | | `tint-1` | `#FFE8E6` | 斜め帯の淡ピンク地 | 16% | 画素の実測 | | `secondary` | `#E5E5E5` | 濃いめのグレー帯・ポイント見出し帯 | 12% | 画素の実測 | | `text` | `#000000` | 見出しと本文 | 3% | 画素の実測 | | `text-muted` | `#888888` | 注釈・出典 | 0% | 推定 | | `surface` | `#FDFDFD` | 解説カード | 8% | 画素の実測 | | `accent-1` | `#FFEAC3` | オレンジ系フレーバーカード | 2% | 画素の実測 | | `accent-2` | `#DEF6D8` | グリーン系フレーバーカード | 1% | 画素の主要色に補正 | | `accent-3` | `#FD8B2B` | フレーバー円・グラフ線 | 0% | 画素の実測 | | `tint-2` | `#FEE1E9` | ピンク系フレーバーカード | 2% | 画素の実測 | | `dark-section` | `#1A1A1A` | カード上の黒い帯ラベル | 0% | 推定 | - 白・淡グレー・淡ピンクの地を、斜めの境界で交互に切り替える - 強調はサーモン赤の文字だけで行い、面には使わない - 番号・数値・グラフの主要な線をサーモン赤にする - 商品ごとにピンク・オレンジ・赤・緑の淡い色を割り当てて、カード地にする - 本文は黒に近い色で統一し、注釈はグレーで小さく入れる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの英字タイトル | 欧文サンセリフ | Montserrat | 800 | 34px | 1.2 | 0.12em | | `headline-lg` | 訴求の見出し（赤で強調） | ゴシック | Noto Sans JP | 900 | 22px | 1.5 | 0.05em | | `headline-md` | カードやポイントの見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.03em | | `headline-sm` | 英字のサブタイトル下に置く日本語小見出し | ゴシック | Noto Sans JP | 700 | 12px | 1.5 | 0.1em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.9 | 0.03em | | `note` | 注釈・出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 大きな細身の番号・POINT表記 | 欧文サンセリフ | Montserrat | 300 | 40px | 1.0 | 0.0em | | `label-button` | ナビやバナーの小さなラベル | 欧文サンセリフ | Montserrat | 700 | 11px | 1.2 | 0.08em | - セクションの見出しは英字の極太大文字にし、下に日本語の小見出しを添える - 訴求文は中央揃えにし、キーワードだけを赤で大きくする - 番号は細身で大きく、赤で入れる - 見出しを＼ ／ の斜線で挟む装飾を使う - 本文は行間を広めにとり、左揃えにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品カードは 2 列のグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - コンテンツは中央寄せの狭めの幅にまとめる - ポイント解説は写真とテキストを左右交互に並べる（SPでは縦積み） - セクション間は斜めの帯でつなぎ、余白を広くとる - 解説カードは縦に積み、カード同士の間隔は16px前後にする - 販売店のロゴは白いボックスに入れて横に並べる ## Elevation & Depth - 白カードにはぼかしの小さい薄い影（0 2px 6px rgba(0,0,0,.08)）を付ける - 商品バナーにも同じ薄い影を付ける - それ以外はフラットにする ## Shapes - **角丸**: 小 0px ／ 中 2px ／ 大 4px。ボタンはピル型。 - **写真の切り抜き**: 写真は四角か、斜めの平行四辺形に切り抜く。商品パッケージは切り抜きで配置する - **セクション境界**: 斜めの直線（片側を約8〜10%下げる）で色面を切り替える - カードは角丸なしの四角にする - フレーバーは正円で色分けする - 小さなナビボタンだけをピル型にする - グラフのバーやバッジには赤い円バッジを使ってよい ## Components - **英字セクション見出し**（`section-title-en`）: 極太の英大文字に日本語の小見出しを添えて、中央に置く - **番号付き解説カード**（`numbered-card`）: 左に大きな赤い細字番号、右に見出しと本文を置いた白カード - **フレーバー別商品カード**（`flavor-card`）: 淡い色の地に、見出し・商品画像・赤い円の含有量バッジを載せる - **POINT番号見出し**（`point-label`）: POINTの英字と大きな番号に下線を引き、グレーの帯の上に重ねる - **フレーバー円**（`flavor-circle`）: 味ごとの色で塗った正円に、白文字で味の名前を入れる - **商品バナー**（`product-banner`）: 横長カードの片側に写真、もう片側に商品画像・斜体の見出し・特長タグを配置。右下に詳細ボタンを付ける - **斜線囲み見出し**（`slash-heading`）: ＼ ／ で挟んだ中央揃えの小見出し - **販売店ロゴボックス**（`store-logo-box`）: 白い四角の中に通販サイトのロゴを入れて横に並べる - **ナビボタン**（`nav-pill`）: 小さな白いピル型ボタン。現在地のボタンは黒地にする ## Do's and Don'ts **Do** - セクションの境界は斜めの色面で切り替える - 強調はサーモン赤の文字に限定する - 商品ごとのパステル色を一貫して使う - データはグラフや数値で示し、出典を注釈で添える - 英字見出しと日本語小見出しを必ず対にする **Don't** - 濃い色をセクションの地として広く塗らない - カードに大きな角丸を付けない - 赤を面いっぱいに塗らない - 明朝体や手書き書体を混ぜない - セクション境界に波線や曲線を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の価値と商品ラインナップを示す）: 淡い背景の左にロゴと商品パッケージ、右に女性の写真。中央に太字のコピーを置き、強調部分を大きくする 2. **ナビゲーション**（ページ内を移動しやすくする）: グレーの帯の上に小さなピル型ボタンを横に並べる 3. **ABOUT・課題データ**（栄養素の大切さと不足していることを伝える）: 英字見出しの下、斜めのグレー帯の上に番号付きの白カードを3枚積む。3枚目には折れ線グラフを入れる 4. **商品の選び方**（悩みに合った商品を選ばせる）: 赤で強調した訴求文と斜線囲み見出しの下に、フレーバー色のカードを2×2で並べる 5. **食生活の提案**（取り入れ方と効果を数値で示す）: ピンクの地の上に白カードを置き、比較の棒グラフ、アイコン付きのまとめ帯を入れる 6. **特長POINT**（3つの特長を訴求する）: POINT番号の見出しとテキストを、商品画像・フレーバー円・斜めに切った写真と左右交互に配置する 7. **商品紹介**（各商品の詳細へ誘導する）: 英字見出しの下に、写真と商品を組み合わせた横長バナーを4本縦に並べる 8. **関連コンテンツ**（レシピなどの回遊を促す）: ピンクの斜め帯の上に、斜線囲み見出しとサムネイルカードを1枚置く 9. **販売店**（購入先へ誘導する）: 英字見出しの下に、白いロゴボックスを3つ横に並べる 10. **フッター**（サイト内リンクと関連ブランドを示す）: 白地にリンク列とSNSアイコンを小さな文字で並べる ## Imagery - 自然光の明るい室内で、白い服の女性が微笑む爽やかな写真を使う - 商品パッケージは影なしの切り抜きで並べる - 果物を添えた、フレーバー色の写真やカードにする - グラフは細い線とパステル色で描く - アイコンは赤い細線で描いたシンプルなものにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SPは1カラムにし、ポイントの写真とテキストは縦に積む - 商品カードはSPでも2列か1列にし、バッジは小さくする - 英字見出しはSPで30px前後にする - 斜めの境界はSPでは角度を浅くする - PCでは中央の幅を約60%に絞り、左右の地は帯の色のまま見せる ## 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-89406000`（元 LP の URL から採番） - **元 LP**: https://www.asahi-gf.co.jp/special/sus/shape/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。