DESIGN.md — 黄×コバルト青のポップレトロ雑貨 LP（Pop Retro Yellow and Cobalt Goods Collaboration LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: レトロ、ポップ・元気、親しみ・手作り感、かわいい
• キーワード: 昭和レトロ・ゆるイラスト・黄色ベタ・コバルト青・手書き書体・シーン別紹介
• 地の質感: フラットなベタ塗りに、手描きの線画イラストと生活感のある実写を重ねる
• 形: 角を少し丸めた写真、角ばった四角いボタン、手描き風に二重線でずらした枠
• 温度感: 暖かく明るい。ユーモアがある

Colors

• 地はファーストビューだけ黄色ベタにし、以降は白で統一する
• 文字・線・ボタンはコバルト青 1 色でそろえ、黒文字は使わない
• 主ボタンは青ベタに白文字。タブの非選択側は白地に青枠
• 朱色・ピンクはイラストの差し色だけに使い、UI には使わない
• 色数の多さは写真とイラストに任せ、UI は 2 色に抑える

Typography

• 文字はすべて青。手書き風の書体で温かみを出す
• リード文は中央揃えで短く改行し、行間を 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。