--- version: alpha name: Warm Beige Navy Functional Food LP description: 生成り・ピーチ系の淡い地に、紺色の見出しと帯ボタンで締めた機能性食品の LP。手描きの草花模様とキャラクターイラストで親しみを出す。後半は紺地に白カードを置き、作用の仕組みを図解で説明する。 colors: primary: '#0C3178' background: '#FCF5ED' background-alt: '#F5DDC4' surface: '#FEFBF8' dark-section: '#234270' on-primary: '#F3FEFF' cta: '#0C327A' on-cta: '#E6F2FD' accent-1: '#EB6E80' accent-2: '#E0302A' marker: '#FEEC73' accent-3: '#C8D85A' text-body: '#253C68' background-alt-footer: '#F2E9E2' accent-1-accessible: '#E1243F' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.08em accent: fontFamily: Montserrat fontSize: 32px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.06em rounded: sm: 2px md: 8px lg: 999px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 44px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.label-button}' height: 44px heading-underline: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 48px badge-circle: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' rounded: '{rounded.full}' height: 150px number-tag: backgroundColor: '{colors.primary}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.sm}' height: 60px label-balloon: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' rounded: '{rounded.full}' height: 32px card-feature: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 320px faq-row: textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 40px arrow-down: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.note}' height: 40px --- # DESIGN.md — 生成り×紺の手描き風機能性食品 LP（Warm Beige Navy Functional Food LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: やさしい・柔らかい、親しみ・手作り感、信頼・誠実、ナチュラル - **キーワード**: 生成り地・紺の見出し・手描き草花模様・キャラクター・図解・下線見出し - **地の質感**: 淡いピーチ・クリーム地に、点描の実と曲線の茎を散らした手描き風の壁紙模様 - **形**: 角丸の少ない四角い帯ボタン。円形バッジと円形写真。ピル型のラベル - **温度感**: 暖色の地に寒色の紺を合わせた、温かくて誠実な印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0C3178` | 見出し文字・帯ボタン・円バッジの紺 | 14% | 画素の実測 | | `background` | `#FCF5ED` | メインの生成り地 | 16% | 画素の実測 | | `background-alt` | `#F5DDC4` | 模様入りのピーチ地セクション | 11% | 画素の実測 | | `surface` | `#FEFBF8` | 白いカード面 | 23% | 画素の実測 | | `dark-section` | `#234270` | 仕組み解説の紺地セクション | 12% | 画素の実測 | | `on-primary` | `#F3FEFF` | 紺地上の白文字 | 1% | 画素の実測 | | `cta` | `#0C327A` | 購入導線の紺ボタン | 1% | 画素の実測 | | `on-cta` | `#E6F2FD` | ボタン上の白文字 | 0% | 画素の実測 | | `accent-1` | `#EB6E80` | 図解のラベル帯・強調文字のローズ | 2% | 画素の実測 | | `accent-2` | `#E0302A` | 強調語の赤文字 | 0% | 推定 | | `marker` | `#FEEC73` | 強調語の下に引く黄色マーカー | 0% | 画素の実測 | | `accent-3` | `#C8D85A` | 装飾の黄緑ドット・善玉菌 | 2% | 推定 | | `text-body` | `#253C68` | 本文の紺文字 | 1% | 画素の主要色に補正 | | `background-alt-footer` | `#F2E9E2` | フッターのベージュ | 2% | 画素の実測 | | `accent-1-accessible` | `#E1243F` | AA を満たす補正値（計算） | | 計算 | - 地は生成りとピーチの模様地を交互に置き、セクションを区切る - 見出し・ボタン・番号は紺 1 色にまとめる - 強調語は赤文字＋黄色マーカー、または紺地白抜きの帯で示す - 後半の解説は紺地の上に白カードを重ね、図解はローズ・黄緑・青で色分けする - CTA はオレンジ系を使わず紺で統一し、誠実さを保つ - `label-balloon` は文字 `#F3FEFF` × 背景 `#EB6E80` のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#E1243F`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV 直下の商品見出し | ゴシック | Zen Kaku Gothic New | 700 | 26px | 1.4 | 0.08em | | `headline-lg` | 下線付きのセクション見出し | ゴシック | Zen Kaku Gothic New | 500 | 24px | 1.4 | 0.1em | | `headline-md` | 機能カード内の見出し・強調文 | ゴシック | Zen Kaku Gothic New | 500 | 20px | 1.6 | 0.08em | | `accent` | 01・02 の大きい番号や英字見出し | 欧文サンセリフ | Montserrat | 500 | 32px | 1.1 | 0.05em | | `body-md` | 説明本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.9 | 0.04em | | `note` | 注釈・届出表示 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `label-button` | 帯ボタンの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.2 | 0.06em | - 見出しは字間を広めにとり、下に細い紺線を引く - 数字は大きく、単位と注釈番号は小さく添える - 本文も紺系の色にし、真っ黒は使わない - 強調語だけ赤やローズに変え、文の残りは紺のままにする - 注釈は小さく、本文ブロックのすぐ下にまとめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品並びや店舗ボタンだけ 2〜3 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 見出し→図・写真→本文→帯ボタンの順に中央揃えで積む - 機能説明は白カードを縦に並べ、上辺に紺線を引く - 仕組みセクションは 1 枚の白い大カードの中に図解を縦に続け、間に下向き矢印を挟む - FAQ は細線で区切ったリストにし、右端に＋を置く - セクション同士は背景色の切り替えで区切る ## Elevation & Depth - 影はほぼ使わず、面の色の差で階層を作る - 白カードは影なしで、上辺の紺ラインで締める - 図解の吹き出し枠にだけ薄い影を付けてもよい ## Shapes - **角丸**: 小 2px ／ 中 8px ／ 大 999px。ボタンは角丸の長方形。 - **写真の切り抜き**: シーン写真は円形に切り抜く。FV と区切りの写真は全幅の矩形 - **セクション境界**: 直線で背景色を切り替える - 帯ボタンは角丸なし（2px 以内）の横長矩形 - 機能バッジは紺の円形で白抜き文字 - ラベルはピル型、下に三角のしっぽを付けて吹き出しにする - 番号の上の小ラベルは角丸の紺タグ ## Components - **紺の帯ボタン**（`button-primary`）: 横長の紺の矩形に白文字。右端に＋や矢印を付け、詳細を開く／遷移する - **白抜き販売先ボタン**（`button-outline`）: 白地に細い紺枠の矩形。販売店のロゴを中央に置き、3 つ並べる - **下線付き見出し**（`heading-underline`）: 中央揃えの紺文字の下に、文字幅いっぱいの細い紺線を引く - **円形機能バッジ**（`badge-circle`）: 紺の大きな円に白文字。強調語は白地の帯に赤文字で抜く - **番号見出し**（`number-tag`）: 小さい紺タグの下に大きな欧文の番号 01・02 を置く - **ピル型吹き出しラベル**（`label-balloon`）: ローズや赤のピル型に白文字。下に三角を付け、図解の問いや区分名に使う - **機能説明カード**（`card-feature`）: 白いカードの上辺に紺の太線を引く。番号・見出し・イラスト・箇条書き・帯ボタンを順に並べる - **FAQ 行**（`faq-row`）: 紺の Q を頭に付けた質問を一行で表示。紺の細線で区切り、右端に＋を置く - **結果矢印**（`arrow-down`）: 紺の太い下向き矢印。中に小さな白文字を入れ、図解の因果をつなぐ ## Do's and Don'ts **Do** - 地は淡い暖色、要素は紺の 2 系統でまとめる - 淡い地には手描きの草花ドットを薄く散らす - キャラクターのイラストを見出しの横や端に添えて、親しみを出す - 機能や数値の表現には注釈番号を付け、注釈をすぐ下に置く - 仕組みはかわいいイラスト図解と矢印でステップごとに見せる **Don't** - 黒やビビッドなオレンジを CTA に使わない - ボタンを丸く膨らんだピル型や強い影付きにしない - 装飾模様を濃くして文字が読みにくくならないようにする - 写真を角丸の小カードで細かく並べない（円形か全幅にする） - 強調色を一文中で 3 色以上混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と使い方を一目で伝える）: 全幅の食卓写真。左上に紺の円形ロゴ風バッジ、人物とマスコットのイラストを重ねる 2. **商品紹介**（商品名と主要な数値を示す）: 生成り地に下線付きの見出し。紺と白の円形数値バッジとボトル 2 種を並べ、下に注釈 3. **機能の概要**（2 つの機能を提示する）: 模様地に紺の円を 2 つ並べ、ピル型ラベルとキャラクターを添える 4. **機能の詳細**（機能ごとに根拠を示す）: 上辺に紺線のある白カードを縦に並べる。番号、マーカー付きの見出し、イラスト、帯ボタン 5. **特長**（低糖質・植物由来・味を訴求する）: 下線見出し＋円形写真やロゴバッジ＋短い本文を 3 回繰り返す 6. **動画**（CM で印象を補強する）: 英字見出しの下に横長の動画埋め込み 7. **イメージ写真**（使用シーンを見せる）: 全幅の暖色系の食卓写真 8. **購入導線**（購入先へ誘導する）: 紺の店舗検索ボタンと枠線の通販ボタンを 3 つ横に並べる 9. **関連商品**（ブランドの別商品を紹介する）: 模様地に赤・茶のピル型ラベルと商品写真、紺の帯ボタン 10. **よくある質問**（不安を解消する）: 細線区切りの Q リストと、もっと見るボタン 11. **作用メカニズム**（仕組みを図解で理解させる）: 紺地に白い大カードを置く。ローズの吹き出しラベル、腸や菌のイラスト、下向き矢印でつなぐ 12. **成分紹介**（原料の背景を伝える）: 紺地の白カードに、左に写真・右に本文を置く 13. **キャラクター紹介**（ブランドへの愛着を作る）: 白カードに紺の名前ラベルと説明文を並べ、右に全身イラスト 14. **フッター**（規約リンクと SNS）: ベージュ地に縦線区切りの小さなリンクとロゴ ## Imagery - 写真は自然光の木の食卓。ヨーグルトや飲み物のある、暖かい朝のシーン - 人物とマスコット動物は細い線のフラットなイラスト。小花柄の服など、柔らかい色使いにする - 背景には点描の実・曲線の茎・黄緑の丸を、淡い色で散らした手描き模様を敷く - 図解はパステル調のかわいいイラストにする。腸はピンク、善玉菌は黄緑、悪玉菌は紺で、キャラクターに表情を付ける - 原料写真は円形に切り抜くか、四角のまま本文の横に置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 900px 前後のコンテンツに、左右へ模様地が広がる - SP では機能の円バッジ 2 つを縦積みにするか、小さくして横に並べる - 購入ボタン 3 つは、SP では縦積みか 2 列にする - 成分紹介の写真＋本文は、SP で写真を上・本文を下に積む - 図解はカード幅いっぱいに縮小し、文字は 12px 以上を保つ ## 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-c794a826`（元 LP の URL から採番） - **元 LP**: https://www.lakanto.jp/fbio/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。