--- version: alpha name: Pastel Series-Block Kids Apparel Lookbook LP description: 生成り地の中央に細い縦長カラムを置き、シリーズごとにベージュ・ピンク・ミント・ブルーグレーのくすみパステル帯で塗り分けた、雑誌風の子ども服コラボ LP。傾けた白フチ写真、丸い手書き風の欧文見出し、円形に沿って回る文字で、絵本のようなやさしい世界観を作っている。 colors: background: '#FFFDF4' primary: '#E5D8B6' secondary: '#ECD6C8' accent-1: '#D5E0D0' accent-2: '#B5C0C4' accent-3: '#C6A77B' marker: '#B1756C' tint-1: '#689374' tint-2: '#7F8F93' text: '#45331F' surface: '#FFFFFF' accent-3-accessible: '#755A33' marker-accessible: '#A7645A' tint-1-accessible: '#587D62' typography: display: fontFamily: Mochiy Pop One fontSize: 36px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.06em headline-md: fontFamily: Mochiy Pop One fontSize: 22px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.05em headline-sm: fontFamily: Fredoka fontSize: 18px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0.04em body-md: fontFamily: Zen Kaku Gothic New fontSize: 12px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.08em accent: fontFamily: Comic Neue fontSize: 12px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em note: fontFamily: Fredoka fontSize: 10px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.03em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 24px section: 0px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' series-heading: backgroundColor: '{colors.primary}' textColor: '{colors.accent-3}' typography: '{typography.display}' height: 120px tilted-photo: backgroundColor: '{colors.surface}' height: 260px age-label: textColor: '{colors.marker}' typography: '{typography.headline-md}' height: 44px circle-text-photo: textColor: '{colors.accent-3}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 200px marquee-caption: textColor: '{colors.marker}' typography: '{typography.accent}' height: 20px limited-badge: backgroundColor: '{colors.marker}' textColor: '{colors.surface}' typography: '{typography.note}' rounded: '{rounded.full}' height: 40px index-grid: backgroundColor: '{colors.background}' textColor: '{colors.tint-1}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 200px goods-letter-collage: backgroundColor: '{colors.primary}' textColor: '{colors.accent-3}' typography: '{typography.display}' height: 420px --- # DESIGN.md — くすみパステル帯の子ども服ルックブック LP（Pastel Series-Block Kids Apparel Lookbook LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: かわいい、やさしい・柔らかい、ナチュラル、親しみ・手作り感 - **キーワード**: くすみパステル・ルックブック・傾いたポラロイド・丸い手書き欧文・絵本の世界観・シリーズ別の色帯 - **地の質感**: マットで粉っぽいパステルの単色面。グラデーションや光沢は使わない - **形**: 四角い色帯に、少し傾けた白フチ写真と円形の切り抜きを重ねる - **温度感**: 暖かめ。生成りとミルクティー系が基調 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFFDF4` | ページ全体の生成り地 | 67% | 画素の実測 | | `primary` | `#E5D8B6` | メインシリーズの帯（ベージュ） | 8% | 画素の実測 | | `secondary` | `#ECD6C8` | 2 番目のシリーズの帯（ピンクベージュ） | 5% | 画素の実測 | | `accent-1` | `#D5E0D0` | 3 番目のシリーズの帯（ミント） | 3% | 画素の実測 | | `accent-2` | `#B5C0C4` | 小物シリーズの帯（ブルーグレー） | 4% | 画素の実測 | | `accent-3` | `#C6A77B` | ベージュ帯の見出し文字（キャラメル） | 0% | 画素の実測 | | `marker` | `#B1756C` | ピンク帯の見出し文字・限定バッジ | 0% | 画素の実測 | | `tint-1` | `#689374` | ミント帯の見出し文字（グリーン） | 0% | 画素の実測 | | `tint-2` | `#7F8F93` | ブルーグレー帯の見出し文字 | 0% | 画素の実測 | | `text` | `#45331F` | 本文・クレジットの文字（こげ茶） | 1% | 画素の主要色に補正 | | `surface` | `#FFFFFF` | 写真の白フチ・紹介文の白いパネル | 2% | 画素の実測 | | `accent-3-accessible` | `#755A33` | AA を満たす補正値（計算） | | 計算 | | `marker-accessible` | `#A7645A` | AA を満たす補正値（計算） | | 計算 | | `tint-1-accessible` | `#587D62` | AA を満たす補正値（計算） | | 計算 | - 地はページ全体を生成り #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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | シリーズ名の大見出し | 装飾・ディスプレイ | Mochiy Pop One | 700 | 36px | 1.1 | 0.06em | | `headline-md` | 大見出しの下の小さな補助語・対象年齢ラベル | 装飾・ディスプレイ | Mochiy Pop One | 700 | 22px | 1.1 | 0.05em | | `headline-sm` | アイテム名（写真の横や上に斜め・縦に置く） | 欧文サンセリフ | Fredoka | 600 | 18px | 1.1 | 0.04em | | `body-md` | 冒頭の和文コンセプト文（中央揃え） | ゴシック | Zen Kaku Gothic New | 400 | 12px | 2.0 | 0.08em | | `accent` | 英文のキャプション・ループ文字・円形に沿う文字 | 欧文サンセリフ | Comic Neue | 700 | 12px | 1.5 | 0.05em | | `note` | クレジット・著作権表記 | 欧文サンセリフ | Fredoka | 500 | 10px | 1.6 | 0.03em | - 見出しは丸く太い手書き風の欧文だけで作り、和文の大見出しは使わない - 大見出しは『シリーズ名＋小さな補助語』の 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 ```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-4bb65832`（元 LP の URL から採番） - **元 LP**: https://gelatopique.com/Page/feature/251031_PUPPYPEANUTS/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（10/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。