DESIGN.md — クリーム×藍色の猫コラボ アパレルLP（Cream and Indigo Playful Cat Collab Fashion LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい、親しみ・手作り感
• キーワード: クリーム地・藍色の細線・切り抜き猫写真・十角形フレーム・点線区切り・斜め線の囲み見出し
• 地の質感: フラットな単色面に細い線画と水玉を合わせ、紙もののような軽さを出す
• 形: 十角形や多角形の枠、角を斜めに落としたボタン、点線や波線の区切り
• 温度感: 暖かく、ほのぼのとした温度感

Colors

• 地はクリームで統一し、本文ブロックは白カードを重ねる
• 文字・線・ボタンはすべて藍色の一色でまとめる
• 黄色は値段のBUYバッジ、マーカー下線、グラフだけに使う
• 赤は水玉とボタンの小物にほんの少しだけ使う
• 黒は使わず、濃い色は藍色で代用する

Typography

• 欧文見出しは細めの幾何学サンセリフで、文字をわずかに上下にずらして遊ばせる
• 日本語本文は中央揃えにし、行間を2.0と広くとる
• 小見出しは左右に斜線を置いて『＼ 見出し ／』の形にする
• 強調したい語は黄色のマーカー下線で示す
• 文字はすべて藍色。太字の黒は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。PCは中央に本文カラムを置き、左右に装飾とナビを並べる3分割
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの区切りは点線か波線の細い線
• 本文は中央揃えを基本にする
• 商品カードは写真、商品名・価格、コメントのテロップ、猫の吹き出しの順に並べる
• Q&Aは設問の枠、グラフ、まとめの文の順に縦に並べる
• 猫の写真は余白にはみ出させてリズムをつける

Elevation & Depth

• 影はほとんど使わず、線と面の色の違いで階層を分ける
• 白カードはクリーム地との色の差だけで浮かせる
• 切り抜き写真にごく薄い落ち影をつけてもよい

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 猫と商品は背景を消して切り抜く。メインビジュアルは十角形のフレームに入れる
• セクション境界: 藍色の点線、波線、線の端に小さな魚のモチーフを置く
• 主CTAは藍色の角丸ボタン、サブは白地に藍の細枠のピル型
• ナビ用ボタンは角を斜めに落とした八角形
• 設問の枠は細線の角丸ボックスに吹き出しのしっぽをつける
• BUYバッジは黄色の小さなピル型

Components

• 藍色CTAボタン（button-primary）: 藍色の角丸ボタン。白文字で、右端に矢印をつける
• 細枠サブボタン（button-outline）: 白地に藍の細枠をつけたピル型。右に＋か矢印
• BUYバッジ（badge-buy）: 価格の横に置く、黄色い小さなピル
• 斜線囲み見出し（heading-slash）: 見出しの両側に短い斜線を置いた小見出し
• 十角形フレーム（frame-decagon）: 藍の細線の多角形の枠。中を水玉か写真で埋める
• 猫の吹き出し（speech-bubble）: 丸く切り抜いた猫のアイコンの横に、グレーの角丸の吹き出しでコメントを書く
• コメントのテロップ（ticker-comment）: 藍の細枠の帯の中で、短いコメントを横に流す
• Q&Aの設問枠（question-box）: Q番号と設問を入れた細枠の吹き出し。グラフと組み合わせる
• 応募手順の番号（step-number）: 藍の丸に白抜きの数字

Do's and Don'ts

Do - 色は藍・クリーム・白の3色を基本にする - 切り抜いた動物写真を余白にはみ出させて置き、遊び心を出す - セクションの区切りは点線・波線・小さなモチーフで軽くつける - 欧文見出しと日本語の見出しを組み合わせ、2つの言語で見せる - 強調は黄色のマーカーとバッジだけで行う

Don't - 黒や原色の大きな面を使わない - 影の濃いカードや立体的なボタンにしない - 太く重い明朝体を使わない - 写真を四角いまま並べすぎない（一覧グリッドは除く） - 情報を詰め込みすぎて余白をなくさない

Page Structure

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

1. ファーストビュー（記念日の企画とコラボを伝える）: 欧文の大見出し、日付の縦書きタグ、十角形の水玉フレームに猫の顔、下にハッシュタグと小物の写真を並べる
2. 導入文（企画の趣旨を説明する）: 中央揃えで短い段落を3つ。最後に寝そべる猫の切り抜きを置く
3. アンケート結果（スタッフの猫のデータで親しみを出す）: レポート風の枠に、設問の吹き出し、帯グラフ・円グラフ・まとめを置き、もっと見るボタンで締める
4. コラボアイテムの紹介（商品のコンセプトを伝える）: 欧文見出し、十角形の枠に商品写真、中央揃えの説明文、細枠ボタン
5. コラボ相手の紹介（相手のブランドを説明する）: 藍の細線の四角い枠に黄色いロゴとリンクを並べる
6. ノベルティ（購入特典を訴求する）: 波線で上下を区切り、切り抜いた商品にスタンプ型のバッジ、マーカー付きの説明文
7. 商品カードの一覧（各商品と価格を見せる）: 白カードに番号付きの見出し、切り抜き写真、商品名・価格・BUY、テロップ、猫の吹き出し、カラーの切り替え
8. CTA（全商品ページへ誘導する）: 小さな商品画像と藍色のボタン
9. 猫のプロフィール（大量の猫写真で楽しませる）: 多角形の見出し枠の下に、正方形の写真を4列のグリッドで並べ、縦スクロールのバーをつける
10. フォトコンテスト（SNS投稿への参加を促す）: 八角形の白い枠に欧文見出し、日付、賞品、番号付きの応募条件のグレー枠、Instagramボタン
11. ムービー（動画を紹介する）: 角丸の縦長サムネイルに再生アイコン、中央揃えの説明文
12. 締めのビジュアルとフッター（企画名を繰り返して印象に残す）: ファーストビューの縮小版、ロゴ、SNSアイコン、コピーライト

Imagery

• 猫は顔のアップや全身を背景を消して切り抜き、ステッカーのように配置する
• 商品は白背景で真上か斜め上から撮り、影を少しだけ残して切り抜く
• 装飾は藍の細線、赤い水玉、小さな魚や肉球などの線画アイコン
• 猫のプロフィールは正方形の写真をすき間なく並べる
• 黄色のスタンプ型バッジで、プレゼントなどを手書き風に強調する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約360px幅のカラムを固定し、左右をクリーム地の装飾エリアにする
• PCの左側は小さな見出しとInstagramボタンを縦に繰り返し、右側はセクションへのナビのリストにする
• SPでは左右のエリアをなくし、中央のカラムを全幅で表示する
• SPのナビは右下に固定したボタンやメニューにまとめる
• 猫プロフィールのグリッドはSPで3〜4列にする

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