--- version: alpha name: Pastel Cream and Sky Blue Lookbook Apparel LP description: 生成りと淡い水色の帯を交互に敷き、写真を雑誌のルックブックのように散らして並べるアパレルLP。テラコッタ茶と水色・薄黄のレトロなセリフ欧文を、曲線や流れる帯にして添える。文字はとても少なく、写真の余白で見せる。 colors: background: '#F5F5E9' background-alt: '#D8EAF8' primary: '#9E6641' secondary: '#8FACB1' accent-1: '#E2E29C' text-body: '#5A4A3E' accent-2: '#8A4A2A' tint-1: '#D2DCD6' tint-2: '#E3D3B0' surface: '#E9EDEC' primary-accessible: '#99633F' secondary-accessible: '#55757A' typography: display: fontFamily: Abril Fatface fontSize: 40px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.04em headline-md: fontFamily: Abril Fatface fontSize: 22px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.08em headline-sm: fontFamily: Abril Fatface fontSize: 18px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.06em accent: fontFamily: Playfair Display fontSize: 12px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.12em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 2.2 letterSpacing: 0.08em note: fontFamily: Abril Fatface fontSize: 13px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 0px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 0px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' hero-photo-title: textColor: '{colors.background-alt}' typography: '{typography.display}' height: 300px oval-photo: backgroundColor: '{colors.background-alt}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 320px circle-badge-text: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 170px marquee-band: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.accent}' height: 30px photo-grid-2x2: textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 280px photo-caption-en: textColor: '{colors.primary}' typography: '{typography.note}' height: 70px category-link: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 120px --- # DESIGN.md — 生成り×水色のパステル服ルックブックLP（Pastel Cream and Sky Blue Lookbook Apparel LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: かわいい、やさしい・柔らかい、レトロ、上品・高級 - **キーワード**: ルックブック・パステル・レトロセリフ・非対称配置・ペットモチーフ・余白 - **地の質感**: フラットな単色の面。質感は写真のストライプ壁紙と起毛素材にまかせる - **形**: 角丸の写真、楕円・正円の切り抜き、円弧に沿って流れる欧文 - **温度感**: 暖かく柔らかい。クリームの地に冷たい水色をアクセントで入れる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F5F5E9` | メインの地色（生成り） | 40% | 画素の実測 | | `background-alt` | `#D8EAF8` | 交互に敷く水色の帯 | 25% | 画素の実測 | | `primary` | `#9E6641` | ブランドを代表するテラコッタ茶（円弧の文字・見出し） | 1% | 画素の実測 | | `secondary` | `#8FACB1` | くすんだ水色の欧文（流れる帯の文字） | 1% | 画素の実測 | | `accent-1` | `#E2E29C` | 薄黄のディスプレイ文字 | 0% | 画素の実測 | | `text-body` | `#5A4A3E` | 本文の小さい文字 | 0% | 推定 | | `accent-2` | `#8A4A2A` | トイプードルの赤茶（あしらい） | 0% | 推定 | | `tint-1` | `#D2DCD6` | 写真背景のセージグリーン | 10% | 画素の実測 | | `tint-2` | `#E3D3B0` | ベージュ（ストライプの壁紙・小物） | 5% | 推定 | | `surface` | `#E9EDEC` | 写真内の白 | 5% | 画素の主要色に補正 | | `primary-accessible` | `#99633F` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#55757A` | AA を満たす補正値（計算） | | 計算 | - 地の色は生成りと水色の2色だけ。セクションごとに入れ替えて帯にする - 強調はテラコッタ・くすみ水色・薄黄の欧文だけに使う - 黒は使わない。本文はこげ茶にする - 地が水色の帯では薄黄かテラコッタの文字を重ねる - 写真はセージ・ベージュ系の背景で撮り、地の色となじませる - `circle-badge-text` は文字 `#9E6641` × 背景 `#F5F5E9` のコントラスト比が 4.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#99633F`、4.54:1）を使う。 - `marquee-band` は文字 `#8FACB1` × 背景 `#F5F5E9` のコントラスト比が 2.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#55757A`、4.54:1）を使う。 - `category-link` は文字 `#9E6641` × 背景 `#F5F5E9` のコントラスト比が 4.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#99633F`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大きな英字ロゴ風タイトル | 欧文セリフ | Abril Fatface | 400 | 40px | 1.1 | 0.04em | | `headline-md` | 曲線や斜めに置く英字コピー | 欧文セリフ | Abril Fatface | 400 | 22px | 1.2 | 0.08em | | `headline-sm` | カテゴリ名（FOR〇〇） | 欧文セリフ | Abril Fatface | 400 | 18px | 1.2 | 0.06em | | `accent` | 円弧の文字・流れる帯の小さな欧文 | 欧文セリフ | Playfair Display | 700 | 12px | 1.2 | 0.12em | | `body-md` | 中央揃えのリード文 | ゴシック | Noto Sans JP | 400 | 12px | 2.2 | 0.08em | | `note` | 写真に添える英字キャプション（右揃え） | 欧文セリフ | Abril Fatface | 400 | 13px | 1.2 | 0.04em | - 見出しはすべてレトロで太いセリフ欧文の大文字にする - 和文は導入のリード文だけ。小さく、中央揃えで、行間を広く取る - 欧文は円弧・斜め・横に流れる帯の形にして、写真に重ねる - 文字色は1語ごとに茶・水色・薄黄を使い分けてよい - 太い和文ゴシックの見出しは使わない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。写真は2列グリッドとずらし配置を混ぜる - **本文ブロックの幅**: 画面幅の約 80% - **余白**: セクション間 80px、基本単位 8px、カード内 0px（375px 幅換算） - 写真は左右非対称にずらし、高さを変えて重ならないように置く - セクションは地色の帯で区切る。見出しは置かない - 4枚の写真を2×2のグリッドに並べ、すき間は8px前後にする - 写真の一部を画面の端から切れさせ、横スクロール風に見せる - 余白を大きく取り、写真1〜3枚ずつを1つのまとまりにする ## Elevation & Depth - 影は使わない。完全にフラットにする - 奥行きは写真の重ね配置と、地色の切り替えで出す ## Shapes - **角丸**: 小 0px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸の長方形・角なしの長方形・縦長の楕円・正円を混ぜる - **セクション境界**: 直線で地色を切り替える - 主役の写真は縦長の楕円で切り抜く - 正円の写真には円弧状の欧文を巻きつける - グリッドの写真は角を立てる。単独で置く写真は12〜16pxの角丸にする ## Components - **FV写真と英字タイトル**（`hero-photo-title`）: 全幅の写真の下端に、白か水色の太いセリフ英字を重ねる - **楕円写真と斜めの英字**（`oval-photo`）: 縦長の楕円写真に、薄黄の英字コピーを弓なりに横切らせる - **円弧の文字を巻いた丸写真**（`circle-badge-text`）: 正円の写真のまわりを、テラコッタの小さな欧文で一周させる - **流れる英字の帯**（`marquee-band`）: くすみ水色の英文を横一列に繰り返し、犬のあしらいをはさむ - **2×2の写真グリッド**（`photo-grid-2x2`）: 角のない写真4枚を並べ、1語ずつ英字を重ねてもよい - **英字キャプション**（`photo-caption-en`）: 写真の横に、3〜4行の大文字セリフを右揃えか左揃えで置く - **カテゴリ導線**（`category-link`）: 犬の切り抜き写真をはさみ、上下にFOR〇〇の英字を置いてリンクにする ## Do's and Don'ts **Do** - 生成りと水色の帯を交互に繰り返す - 写真を雑誌のようにずらして配置し、余白を広く取る - 欧文は円弧・斜め・流れる帯で動きを出す - 切り抜いた動物の写真を、余白に小さく散らす **Don't** - 原色の赤や黒い太字のCTAボタンを置かない - 和文の大見出しや説明文を詰め込まない - 影・グラデーション・枠線の装飾を加えない - 写真を均等な格子だけで並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（シリーズの世界観を一目で伝える）: 全幅のモデル写真に、太いセリフ英字タイトルを下部に重ねる 2. **コンセプト導入**（シリーズの想いを短く伝える）: 生成りの地に、小さな和文を中央揃えで6行ほど置く。犬のあしらいを左右に添える 3. **ルック1**（着用イメージを見せる）: 角丸写真2枚をずらして置き、円弧の英字と2×2グリッドを添える 4. **ルック2（水色の帯）**（主役のアイテムを印象づける）: 楕円写真に、斜めの薄黄英字を重ねる 5. **寝具・ペット用品**（関連アイテムを広げて見せる）: 大きな写真と、横に流れる写真列、正円写真の円弧文字で構成する 6. **ルック3**（別の色のバリエーションを見せる）: 水色の地に、大小3枚の写真を段違いに置く 7. **英字帯とルック4**（リズムをつけて見せ続ける）: 流れる英字の帯で楕円写真と小さな写真2枚をはさむ 8. **英字グリッド**（タイトルを遊び心で繰り返す）: 2×2の写真に、1語ずつ薄黄の英字を重ねる 9. **素材訴求**（生地と小物の魅力を伝える）: 角丸写真に、テラコッタと水色の英字キャプションを添える 10. **ラインアップ**（メンズ・キッズ・ペット向けを紹介する）: 円形写真と横に並ぶ商品の物撮りに、円弧の英字ラベルを付ける 11. **カテゴリ導線**（一覧ページへ送る）: 犬の切り抜き写真と、FOR〇〇・一覧へ進む英字リンク ## Imagery - 明るく影の少ない室内で撮ったモデルと犬の写真 - 背景はセージグリーンの壁か、ベージュと白のストライプ壁紙 - ぬいぐるみ・ボア素材の椅子・ランプなど、レトロでかわいい小物を置く - 商品はセージ色の背景で平置きの物撮りにする - 背景を抜いた犬の写真を、装飾として小さく散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央80%の幅で写真をずらし配置にする - SPでは写真を縦に積み、左右に交互に寄せてずらし感を残す - 2×2グリッドはSPでも2列のまま保つ - 流れる英字の帯とFVタイトルは、SPで文字を縮めて1行に収める - 横に流れる写真列は、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-082a3875`（元 LP の URL から採番） - **元 LP**: https://gelatopique.com/Page/feature/250306_toypoodle/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/10 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。