DESIGN.md — 紺×パステルの新聞風コラボコスメ LP（Retro Newspaper Pastel Collab Cosmetics LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: ポップ・元気、かわいい、レトロ、情報量多め・訴求型
• キーワード: 新聞紙面風・紺の極太英字・パステル地色の切替・ドット絵透かし・黄色の商品カード
• 地の質感: 細かな網点・メッシュ状の紙っぽい地紋の上に、ドット絵キャラを淡く透かす
• 形: 角丸なしの四角い枠と二重罫線が基本。セクション境界はジグザグの波線
• 温度感: 暖色寄りのパステルに紺を締め色として使う、明るく懐かしい温度感

Colors

• 文字・枠線・ボタンはすべて紺 1 色にそろえ、黒は使わない
• カテゴリごとに地の色をピンク→ミント→ピーチと切り替え、目次の帯の色と対応させる
• 商品カードはどのセクションでも黄色地＋紺枠に固定する
• 地の上には、地より少し濃い同じ系統の色でドット絵の透かしを敷く
• 白は CTA 文字とフッターだけに使う

Typography

• 英字見出しは大きく、日本語は控えめなサイズにして差をはっきり付ける
• カテゴリ見出しは縦長書体で画面幅いっぱいに配置する
• 日付は数字を大きく、曜日は角括弧で小さく添える
• 本文は中央揃え。商品情報は左揃えで字間を広めにとる
• 価格は大きく、（税込）は小さく付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品は縦一列に並べる
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 商品カードは幅 84% の正方形に近い比率で、写真カードの下に商品情報を置く
• 商品名ブロックの右上に CHECK ボタンを置く
• 各カテゴリの冒頭は、紙面ヘッダー→番号＋見出し→英字サブ→ドット絵アイコン 5 個→ハート区切り線の順に並べる
• カテゴリの最後には透かし柄だけの余白を大きくとる

Elevation & Depth

• 影は使わず、紺の 2px 枠線で面を区切る
• 立体感は網点の地紋と透かし柄で出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 黄色地の四角に紺枠。商品は切り抜きで中央に並べる
• セクション境界: 上辺を細かいジグザグの波線にして、地の色を切り替える
• 商品の CHECK ボタンは角丸なしの四角
• 全商品へ誘導するボタンだけは例外的にピル型にする
• 見出し上には二重罫線を引く

Components

• 紙面ヘッダー（newspaper-masthead）: 左右に二重罫線、中央に小さな英字の紙名。両端に体力ゲージ風のドット絵
• カテゴリ目次ボタン（category-tab）: 地の色付きの帯に紺枠。中央に縦長英字、右端に▼
• 期間見出し帯（date-band）: 紺の帯に白い小見出し、その下に大きな日付
• 商品写真カード（product-card）: 黄色地に紺 2px 枠、切り抜き商品を中央に配置
• CHECK ボタン（button-check）: 紺の四角に白い縦長英字と右矢印
• 全商品ボタン（button-primary）: 紺のピル型に白い太字英字、右端に矢印
• ハート区切り線（heart-divider）: 細い紺の横線の中央にドット調のハート 4 個。塗りの数でページ進行を示す
• かぎ括弧枠（bracket-frame）: 四隅だけの紺の線で囲む中央揃えの導入文

Do's and Don'ts

Do - カテゴリごとに地色を変え、目次の色と一致させる - 地にはドット絵の透かし柄を全面に敷く - 商品ブロックは写真カード・ブランド名・商品名・価格・CHECK の型をくり返す - 罫線・ジグザグ・ハートなど紙面らしい装飾を入れる

Don't - 文字や枠に黒や濃いグレーを使わない - カードに影や角丸を付けない - 商品カードの地色をセクションごとに変えない - 明朝体や細い書体を見出しに使わない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（コラボ企画の世界観を一目で伝える）: 紙面ヘッダーの下に、新聞を重ねたイラスト風キービジュアルを置く
2. 見出しと発売日（新作であることと発売日を示す）: 黄色ハイライトの上に極太英字、ピンク地の四角に大きな日付。キャラを添える
3. 集合写真（ラインナップ全体を見せる）: 黄色背景で商品を集合撮影した写真を全幅に近い幅で載せる
4. 導入文（企画の背景を説明する）: かぎ括弧枠の中に中央揃えの紺文字を 8 行ほど
5. 販売期間（予約期間と店頭発売日を伝える）: 紺帯の見出し＋大きな日付を 2 段組む
6. カテゴリ目次（各カテゴリへ移動させる）: 色違いの帯ボタンを 3 つ縦に並べ、最後に二重罫線
7. カテゴリ1 商品一覧（メイク商品を紹介する）: ピンク地に番号付き巨大見出しと、商品カードのくり返し
8. カテゴリ2 商品一覧（スキンケア商品を紹介する）: ミント地で同じ型をくり返す
9. カテゴリ3 商品一覧（雑貨などを紹介する）: ピーチ地で同じ型をくり返す
10. 全商品 CTA と注意書き（一覧ページへ送り、販売条件を補足する）: 白地に薄紫の巨大な透かし英字、斜線で挟んだ誘導文、ピル型ボタン、小さな注記、キャラを横一列
11. 関連特集（別の新作特集へ回遊させる）: ラベンダー地に題字風見出し、ピンク背景の集合写真、短い文、小さなピル型ボタン
12. 締めの CTA（最後にもう一度一覧へ誘導する）: 水色地にピル型ボタンと、キャラが音符と並ぶ横一列のイラスト

Imagery

• 商品は白背景で切り抜き、黄色地の上に中央揃えで並べる
• 集合写真はビビッドな単色背景で、正面のやや上から撮る
• キャラはレトロなアニメ調。太い線とフラットな彩色で描く
• 地の透かしは低解像度のドット絵（キャラ・ハート・アイテム）を大きく散らす
• 見出しの下にはモノクロのドット絵アイコンを 5 個並べる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 600px 前後の SP 幅の紙面を置き、左右にも地色と透かし柄を広げる
• PC では商品カードを 2〜3 列のグリッドにしてもよい
• カテゴリ見出しは PC でも画面幅に応じて大きく保つ

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 行書くと起動時に読み込まれる。