--- version: alpha name: Urban Active Teal Gray Product LP description: 明るいグレー地にチャコールの見出しとくすんだティールの帯を組み合わせた、都会的でスポーティな家庭用品の製品 LP。大きな欧文見出しと黒帯付きの和文見出し、余白の多い写真レイアウトで機能を順番に見せ、最後は黄色の購入ボタンへ誘導する。 colors: background: '#F7F7F7' primary: '#498B99' text: '#4C433C' text-body: '#484748' cta: '#FEF201' on-cta: '#333333' accent-1: '#3AC4E1' on-primary: '#F7FEFE' dark-section: '#828D94' line: '#8A8A8A' accent-2: '#E8463F' surface: '#F5F5F5' tint-1: '#F4F4F5' primary-accessible: '#427D89' accent-1-accessible: '#178096' typography: display: fontFamily: Inter fontSize: 52px fontWeight: 800 lineHeight: 1.0 letterSpacing: -0.01em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.9 letterSpacing: 0.1em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Inter fontSize: 20px fontWeight: 700 lineHeight: 1.2 label-button: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 0px md: 0px lg: 40px 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.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 58px fab-cart: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 116px button-secondary: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 60px heading-bar: backgroundColor: '{colors.text}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 30px section-title: textColor: '{colors.text}' typography: '{typography.display}' height: 110px badge-circle: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 120px data-box: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 140px scene-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' height: 270px lineup-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' height: 320px notice-box: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 130px --- # DESIGN.md — グレー×ティールのスポーツボトル製品 LP（Urban Active Teal Gray Product LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 日用品・生活雑貨 ／ **雰囲気**: クール・先進的、スポーティ、シンプル・ミニマル、清潔・爽やか - **キーワード**: ライトグレー地・太い欧文見出し・黒帯見出し・くすみティール帯・黄色の購入ボタン・線画イラスト - **地の質感**: フラットな単色の面。写真はシネマ調で低い彩度、自然光を使う - **形**: 四角い写真とカードが基本。ボタンはピル型、バッジは正円 - **温度感**: クールで少し落ち着いた温度感。黄色と水色でアクセントを付ける ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F7F7F7` | ページ全体の地 | 50% | 画素の実測 | | `primary` | `#498B99` | ティールの帯セクションとサブボタン | 12% | 画素の実測 | | `text` | `#4C433C` | 見出しと黒帯の色 | 4% | 画素の主要色に補正 | | `text-body` | `#484748` | 本文テキスト | 2% | 画素の実測 | | `cta` | `#FEF201` | 購入ボタンの塗り | 1% | 画素の実測 | | `on-cta` | `#333333` | 購入ボタン上の文字 | 0% | 推定 | | `accent-1` | `#3AC4E1` | 円形バッジとシーン番号ラベル | 1% | 画素の実測 | | `on-primary` | `#F7FEFE` | ティール地・黒帯上の白文字 | 1% | 画素の実測 | | `dark-section` | `#828D94` | フィーチャーの写真背景（グレー） | 6% | 画素の実測 | | `line` | `#8A8A8A` | セクション見出し下とスペック表の罫線 | 0% | 推定 | | `accent-2` | `#E8463F` | 注意書きの強調文字 | 0% | 推定 | | `surface` | `#F5F5F5` | ラインナップカードの白 | 4% | 画素の実測 | | `tint-1` | `#F4F4F5` | 背景の薄い透かし文字 | 1% | 画素の主要色に補正 | | `primary-accessible` | `#427D89` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#178096` | AA を満たす補正値（計算） | | 計算 | - 地は #F7F7F7 のライトグレーで統一し、純白は使わない（純白はカードだけ） - ティールは区切りの全幅帯・データ枠・サブボタンに使い、ページの中で数回リズムよく入れる - 和文見出しはチャコールの帯に白抜き文字で強調する - 黄色は購入 CTA だけに使う - 水色は円形バッジとシーン番号ラベルなど小さな面に限る - 赤は注意書きの強調だけに使う - `button-secondary` は文字 `#F7FEFE` × 背景 `#498B99` のコントラスト比が 3.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#427D89`、4.54:1）を使う。 - `badge-circle` は文字 `#F7FEFE` × 背景 `#3AC4E1` のコントラスト比が 2.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#178096`、4.5:1）を使う。 - `data-box` は文字 `#F7FEFE` × 背景 `#498B99` のコントラスト比が 3.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#427D89`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV と FEATURE・POINT など欧文の大見出し | 欧文サンセリフ | Inter | 800 | 52px | 1.0 | -0.01em | | `headline-lg` | 黒帯付きの和文見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.9 | 0.1em | | `headline-md` | ティール帯の見出しとセクションのサブコピー | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.5 | 0.08em | | `headline-sm` | 縦線付きの小機能名 | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.5 | 0.05em | | `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 2.0 | 0.08em | | `note` | 注釈・スペック表 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `accent` | 番号・容量ラベル・縦書きの英字ラベル | 欧文サンセリフ | Inter | 700 | 20px | 1.2 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.4 | 0.1em | - 欧文の大見出しは極太・詰め気味にし、左揃えで画面幅いっぱいに置く - セクションの欧文見出しの下に和文サブコピーと全幅の細い罫線を置く - 和文の見出しは1行ずつ黒帯で囲み、字間を広く取る - 本文は行間を2.0前後に広げ、字間も少し開ける - 数字・番号・容量は欧文太字で示す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。フィーチャーの写真上では左右に注記を振り分ける - **本文ブロックの幅**: 画面幅の約 87% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 写真は左右どちらかに寄せ、片側の端まで裁ち落として非対称に置く - 写真を少しずつ重ねたコラージュでライフスタイルを見せる - POINT ごとに写真→黒帯見出し→本文→補足の順にする - 小機能は写真の下に縦線付きの見出しと説明を置く - スペック表は2列の罫線表で、セル内は中央揃え ## Elevation & Depth - 影は基本的に使わず、フラットな面と罫線で区切る - カードは白い面とグレー地の差だけで浮かせる ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの長方形。画面の片側まで裁ち落とす - **セクション境界**: 直線で切り替える。ティールの全幅帯と見出し下の全幅罫線を使う - カード・写真・表は角丸なし - ボタンだけピル型にする - バッジは正円にする - 注記は細い引き出し線で写真内の部位とつなぐ ## Components - **購入ピルボタン**（`button-primary`）: 黄色のピル型ボタン。カートアイコンと文字を並べる - **円形の購入バッジ**（`fab-cart`）: FV の右下に重ねる黄色の正円。カートアイコンと2行の文字を入れる - **ティールのピルボタン**（`button-secondary`）: 補足情報や取扱説明書へ誘導するボタン。右端に＋や本のアイコンを置く - **黒帯見出し**（`heading-bar`）: 1行ごとにチャコールの帯を敷いた白抜き文字。2行を少し離して積む - **欧文セクション見出し**（`section-title`）: 極太の英字とその下の和文サブコピー、全幅の細い罫線をセットにする - **機能アイコンバッジ**（`badge-circle`）: 写真の角に重ねる水色の正円。線アイコンと白い短文を入れる - **数値訴求ボックス**（`data-box`）: ティールの四角い枠に、白い大きな数値と小さな注釈を入れる - **シーン線画カード**（`scene-card`）: 白い四角に線画イラストを入れ、左上に水色の番号ラベルを置くスライダー - **ラインナップカード**（`lineup-card`）: 白いカードに容量ラベルと下線、製品の切り抜き写真、カラー切替のバーを並べる - **注意書きボックス**（`notice-box`）: 細い枠線の中で左に写真、右に見出しと赤の強調を入れた説明を置く ## Do's and Don'ts **Do** - 欧文の極太見出しを大きく使い、スポーティな印象を出す - 余白を広く取り、写真を非対称に配置する - ティールの全幅帯で章を区切る - 機能説明は黒帯見出しと短い本文に分ける - 購入導線は黄色に統一する **Don't** - 写真やカードに角丸や強い影を付けない - 黄色を購入以外に使わない - グラデーションや派手な柄の背景を入れない - 彩度の高い色を広い面に塗らない - 本文の行間を詰めない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（スポーティな世界観と製品を一目で伝える）: 暗いシネマ調の人物写真を全幅で敷き、左上に白い極太英字コピーと小さな英文を置く。右下に黄色の円形購入バッジを重ねる 2. **コンセプト**（製品の価値を短く語る）: 黒帯見出しを2行並べ、行間の広い本文を続ける。その下にライフスタイル写真3枚をずらして重ねる 3. **特長一覧**（機能を番号付きで俯瞰させる）: グレーの写真の上に製品を置き、01〜07 の番号と短い機能名を引き出し線で左右に振り分ける。欧文見出しは写真にかかるように重ねる 4. **ポイント1**（使いやすさを詳しく説明する）: 全幅の写真にキャプション帯を付け、黒帯見出しと本文を続ける。ティール帯にシーン線画のスライダーを置く 5. **その他の機能**（細かな便利機能を補足する）: 片側に寄せた写真に縦書きの英字ラベルを添え、縦線付きの見出しと説明を下に置く 6. **ポイント2**（性能を数値で示す）: 写真に水色の円バッジを重ね、黒帯見出しと本文を続ける。数値はティールのボックスで見せる 7. **ポイント3**（お手入れのしやすさを伝える）: 部位の注記を入れた写真、本文、ティールのピルボタン、注意書きボックスの順に並べる 8. **ラインナップ**（サイズと色の選択肢を示し、購入へつなぐ）: ティールの全幅帯に白い英字見出しを置き、白カードを2列に並べる。下に黄色の購入ボタン。直前には大きな透かし英字を置く 9. **シーン写真**（利用シーンへの想像を広げる）: 横スクロールの写真ギャラリーを入れる 10. **スペック**（仕様を正確に伝える）: 容量ごとに下線付きの見出し、カラー別の切り抜き写真、2列の罫線表を並べ、最後に注釈をまとめる 11. **関連リンク・フッター**（購入先や関連情報へ誘導する）: 取扱説明書ボタン、バナー3枚、SNS アイコンを並べ、ティール地のカテゴリーアイコンとリンクリストで締める ## Imagery - 写真は自然光のシネマ調で、彩度を抑えた屋外・室内のスポーツや日常シーンにする - 製品の写真は暗いグレーのグラデーション背景で質感を見せる - 線画イラストは黒い主線に製品だけ淡い色を差したシンプルなもの - 部位の注記は細い白線と小さな文字で入れる - 動きの説明は黄色や白の曲線矢印を写真に重ねる - アイコンは単色の線画にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では FV を横長にし、コピーと黄色の購入ボタンを左に、人物を右に置く - PC ではコンセプトを左テキスト・右写真コラージュの2カラムにする - PC では欧文のセクション見出しの右横に和文サブコピーを並べる - PC ではシーンカード3枚とラインナップ4枚を横一列に並べる - PC ではスペック表を2容量ずつ横に並べる - PC ではティール帯や写真を左右にずらして段組みを交互にする ## 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-4c5ad20f`（元 LP の URL から採番） - **元 LP**: https://www.zojirushi.co.jp/syohin/bottle_tumbler/bottle/sd-ka/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。