--- version: alpha name: Frosty Monochrome Automotive Tire LP description: 淡い霜色グレーの地に、墨黒の帯見出しと黄色の下線・ラベルを効かせた自動車用品 LP。人物の運転シーン写真と大きな欧文コンデンス文字で季節や天候の多様さを描く。性能はチャートと比較写真で示す、クールで信頼感のある構成。 colors: primary: '#212429' on-primary: '#FCFEFF' cta: '#212429' on-cta: '#FCFEFF' background: '#FEFEFE' background-alt: '#D2DBE5' surface: '#F2F2F2' dark-section: '#212429' on-dark: '#FFFFFF' accent-1: '#FDF202' accent-2: '#CA0B34' text: '#181A1D' text-muted: '#8A8A8A' line: '#D0D3D0' text-muted-accessible: '#6B6B6B' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 34px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.08em accent: fontFamily: Bebas Neue fontSize: 90px fontWeight: 400 lineHeight: 1.0 headline-lg: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.06em rounded: sm: 2px md: 6px lg: 12px 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}' band-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 44px giant-number: textColor: '{colors.background}' typography: '{typography.accent}' height: 90px photo-caption-card: textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 190px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 56px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 64px spec-pill: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 30px compare-strip: backgroundColor: '{colors.text-muted}' textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 110px review-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 210px faq-accordion: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 90px anchor-nav: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 70px --- # DESIGN.md — 霜色グレー×墨黒×黄の自動車タイヤ LP（Frosty Monochrome Automotive Tire LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 自動車・バイク ／ **雰囲気**: クール・先進的、信頼・誠実、シンプル・ミニマル、清潔・爽やか - **キーワード**: 霜色グレー・墨黒の帯見出し・黄色アクセント・欧文コンデンス・運転シーン写真・比較データ - **地の質感**: 白〜青みグレーの地に、うっすら紙のようなノイズと大きなぼかし円を重ねた冬の空気感 - **形**: 角丸ほぼなしの矩形。黒い帯ラベル、ピル型の小バッジ、薄影の白カード - **温度感**: やや寒色寄り。人物写真の暖かさで冷たさを和らげる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#212429` | 帯見出し・主ボタンの墨黒 | 9% | 画素の実測 | | `on-primary` | `#FCFEFF` | 黒帯上の白文字 | 2% | 画素の実測 | | `cta` | `#212429` | 主CTAボタン | 1% | 画素の実測 | | `on-cta` | `#FCFEFF` | CTA上の文字 | 0% | 画素の実測 | | `background` | `#FEFEFE` | 基本の白地 | 32% | 画素の実測 | | `background-alt` | `#D2DBE5` | 霜色グレーのセクション地 | 20% | 画素の実測 | | `surface` | `#F2F2F2` | 淡グレーの帯地 | 6% | 画素の実測 | | `dark-section` | `#212429` | 動画ギャラリー等の暗いセクション | 8% | 画素の実測 | | `on-dark` | `#FFFFFF` | 暗地上の白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#FDF202` | 黄色の下線・ラベル・再生ボタン | 2% | 画素の実測 | | `accent-2` | `#CA0B34` | チャートや強調文の赤 | 0% | 画素の実測 | | `text` | `#181A1D` | 見出し・本文の濃グレー | 3% | 画素の実測 | | `text-muted` | `#8A8A8A` | データ表示の中間グレー | 1% | 推定 | | `line` | `#D0D3D0` | ナビ下線・枠線 | 0% | 画素の主要色に補正 | | `text-muted-accessible` | `#6B6B6B` | AA を満たす補正値（計算） | | 計算 | - 地は白と霜色グレーを交互に使い、セクションを区切る - 見出しラベル・主ボタンは墨黒の面に白文字 - 黄色は写真上の見出し下線、自社品ラベル、再生ボタンなど自社の強調だけに使う - 赤は性能チャートの自社線と口コミ中の強調文に限定 - 暗いセクションは動画やマーク紹介など1〜2箇所に絞る - グレー地には大きなぼかし円と白い巨大欧文を淡く重ねる - `compare-strip` は文字 `#FDF202` × 背景 `#8A8A8A` のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#6B6B6B`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのメインコピー | ゴシック | Zen Kaku Gothic New | 700 | 34px | 1.6 | 0.08em | | `accent` | 背景の巨大欧文・ポイント番号・ブランドロゴ風 | 欧文サンセリフ | Bebas Neue | 400 | 90px | 1.0 | 0.0em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 30px | 1.4 | 0.04em | | `headline-md` | 黒帯見出し・性能小見出し | ゴシック | Noto Sans JP | 700 | 19px | 1.6 | 0.04em | | `headline-sm` | 写真上キャプション・カード見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.04em | | `body-md` | 本文・口コミ | ゴシック | Noto Sans JP | 500 | 15px | 1.8 | 0.04em | | `note` | 注釈・凡例 | ゴシック | Noto Sans JP | 400 | 12px | 1.7 | 0.02em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.06em | - 和文はすべて太めのゴシック。明朝は体験記事の導線カードだけに使う - 欧文は縦長のコンデンス書体で、背景に画面からはみ出すほど大きく敷く - 見出しは左揃え。FVコピーだけ字間を広く取って堂々と見せる - 比較値の数字はコンデンス太字で大きく、自社の数字だけ黄色 - 本文は行間1.8で読みやすく取る - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ナビとリンクのみ 2 カラム - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - 左右余白16pxで、写真やカードは本文幅いっぱいに置く - ポイントごとに巨大番号→黒帯見出し→説明文→写真カード複数の順で並べる - 性能比較は横長の写真帯を縦に積み、右端にグレーの数値ボックスを置く - 口コミは横スクロールのカルーセルで見せる - セクション上下に64〜80pxの余白 ## Elevation & Depth - 白カードには薄い影（0 2px 6px rgba(0,0,0,.12)） - FAQとアコーディオンは白地に薄影で、グレー地から浮かせる - ボタンにもごく弱い影を付ける - 写真には影を付けず、フラットに置く ## Shapes - **角丸**: 小 2px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸のない横長の矩形。写真の下部を暗くするグラデーションを敷き、キャプションを重ねる - **セクション境界**: 直線で切り替える。グレー地には大きなぼかし円を半分見せる - 主ボタンは角丸2〜4pxの矩形 - 番号付き性能バッジだけピル型の黒地 - マーク紹介カードは角丸10px程度 - アイコンは円形の淡グレー地に収める ## Components - **黒帯見出し**（`band-heading`）: 墨黒の矩形帯に白い太字のゴシック。巨大欧文番号の下に少し重ねて配置する - **巨大欧文ポイント番号**（`giant-number`）: 白の半透明で描く、画面幅いっぱいのコンデンス欧文と番号 - **写真キャプションカード**（`photo-caption-card`）: 横長の写真の左下に白太字のキャプションを置き、その下に黄色の下線を引く - **主CTAボタン**（`button-primary`）: 全幅の墨黒の矩形に白太字。上に斜線で挟んだ小さな前置き文を添える - **外部リンクボタン**（`button-outline`）: 白地に黒の1px枠、中央に太字、右端に別窓アイコン - **性能番号バッジ**（`spec-pill`）: 黒のピル型に白文字とコンデンス数字 - **比較写真帯**（`compare-strip`）: 横長の写真の左上に製品名ラベル（自社は黄、他は黒）、右側にグレーの指数ボックスを置く - **口コミカード**（`review-card`）: 白カードに黄マーカー付きの属性ラベル、引用符で始まる本文、続きを開く矢印。横スクロールで見せる - **FAQアコーディオン**（`faq-accordion`）: 白カードに太字の質問、右端にシェブロン。薄い影を付ける - **目次ナビ**（`anchor-nav`）: 2列のテキストリンク。右に黒丸の下矢印、下にグレー線 ## Do's and Don'ts **Do** - 黄色は自社品の強調だけに絞る - グレー地には巨大な欧文とぼかし円を淡く重ねて空気感を出す - 写真はさまざまな天候や季節の運転シーンにし、人物の笑顔を入れる - 性能はチャートや数値の写真帯で可視化する - 見出しは黒帯ラベルで統一する **Don't** - 大きな角丸やパステル色を使わない - 黄色を背景の広い面に使わない - 装飾的な手書き書体を混ぜない - 写真にドロップシャドウや枠飾りを付けない - 暗いセクションを多用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（多様な人の新しい日常を印象付ける）: 上下に運転シーンのコラージュ写真、中央の白地に大きな和文コピーとロゴ 2. **目次ナビ**（主要セクションへ誘導）: 2×2のテキストリンクに黒丸矢印と下線 3. **製品コンセプト**（製品カテゴリと価値の宣言）: 霜色の地に巨大欧文を流し、黒帯ラベルを2段重ね、下に一文、続いて全幅のキービジュアル 4. **特長ポイント**（利点を番号付きで説明）: 巨大番号、黒帯見出し、説明文、写真キャプションカード2枚を繰り返す 5. **お客様の声**（実利用者の評価で信頼を得る）: 白地に口コミカードのカルーセル、テキストリンク、体験記事への導線カード 6. **CTA**（サイズ・価格の確認へ誘導）: 淡グレーの帯に前置き文と全幅の黒ボタン 7. **性能**（データで優位性を証明）: 番号バッジと見出し、白地のレーダーチャート、比較写真帯、試験条件のアコーディオン 8. **規格マーク**（認証による安心感）: 写真の下の暗地に、円アイコン付きの白カードを2枚 9. **技術詳細CTA**（技術ページへ誘導）: 白地に小見出しと黒ボタン 10. **よくある質問**（購入前の疑問を解消）: グレー地に白カードのアコーディオンを縦に並べる 11. **動画ギャラリー**（CMで世界観を補強）: 暗地に黄枠のサムネイルと黄色の再生ボタン、カルーセル 12. **フッターリンク**（関連情報への導線）: 巨大な黒の欧文ロゴの帯、枠線ボタン3つ、メーカーロゴ、著作権表示 ## Imagery - 車内から撮った自然光の運転シーン。笑顔の多様な人物 - 雪道・雨の高速道路・ガレージなど天候と季節の対比を見せる - 全体に彩度を少し落とし、青みのある寒色系に調整 - 写真下部に黒のグラデーションを敷き、文字を読みやすくする - テスト走行は横長のパノラマで撮り、赤い矢印で距離を示す - アイコンは線画のモノクロピクトを円形の地に置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCのFVは中央の白い枠を写真コラージュが囲む構成 - PCのナビは4列横並び、上部にグローバルナビを固定 - 写真カード・口コミ・動画はPCで2列グリッド - PCは本文幅約78%で中央寄せ。CTAボタンは幅を狭めて中央に置く - レーダーチャートと凡例はPCで横並び - フッターリンクのボタンはPCで3列横並び ## 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-bb608561`（元 LP の URL から採番） - **元 LP**: https://tyre.dunlop.co.jp/special/synchroweather - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。