--- version: alpha name: Pop Retro Yellow and Cobalt Goods Collaboration LP description: 鮮やかな黄色のファーストビューと、白地にコバルトブルーの手書き風文字を組み合わせた、ゆるいイラスト入りのレトロ雑貨コラボ LP。「せいかつ」「おでかけ」「しごと」のシーン別に、写真スライダーと商品カードを繰り返す。 colors: primary: '#0C55A4' background-alt: '#FFF101' background: '#FFFFFF' cta: '#0C55A5' on-cta: '#FFFFFF' text: '#2D5A8B' line: '#254B76' surface: '#FEFEFE' accent-1: '#E8572A' tint-1: '#ACC3DC' secondary: '#BDC2AC' typography: display: fontFamily: Dela Gothic One fontSize: 24px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-lg: fontFamily: Zen Maru Gothic fontSize: 24px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.1em headline-sm: fontFamily: Yomogi fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Klee One fontSize: 13px fontWeight: 600 lineHeight: 2.0 letterSpacing: 0.08em note: fontFamily: Klee One fontSize: 11px fontWeight: 600 lineHeight: 1.8 letterSpacing: 0.05em label-button: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 0px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-store: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 30px view-toggle-tab: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' height: 48px scene-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 140px about-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 340px image-slider: rounded: '{rounded.md}' height: 360px product-row: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 180px link-list-bar: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 64px --- # DESIGN.md — 黄×コバルト青のポップレトロ雑貨 LP（Pop Retro Yellow and Cobalt Goods Collaboration LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 日用品・生活雑貨 ／ **雰囲気**: レトロ、ポップ・元気、親しみ・手作り感、かわいい - **キーワード**: 昭和レトロ・ゆるイラスト・黄色ベタ・コバルト青・手書き書体・シーン別紹介 - **地の質感**: フラットなベタ塗りに、手描きの線画イラストと生活感のある実写を重ねる - **形**: 角を少し丸めた写真、角ばった四角いボタン、手描き風に二重線でずらした枠 - **温度感**: 暖かく明るい。ユーモアがある ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0C55A4` | 見出し・本文・ボタンのコバルト青 | 3% | 画素の実測 | | `background-alt` | `#FFF101` | ファーストビューの黄色い地 | 10% | 画素の実測 | | `background` | `#FFFFFF` | 商品紹介セクションの白い地 | 45% | 画素の実測 | | `cta` | `#0C55A5` | 商品ストアへのボタンの塗り | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#2D5A8B` | 見出しと本文の青文字 | 2% | 画素の実測 | | `line` | `#254B76` | 点線の区切り線と枠線 | 0% | 画素の実測 | | `surface` | `#FEFEFE` | 黄色地の上に置く白い説明カード | 4% | 画素の実測 | | `accent-1` | `#E8572A` | イラストの差し色に使う朱色 | 0% | 推定 | | `tint-1` | `#ACC3DC` | スライダー矢印の淡い青 | 0% | 画素の実測 | | `secondary` | `#BDC2AC` | 写真の主調になるくすみ緑 | 8% | 画素の実測 | - 地はファーストビューだけ黄色ベタにし、以降は白で統一する - 文字・線・ボタンはコバルト青 1 色でそろえ、黒文字は使わない - 主ボタンは青ベタに白文字。タブの非選択側は白地に青枠 - 朱色・ピンクはイラストの差し色だけに使い、UI には使わない - 色数の多さは写真とイラストに任せ、UI は 2 色に抑える ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの青いキャッチ（下線付き） | 装飾・ディスプレイ | Dela Gothic One | 700 | 24px | 1.5 | 0.08em | | `headline-lg` | シーン見出し（波線の下線付き） | 丸ゴシック | Zen Maru Gothic | 900 | 24px | 1.3 | 0.1em | | `headline-sm` | 説明カードの見出し・商品名 | 手書き・筆 | Yomogi | 700 | 16px | 1.5 | 0.05em | | `body-md` | 中央揃えのリード文と商品説明 | 手書き・筆 | Klee One | 600 | 13px | 2.0 | 0.08em | | `note` | 価格とクレジット表記 | 手書き・筆 | Klee One | 600 | 11px | 1.8 | 0.05em | | `label-button` | ストアボタンとタブのラベル | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.2 | 0.08em | - 文字はすべて青。手書き風の書体で温かみを出す - リード文は中央揃えで短く改行し、行間を 2.0 前後と広めに取る - 商品説明は左揃えにして、左にイラストを置く - 見出しの下には波線、キャッチの下には直線の下線を引く - 価格は小さめにして商品名の直下に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品説明はイラストと文章の 2 列 - **本文ブロックの幅**: 画面幅の約 77% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - シーンの代表写真は端まで広げ、その下のスライダー写真は左右に余白を取る - 商品名・価格は左、ストアボタンは右に置き、1 行に並べる - 各シーンの最後に、スライド表示と縦並び表示を切り替えるタブを置く - シーン見出しの上にイラストを置き、左右に点線を伸ばす ## Elevation & Depth - 影は使わずフラットにする - 説明カードは青い二重枠を少しずらして、手描きの立体感を出す ## Shapes - **角丸**: 小 0px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: スライダー写真は縦長で角丸 12px。シーンの代表写真は角丸なしで端まで広げる - **セクション境界**: 黄色から白へは直線で切り替え、境目の青い線にイラストを重ねる。シーン間は点線にイラストを挟む - ボタンは角丸なしの四角 - 枠線は青の 2px 実線 - スライダー矢印は小さい四角に白い矢印 ## Components - **ストアボタン**（`button-store`）: 商品行の右端に置く、青ベタに白文字の小さな四角いボタン - **表示切替タブ**（`view-toggle-tab`）: 左右 2 分割のタブ。選択中は青ベタ、非選択は白地に青の上下線 - **シーン見出し**（`scene-heading`）: 人物イラストの下にひらがなの見出しと波線を置き、左右に点線を伸ばす - **手描き枠の説明カード**（`about-card`）: 黄色地の上の白いカード。青の二重線を少しずらし、右上にイラストを置く - **写真スライダー**（`image-slider`）: 角丸の縦長写真。左右端に小さな四角い矢印を置く - **商品説明ブロック**（`product-row`）: 左にイラストのアイコン、右に説明文。その下に商品名・価格とボタンを並べる - **一覧リンク帯**（`link-list-bar`）: 上下の青い線で挟んだ中央揃えのテキストリンク。左上にイラストを重ねる ## Do's and Don'ts **Do** - UI の色は黄・白・青の 3 色に絞る - 見出しや区切りの位置に、ゆるい線画の人物や動物を置く - シーンごとに代表写真・リード文・スライダー・商品の順に組む - 文字は手書き風の書体で青に統一する **Don't** - 黒文字や灰色の文字を使わない - グラデーションや影を足さない - ボタンをピル型や大きな角丸にしない - 洗練された高級感のある明朝体は使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボの世界観を一目で伝える）: 黄色ベタの地にロゴイラストと商品の集合写真を置き、イラストの線をキャッチへつなげる 2. **コンセプト文**（コラボの楽しさを伝える）: 下線付きの青いキャッチと、中央揃えの複数行リード文 3. **ブランド紹介**（コラボ相手を説明する）: 手描き枠の白いカードに見出し・本文・イラストを入れる 4. **シーン別紹介（生活）**（室内で使うアイテムを見せる）: シーン見出し、端まで広げた写真、リード文、スライダー、商品行、表示切替タブの順 5. **シーン別紹介（外出）**（旅行・外出用のアイテムを見せる）: 生活シーンと同じ構成を繰り返す 6. **シーン別紹介（仕事）**（仕事・勉強用のアイテムを見せる）: 同じ構成を繰り返す 7. **一覧への導線**（全商品ページへ送る）: 上下の線で挟んだリンク帯に、鳥に乗るイラストを添える 8. **お礼・クレジット**（親しみのある締めくくり）: 動物と花のイラストにお礼の文字。その下に中央揃えの制作クレジット ## Imagery - 写真は商品を実際の部屋や窓辺に置き、自然光で撮った生活感のあるもの - 背景はくすんだ緑の壁・木目・茶色の家具で、昭和レトロな雰囲気にする - イラストは太めの青い線画で、肌色・朱色・水色をベタで塗った、ゆるい表情の人物や動物 - シーン見出しには、そのシーンを演じる人物イラストを 1 体ずつ置く - 商品説明の横には商品そのもののイラストを置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はファーストビューを黄色の横長帯にし、キャッチ・写真・説明カードを 3 列に並べる - PC の商品紹介は 2 カラム。左に代表写真を固定し、右に SP と同じ縦の流れを狭い幅で置く - 一覧リンク帯とクレジットは PC では全幅に広げる - PC でも文字サイズと色のルールは SP と同じにする ## 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-e899f202`（元 LP の URL から採番） - **元 LP**: https://www.dot-st.com/nikoand/cp/202507product_zakka - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。