--- version: alpha name: Bold Tricolor Diagonal Sports Nutrition BtoB LP description: 濃紺と赤の面を斜めに切り替え、黒の平行四辺形見出しで力強さを出す。スポーツ施設に向けた業務用機器の LP。白地の説明と、色地の特長・商品一覧を交互に置き、最後は金色グラデーションの問い合わせボタンで締める。 colors: primary: '#004098' secondary: '#00347D' accent-1: '#E70012' accent-2: '#B1000D' dark-section: '#010101' background: '#FFFFFF' tint-1: '#CCD9EB' background-alt: '#F0EEE7' on-dark: '#FDFEFD' text-body: '#000103' cta: '#F2D24A' on-cta: '#000103' line: '#003F97' marker: '#E20011' typography: display: fontFamily: Dela Gothic One fontSize: 48px fontWeight: 900 lineHeight: 1.15 letterSpacing: -0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.45 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 110px fontWeight: 900 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.06em rounded: sm: 0px md: 2px lg: 4px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' heading-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 64px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 72px button-detail: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 48px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' height: 96px product-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' height: 340px notice-box: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 580px callout-offset: backgroundColor: '{colors.background}' typography: '{typography.headline-sm}' height: 130px text-link-arrow: textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 56px --- # DESIGN.md — 紺×赤×黒の斜め切り スポーツ栄養機器 LP（Bold Tricolor Diagonal Sports Nutrition BtoB LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 力強い・インパクト、スポーティ、信頼・誠実 - **キーワード**: 斜め切り替え・紺赤黒の三色・平行四辺形の見出し・極太イタリック・白カード・金色CTA - **地の質感**: フラットな単色面に縦方向の軽いグラデーションを足す。背景には英字の巨大アウトライン文字を透かしで置く。 - **形**: 斜めのセクション境界と平行四辺形の帯で作る。カードは角丸なしの矩形。 - **温度感**: 熱量が高く、体育会系で元気な印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#004098` | ブランドの濃紺。FVと商品一覧の地 | 20% | 画素の実測 | | `secondary` | `#00347D` | 下部の深い紺のグラデーション地 | 9% | 画素の実測 | | `accent-1` | `#E70012` | スポーティな赤。FV下部と特長セクションの地 | 7% | 画素の実測 | | `accent-2` | `#B1000D` | 赤グラデーションの暗い側 | 5% | 画素の実測 | | `dark-section` | `#010101` | 平行四辺形見出しの帯とボタンの黒 | 9% | 画素の実測 | | `background` | `#FFFFFF` | 説明セクションの白地 | 29% | 画素の実測 | | `tint-1` | `#CCD9EB` | 商品カード画像エリアの淡い青灰 | 7% | 画素の実測 | | `background-alt` | `#F0EEE7` | 画面写真の背景に敷く淡いグレー | 4% | 画素の主要色に補正 | | `on-dark` | `#FDFEFD` | 色地や黒帯の上の白文字 | 2% | 画素の実測 | | `text-body` | `#000103` | 本文の黒文字 | 3% | 画素の主要色に補正 | | `cta` | `#F2D24A` | 問い合わせボタンの金色グラデーション | 2% | 推定 | | `on-cta` | `#000103` | 金ボタン上の黒文字 | 0% | 画素の主要色に補正 | | `line` | `#003F97` | 注意喚起ボックスの紺の枠線 | 0% | 画素の主要色に補正 | | `marker` | `#E20011` | 注意文を囲む赤い文字 | 0% | 画素の主要色に補正 | - 地の色は紺→白→赤→紺の順に切り替え、境界は斜めにする - 見出しはどの地の上でも黒帯に白文字で統一する - 赤と紺は面で使う。本文の文字色にはしない - 金色グラデーションは主CTAだけに使う - 商品カードは上部を黒、画像部を淡い青灰、下部を白の3層にする - 強調語は青地または赤地に白のイタリック文字にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大コピー。白の極太文字を斜体にし、黒の影を付ける | ゴシック | Dela Gothic One | 900 | 48px | 1.15 | -0.02em | | `headline-lg` | 黒帯の平行四辺形見出し | ゴシック | Noto Sans JP | 900 | 24px | 1.4 | 0.04em | | `headline-md` | 色地の上のリード文 | ゴシック | Noto Sans JP | 500 | 22px | 1.6 | 0.02em | | `headline-sm` | 特長カードの見出しと商品名 | ゴシック | Noto Sans JP | 700 | 16px | 1.45 | 0.02em | | `body-md` | 説明本文 | ゴシック | Noto Sans JP | 400 | 15px | 2.0 | 0.04em | | `note` | ※付きの注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.02em | | `accent` | 背景に透かす英字のアウトライン文字 | 欧文サンセリフ | Montserrat | 900 | 110px | 1.0 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.06em | - 大見出しは極太の斜体にし、白文字に黒の影を落とす - セクション見出しは黒帯の上に白の太字で置く。帯の左右端は斜めにカットする - 本文は行間2.0でゆったり組む - 番号ラベル（特長1など）は黒の小タブに白文字で書く - 背景の英字は巨大なアウトライン文字にし、低いコントラストで敷く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品一覧だけ 2 カラムのグリッドにする - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 見出し帯は画面端から飛び出させ、左寄せまたは中央に置く - 特長セクションは機器の写真の横に吹き出しカードを縦に4つ並べる - 商品カードは2列、間隔は約14pxにする - セクションの境界は斜めに区切り、上下に余白を大きく取る ## Elevation & Depth - 影はほぼ使わず、フラットに仕上げる - 強調吹き出しだけ、黒のオフセット影（ずらした黒い矩形）を付ける - FVの文字には黒のドロップシャドウを付ける ## Shapes - **角丸**: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。 - **写真の切り抜き**: 機器と商品パッケージは切り抜きにして色面の上に置く - **セクション境界**: 斜めの直線で色面を切り替える - カードとボタンは角丸なしの矩形にする - 見出し帯は平行四辺形にする - 吹き出しは三角のしっぽで写真を指す - スクロール誘導は白線の正円にする ## Components - **平行四辺形見出し帯**（`heading-band`）: 黒の帯に白い太字を載せる。帯の端は斜めにカットする - **金色の問い合わせボタン**（`button-primary`）: 金のグラデーション面に吹き出しアイコン、2行の黒太字、右向き三角を並べる - **詳細ボタン**（`button-detail`）: 黒の矩形に白文字と外部リンクアイコンを並べる - **特長吹き出しカード**（`feature-card`）: 白いカードの左上に黒の番号タブを付ける。線画アイコンと太字2〜3行を入れ、左のしっぽで写真を指す - **商品カード**（`product-card`）: 黒の商品名ヘッダー、淡い青灰の画像エリア、白地に詳細ボタンの3層で組む - **安全基準の注意ボックス**（`notice-box`）: 紺のヘッダーに白文字と、赤文字の白帯を入れる。本文は白地で、紺の細い枠線で囲む - **オフセット影の吹き出し**（`callout-offset`）: 白い吹き出しに黒い影をずらして付ける。キーワードを青地・赤地のイタリックで強調する - **下線付きテキストリンク**（`text-link-arrow`）: 白の太字に右向き三角を付け、下に白線を引く ## Do's and Don'ts **Do** - 色面の切り替えは必ず斜めにする - 見出しは全セクションで黒の平行四辺形帯に統一する - 製品写真は切り抜きにして大きく見せる - 主CTAは金グラデーションで1種類に絞る - 背景に英字のアウトライン文字を薄く敷く **Don't** - 角丸やピル型のボタンを使わない - パステル色や淡い配色を主役にしない - 紺・赤・黒・白・金以外の色を増やさない - 本文を細い明朝体にしない - 柔らかいぼかし影を多用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（機器の価値を一目で伝える）: 紺と赤を斜めに分割した地に、機器と商品の切り抜きを置く。極太の斜体コピーと白帯のサブコピーを重ね、白線の円でスクロールを促す 2. **製品概要**（使い方の簡単さを説明する）: 白地に黒帯の見出しを置き、本文を続ける。操作画面の写真にオフセット影の吹き出しを添える 3. **安全基準**（法令に適合していることで信頼を得る）: 紺ヘッダー付きの枠ボックスに、菱形マーク・本文・注釈を入れる。下に機器写真と菱形マークを線で結ぶ 4. **特長**（4つの利点を示す）: 赤グラデーションの地に英字の透かしを敷く。機器写真の横に、番号タブ付きの吹き出しカードを4枚並べる 5. **ラインナップ**（選べる商品を見せる）: 紺の地に、斜めの境界・黒帯の見出し・白のリード文・注釈を置く。その下に商品カードを2列で並べる 6. **関連リンク**（ブランドサイトへ送客する）: 紺地に白の小見出しと、下線付きの矢印リンクを置く 7. **CTA**（問い合わせを獲得する）: 黒帯の上に金グラデーションの大ボタンを置く 8. **フッター**（規約と社名を表示する）: 白地に小さな規約リンク、社名ロゴ、コピーライトを並べる ## Imagery - 製品と機器は正面から撮り、白背景で切り抜く - 人物はモノクロでトレーニング中の姿を使う - 手が飲み物のグラスを持つカットで動きを出す - アイコンは黒の単線で円の中に描く - 背景装飾は英字の巨大なアウトライン文字にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは内容幅を約900pxに収め、色面は全幅のまま斜めに切り替える - PCのFVは機器を左、コピーを右、商品を右下に配置する - PCの製品概要は本文と画像を2カラムで並べる - PCの特長は機器写真を中央に置き、カードを左右に2枚ずつ配置する - PCの商品カードは3列にする - PCでは特長セクションの直後にもCTAを置く ## 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-6dd55791`（元 LP の URL から採番） - **元 LP**: https://www.morinaga.co.jp/proteinserver/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。