--- version: alpha name: Pop Yellow Collaboration Hair Styling LP description: マスタード系の黄色いFVと、生成りの地に淡い黄色のジグザグ帯を重ねたセクションでできた、ポップなコラボ商品LP。白地に黒の太いゴシック見出し、黒ベタと黒枠の角ばったボタン、カラフルな商品を並べたグリッドで、遊び心と分かりやすさの両方を出している。 colors: primary: '#D1C435' background: '#FFFFFF' background-alt: '#F8F6E9' accent-1: '#FAEC8F' text: '#000000' cta: '#000001' on-cta: '#F8F9F9' accent-2: '#D23A2A' line: '#333333' surface: '#FFFFFF' accent-3: '#678A8C' typography: display: fontFamily: Dela Gothic One fontSize: 36px fontWeight: 900 lineHeight: 1.2 headline-lg: fontFamily: Montserrat fontSize: 24px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.25em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 2px md: 4px lg: 20px full: 999px spacing: unit: 8px card: 12px section: 70px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' 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}' height: 32px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 32px section-icon-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px zigzag-block: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 800px notice-box: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 50px price-badge: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 24px lineup-scroller: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 160px --- # DESIGN.md — 黄色×生成りジグザグのコラボ整髪料LP（Pop Yellow Collaboration Hair Styling LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: ポップ・元気、シンプル・ミニマル、力強い・インパクト - **キーワード**: コラボ・ジグザグ・黄色・生成り・太ゴシック・カラフル商品 - **地の質感**: フラットでマットな地に、立体的なCG・物撮りを散らす - **形**: 角ばったボタンと稲妻のようなジグザグの境界 - **温度感**: 温かく明るい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D1C435` | FV背景のマスタードイエロー | 6% | 画素の実測 | | `background` | `#FFFFFF` | ページ基本の白地 | 52% | 画素の実測 | | `background-alt` | `#F8F6E9` | 商品紹介ブロックの生成り地 | 18% | 画素の実測 | | `accent-1` | `#FAEC8F` | ジグザグ帯の淡い黄色 | 2% | 画素の主要色に補正 | | `text` | `#000000` | 見出し・本文の黒 | 3% | 画素の実測 | | `cta` | `#000001` | 主ボタンの黒ベタ | 1% | 画素の実測 | | `on-cta` | `#F8F9F9` | 黒ボタン上の白文字 | 0% | 画素の実測 | | `accent-2` | `#D23A2A` | 価格バッジの赤 | 0% | 推定 | | `line` | `#333333` | 区切り線・枠線の黒 | 0% | 推定 | | `surface` | `#FFFFFF` | 左右の余白に見える薄いグレー | 1% | 画素の実測 | | `accent-3` | `#678A8C` | 商品色のティール | 3% | 画素の主要色に補正 | - 白地と生成り地を交互に使い、セクションの切り替えをはっきりさせる - 生成りのブロックは上下を淡い黄色のジグザグ帯で区切る - 黄色の面はFVの背景にだけ使う - ボタンは黒ベタか、白地に黒枠の2種類に絞る - 赤は価格バッジとセクションアイコンに少しだけ使う - 鮮やかな色は商品写真に任せ、UI自体はモノトーンにする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ | ゴシック | Dela Gothic One | 900 | 36px | 1.2 | 0.0em | | `headline-lg` | 英字のセクション見出し | 欧文サンセリフ | Montserrat | 700 | 24px | 1.3 | 0.25em | | `headline-md` | 和文のセクション見出し | ゴシック | Noto Sans JP | 900 | 20px | 1.4 | 0.02em | | `headline-sm` | 小見出し・商品名 | ゴシック | Noto Sans JP | 700 | 12px | 1.5 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 11px | 2.0 | 0.1em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 500 | 9px | 1.8 | 0.05em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.05em | - 和文見出しは極太ゴシックで中央に置く - 英字見出しは字間を広くとった大文字にする - 本文は小さめにして字間と行間を広くとる - 注釈は※から始めて中央にまとめる - 見出しの上には小さな丸いアイコンを付ける - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品グリッドは 2〜3 列 - **本文ブロックの幅**: 画面幅の約 60% - **余白**: セクション間 70px、基本単位 8px、カード内 12px（375px 幅換算） - 本文ブロックは幅を約60%に絞って中央に置く - 生成りのブロックは画面幅の約75%で、左右に余白を残す - ラインナップは横スクロールで並べる - ボタンは本文と同じ幅で中央に置く - セクションの間はたっぷり空ける ## Elevation & Depth - 影は基本的に使わず、フラットにする - 立体感は商品写真とCGに任せる ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品は切り抜き。動画は16:9の角型 - **セクション境界**: 淡い黄色のジグザグ帯（稲妻状） - ボタンは角ばった長方形にする - ピル型は価格バッジだけに使う - 注意書きのボックスは黒地でわずかに角を丸める - ジグザグ帯はブロックの上下に入れる ## Components - **黒ベタボタン**（`button-primary`）: 白文字で、右端に＋や矢印を付ける - **黒枠ボタン**（`button-outline`）: 白地に黒の2px枠。右端に外部リンクか矢印のアイコンを置く - **アイコン付き見出し**（`section-icon-heading`）: 小さな丸いアイコンの下に太字の見出しを中央揃えで置く - **ジグザグ帯ブロック**（`zigzag-block`）: 生成り地の上下を淡い黄色のジグザグで縁取る - **黒地の注意ボックス**（`notice-box`）: 左に丸い！アイコン、右に白い太字の注意文 - **価格バッジ**（`price-badge`）: 赤いピル型に白文字。数字は大きくする - **ラインナップ横スクロール**（`lineup-scroller`）: カラフルな商品を横に並べ、下に品名を添える ## Do's and Don'ts **Do** - FVは黄色一色の背景にして、商品とキャラクターを放射状に散らす - UIは白・黒・生成りに絞る - ジグザグ帯でセクションのリズムを作る - 見出しは中央揃えの太字にする **Don't** - ボタンを角丸やグラデーションにしない - ドロップシャドウを多用しない - 黄色をUI全体に広げない - 本文の幅を広げすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボの世界観を一目で伝える）: 黄色の背景に白い極太のキャッチを置き、商品を浮遊させて、下部に2つのロゴを×で並べる 2. **コンセプト紹介**（コラボの意図を説明する）: 白地に黒い太字の見出しと、細い本文を置く 3. **動画**（プロモーション映像を見せる）: 16:9の埋め込み動画 4. **セット内容**（セットの構成を見せる）: ジグザグ帯の生成りブロック。商品＋特典を縦に並べ、特典は2列グリッドにし、黒い注意ボックスを添える 5. **ラインナップ**（商品の種類を見せる）: 英字見出しの下に横スクロールの商品列。黒ベタと黒枠のボタンを置く 6. **販売店情報**（購入できる場所を案内する）: ジグザグ帯ブロックに店名を中央揃えで並べ、ECサイトへの黒枠ボタンを置く 7. **スペシャル動画**（関連する動画で興味を広げる）: サムネイルと説明文 8. **関連商品**（関連商品を紹介する）: ロゴ画像の下に3列グリッド、赤い価格バッジ、本文、黒枠ボタンを置く 9. **SNSフォロー**（SNSへ誘導する）: 英字見出しの下にアイコンを横並びにする 10. **フッター**（企業情報とリンクを載せる）: 区切り線、ロゴ、SNSアイコン、テキストリンク、コピーライトの順に置く ## Imagery - 商品はカラフルな筒形容器を切り抜き、斜めに浮かせる - FVはCGキャラクターと商品を被写界深度でぼかして散らす - パッケージのモチーフは稲妻のジグザグ - カード類はグリッドに整列させる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央の固定幅カラムにし、左右に余白を出す - PCではFVを横長にして、ロゴとキャッチを左右に分けて配置する - SPは本文幅を約60%に絞る - グリッドは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-fa6867cb`（元 LP の URL から採番） - **元 LP**: https://www.nakano-seiyaku.co.jp/products/tanto/pokemoncard23/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（7/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。