紺×赤×黒の斜め切りスポーツ栄養機器 LP

Bold Tricolor Diagonal Sports Nutrition BtoB LP

濃紺と赤の面を斜めに切り替え、黒の平行四辺形見出しで力強さを出す。スポーツ施設に向けた業務用機器の LP。白地の説明と、色地の特長・商品一覧を交互に置き、最後は金色グラデーションの問い合わせボタンで締める。

BtoB・SaaS・ITサービス力強い・インパクトスポーティ信頼・誠実SPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地の色は紺→白→赤→紺の順に切り替え、境界は斜めにする
見出しはどの地の上でも黒帯に白文字で統一する
赤と紺は面で使う。本文の文字色にはしない
金色グラデーションは主CTAだけに使う
商品カードは上部を黒、画像部を淡い青灰、下部を白の3層にする
強調語は青地または赤地に白のイタリック文字にする

TYPOGRAPHY

書体

displayFVの大コピー。白の極太文字を斜体にし、黒の影を付けるゴシック／ Dela Gothic One 900 ／ 48px ／行間 1.15

あなたの LP を、もっと伝わる形に。Aa 123

headline-lg黒帯の平行四辺形見出しゴシック／ Noto Sans JP 900 ／ 24px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-md色地の上のリード文ゴシック／ Noto Sans JP 500 ／ 22px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm特長カードの見出しと商品名ゴシック／ Noto Sans JP 700 ／ 16px ／行間 1.45

あなたの LP を、もっと伝わる形に。Aa 123

body-md説明本文ゴシック／ Noto Sans JP 400 ／ 15px ／行間 2.0

あなたの LP を、もっと伝わる形に。Aa 123

note※付きの注釈ゴシック／ Noto Sans JP 400 ／ 10px ／行間 1.7

あなたの LP を、もっと伝わる形に。Aa 123

accent背景に透かす英字のアウトライン文字欧文サンセリフ／ Montserrat 900 ／ 110px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonボタンの文字ゴシック／ Noto Sans JP 700 ／ 15px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

大見出しは極太の斜体にし、白文字に黒の影を落とす
セクション見出しは黒帯の上に白の太字で置く。帯の左右端は斜めにカットする
本文は行間2.0でゆったり組む
番号ラベル（特長1など）は黒の小タブに白文字で書く
背景の英字は巨大なアウトライン文字にし、低いコントラストで敷く

PAGE STRUCTURE

セクション構成

ファーストビュー機器の価値を一目で伝える紺と赤を斜めに分割した地に、機器と商品の切り抜きを置く。極太の斜体コピーと白帯のサブコピーを重ね、白線の円でスクロールを促す
製品概要使い方の簡単さを説明する白地に黒帯の見出しを置き、本文を続ける。操作画面の写真にオフセット影の吹き出しを添える
安全基準法令に適合していることで信頼を得る紺ヘッダー付きの枠ボックスに、菱形マーク・本文・注釈を入れる。下に機器写真と菱形マークを線で結ぶ
特長4つの利点を示す赤グラデーションの地に英字の透かしを敷く。機器写真の横に、番号タブ付きの吹き出しカードを4枚並べる
ラインナップ選べる商品を見せる紺の地に、斜めの境界・黒帯の見出し・白のリード文・注釈を置く。その下に商品カードを2列で並べる
関連リンクブランドサイトへ送客する紺地に白の小見出しと、下線付きの矢印リンクを置く
CTA問い合わせを獲得する黒帯の上に金グラデーションの大ボタンを置く
フッター規約と社名を表示する白地に小さな規約リンク、社名ロゴ、コピーライトを並べる

COMPONENTS

部品

平行四辺形見出し帯 heading-band黒の帯に白い太字を載せる。帯の端は斜めにカットする
金色の問い合わせボタン button-primary金のグラデーション面に吹き出しアイコン、2行の黒太字、右向き三角を並べる
詳細ボタン button-detail黒の矩形に白文字と外部リンクアイコンを並べる
特長吹き出しカード feature-card白いカードの左上に黒の番号タブを付ける。線画アイコンと太字2〜3行を入れ、左のしっぽで写真を指す
商品カード product-card黒の商品名ヘッダー、淡い青灰の画像エリア、白地に詳細ボタンの3層で組む
安全基準の注意ボックス notice-box紺のヘッダーに白文字と、赤文字の白帯を入れる。本文は白地で、紺の細い枠線で囲む
オフセット影の吹き出し callout-offset白い吹き出しに黒い影をずらして付ける。キーワードを青地・赤地のイタリックで強調する
下線付きテキストリンク text-link-arrow白の太字に右向き三角を付け、下に白線を引く

守ること

色面の切り替えは必ず斜めにする
見出しは全セクションで黒の平行四辺形帯に統一する
製品写真は切り抜きにして大きく見せる
主CTAは金グラデーションで1種類に絞る
背景に英字のアウトライン文字を薄く敷く

DON'T

避けること

角丸やピル型のボタンを使わない
パステル色や淡い配色を主役にしない
紺・赤・黒・白・金以外の色を増やさない
本文を細い明朝体にしない
柔らかいぼかし影を多用しない

DESIGN.MD

design.md 全文

読みやすい形で表示する

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 独自の章。上から順に、カッコ内が各セクションの役割。

ファーストビュー（機器の価値を一目で伝える）: 紺と赤を斜めに分割した地に、機器と商品の切り抜きを置く。極太の斜体コピーと白帯のサブコピーを重ね、白線の円でスクロールを促す
製品概要（使い方の簡単さを説明する）: 白地に黒帯の見出しを置き、本文を続ける。操作画面の写真にオフセット影の吹き出しを添える
安全基準（法令に適合していることで信頼を得る）: 紺ヘッダー付きの枠ボックスに、菱形マーク・本文・注釈を入れる。下に機器写真と菱形マークを線で結ぶ
特長（4つの利点を示す）: 赤グラデーションの地に英字の透かしを敷く。機器写真の横に、番号タブ付きの吹き出しカードを4枚並べる
ラインナップ（選べる商品を見せる）: 紺の地に、斜めの境界・黒帯の見出し・白のリード文・注釈を置く。その下に商品カードを2列で並べる
関連リンク（ブランドサイトへ送客する）: 紺地に白の小見出しと、下線付きの矢印リンクを置く
CTA（問い合わせを獲得する）: 黒帯の上に金グラデーションの大ボタンを置く
フッター（規約と社名を表示する）: 白地に小さな規約リンク、社名ロゴ、コピーライトを並べる

Imagery

製品と機器は正面から撮り、白背景で切り抜く
人物はモノクロでトレーニング中の姿を使う
手が飲み物のグラスを持つカットで動きを出す
アイコンは黒の単線で円の中に描く
背景装飾は英字の巨大なアウトライン文字にする
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCは内容幅を約900pxに収め、色面は全幅のまま斜めに切り替える
PCのFVは機器を左、コピーを右、商品を右下に配置する
PCの製品概要は本文と画像を2カラムで並べる
PCの特長は機器写真を中央に置き、カードを左右に2枚ずつ配置する
PCの商品カードは3列にする
PCでは特長セクションの直後にもCTAを置く

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 行書くと起動時に読み込まれる。

---
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/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://www.morinaga.co.jp/proteinserver/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

BtoB・SaaS・ITサービス白×紺ブルーの採用AI SaaS LPClean Blue Corporate SaaS Recruitment LP BtoB・SaaS・ITサービス紺×水色の清潔感ある店舗向けSaaS LPClean Slate Navy Wellness SaaS LP BtoB・SaaS・ITサービス黄緑×黄×黒のポップなBtoB広告サービスLPLime Yellow Pop BtoB Marketing LP BtoB・SaaS・ITサービス藍紫×白グレーの静かなAI SaaS LPIndigo Minimal AI SaaS Pre-Registration LP BtoB・SaaS・ITサービス水色×オレンジの店舗向けSaaS特典LPBright Sky Blue SaaS Campaign LP BtoB・SaaS・ITサービス若草グリーン×オレンジCTAのBtoB SaaS LPFresh Green Corporate SaaS LP

配色

書体

セクション構成

部品

守ること

避けること

design.md 全文

DESIGN.md — 紺×赤×黒の斜め切り スポーツ栄養機器 LP（Bold Tricolor Diagonal Sports Nutrition BtoB LP）

Overview

Colors

Typography

Layout

Elevation & Depth

Shapes

Components

Do's and Don'ts

Page Structure

Imagery

Responsive Behavior

Agent Prompt Guide

出典と注意

似た LP の design.md

DESIGN.md — 紺×赤×黒の斜め切りスポーツ栄養機器 LP（Bold Tricolor Diagonal Sports Nutrition BtoB LP）