DESIGN.md — くすみパステル帯の子ども服ルックブック LP（Pastel Series-Block Kids Apparel Lookbook LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: かわいい、やさしい・柔らかい、ナチュラル、親しみ・手作り感
• キーワード: くすみパステル・ルックブック・傾いたポラロイド・丸い手書き欧文・絵本の世界観・シリーズ別の色帯
• 地の質感: マットで粉っぽいパステルの単色面。グラデーションや光沢は使わない
• 形: 四角い色帯に、少し傾けた白フチ写真と円形の切り抜きを重ねる
• 温度感: 暖かめ。生成りとミルクティー系が基調

Colors

• 地はページ全体を生成り #FFFDF4 にし、中央カラムだけを色帯にする
• シリーズごとに帯の色を 1 色に決める（ベージュ→ピンク→ミント→ベージュ→ブルーグレー）
• 見出しの文字色は帯の色を濃くした同系色にする（ベージュ帯にはキャラメル、ピンク帯にはローズ）
• 黒は使わない。本文はこげ茶にする
• 限定などのバッジは、帯と同系色の濃い色で塗った小さな円にする
• 白は写真のフチと紹介文のパネルだけに使う
• series-heading は文字 #C6A77B × 背景 #E5D8B6 のコントラスト比が 1.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#755A33、4.54:1）を使う。
• limited-badge は文字 #FFFFFF × 背景 #B1756C のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#A7645A、4.55:1）を使う。
• index-grid は文字 #689374 × 背景 #FFFDF4 のコントラスト比が 3.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#587D62、4.55:1）を使う。
• goods-letter-collage は文字 #C6A77B × 背景 #E5D8B6 のコントラスト比が 1.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#755A33、4.54:1）を使う。

Typography

• 見出しは丸く太い手書き風の欧文だけで作り、和文の大見出しは使わない
• 大見出しは『シリーズ名＋小さな補助語』の 2 段で中央揃えにする
• 対象年齢ラベルは前置詞を小さく、名詞を大きくして写真に重ねる
• アイテム名は傾ける・縦にする・円に沿わせるなどして動きを出す
• 和文の本文は冒頭の紹介だけに使い、行間を広く中央揃えにする
• 文字色は帯の同系色だけにし、白抜き文字は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。全幅を色帯にし、写真を左右交互にずらして置く
• 本文ブロックの幅: 画面幅の約 100%
• 余白: セクション間 0px、基本単位 8px、カード内 24px（375px 幅換算）
• シリーズの帯は余白を空けずに縦に連結し、色の切り替えで区切る
• 写真は帯の幅の 70〜85% にして、左寄せ・右寄せを交互にする
• 写真どうしを少し重ねて、雑誌のコラージュのように並べる
• 全幅の写真と傾けた写真を交互に入れてリズムを作る
• 冒頭の紹介文は白いパネルの中央に置き、上下に 64px 以上空ける

Elevation & Depth

• 影はほぼ使わず、白フチで写真を浮かせる
• 傾けた写真にだけ、ごく薄い影（0 2px 6px 透明度 10%）をつけてよい

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 白フチ（約 4px）のポラロイド風で −6〜6° 傾ける。ほかに角丸 4px の四角と正円の切り抜きを使う
• セクション境界: 色を直線で切り替える（波形などの装飾線は使わない）
• シリーズの帯は角丸なしの長方形にする
• ポイントを見せる写真は正円で切り抜き、円周に沿って英字を回す
• 限定バッジは直径 40px ほどの正円にする
• 写真の傾きは毎回向きを変え、同じ角度を続けない

Components

• シリーズ見出し（series-heading）: 丸い太字のシリーズ名と、その下の小さな補助語を中央に 2 段で置く。文字色は帯の同系色
• 傾いたポラロイド写真（tilted-photo）: 白フチの写真を少し回転させ、左右にずらして重ねる
• 対象年齢ラベル（age-label）: 小さな前置詞と大きな名詞を写真の角に重ねる
• 円形写真＋回る文字（circle-text-photo）: 正円で切り抜いた写真のまわりに、アイテム名を円周に沿って回して配置する
• ループ英字キャプション（marquee-caption）: 写真の上下に横 1 行の英字を置き、画面の端で切れて流れているように見せる
• 限定バッジ（limited-badge）: 写真の右下に重ねる小さな円形バッジ。中は白い 2 行の英字
• シリーズ目次（index-grid）: 各シリーズの小さな写真とシリーズ名を 2〜3 列に並べたアンカー目次。シリーズ名は帯の色で表示する
• 巨大文字コラージュ（goods-letter-collage）: 淡い大きな文字を背景に散らし、その上に切り抜いた小物写真とアイテム名を重ねる

Do's and Don'ts

Do - シリーズごとに帯の色を変え、見出しの色もその帯に合わせる - 写真は暖色の室内光で撮った柔らかいトーンに揃える - 傾き・左右へのずらし・重なりで手作り感のある動きを出す - 英字の見出しは丸く太い書体で、少し大きめに組む - 写真と写真の間に英文のキャプションを散らしてリズムを作る

Don't - 鮮やかな原色や黒い背景を使わない - 角張ったボタンや強い CTA 色を目立たせない - 写真をきっちり等間隔のグリッドで並べない - 明朝体や細いゴシックの大見出しを使わない - グラデーションや強い影をつけない

Page Structure

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

1. ファーストビュー（コラボの世界観とロゴを一目で伝える）: 屋外のメインビジュアル写真に白いロゴを重ねる。PC ではキャラクターのイラストと目次を横に並べる
2. 目次（シリーズへのナビゲーション）: 小さな写真とシリーズ名を色分けして 2〜3 列に並べる
3. コンセプト文（コラボの背景と想いを伝える）: 白いパネルに、和文を小さく中央揃え・広い行間で組む
4. メインシリーズ（主力アイテムを年齢別に見せる）: ベージュの帯の上に、傾けた写真・対象年齢ラベル・英文キャプションを交互に置く
5. 小物コラージュ（靴や帽子などの小物を紹介する）: 淡い大きな文字の上に切り抜き写真と斜めの品名を散らす
6. 2 番目のシリーズ（柄物のアイテムを見せる）: ピンクの帯。ループ英字と限定バッジ付きの写真を置く
7. 3 番目のシリーズ（やわらかい素材のアイテムを見せる）: ミントの帯に、英文の短い紹介と縦書きの品名を添える
8. 4 番目のシリーズ（日常着のアイテムを見せる）: ベージュの帯。最後に円形写真と回る文字でディテールを見せる
9. 雑貨シリーズ（ぬいぐるみやバッグなどの雑貨を見せる）: ブルーグレーの帯に、傾けた写真と円形のテキスト装飾を置く
10. 一覧ボタン・クレジット（商品一覧への誘導と制作クレジット）: 白い地にキャラクター付きの水色ボタンを置き、その下にスタッフ名を中央揃えで並べる

Imagery

• 夕暮れの草原や木の小屋など、絵本のような場所で子どもを撮る
• 室内は藁・木箱・楽器など素朴な小道具を置き、暖色の光で撮る
• 全体の彩度を少し落とした、フィルムのような柔らかい色調にする
• 小物は白背景で切り抜き、帯の上に浮かせて置く
• キャラクターは線画とパステルの風船のようなゆるいイラストで描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも中央に幅 約 270px（SP の幅相当）のカラムを置き、左右は生成りの余白にする
• PC のファーストビューでは、メイン写真・イラスト・目次を横 3 列に並べる
• SP ではカラムを全幅にし、写真は幅の 75〜85% で左右交互に置く
• 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 行書くと起動時に読み込まれる。