--- version: alpha name: Editorial Lookbook Color-Block Apparel LP description: シリーズごとに地の色を深い赤茶・くすみ青・生成り・黒へ切り替える雑誌風ルックブック。大きな人物写真を枠線つきで重ね、細長いコンデンス欧文の見出しで区切ります。購入の訴求は弱めで、最後のピル型アウトラインボタン 1 つだけです。 colors: primary: '#411812' secondary: '#53749D' accent-1: '#8A9AC8' background: '#FFFFFF' background-alt: '#F1F3E8' dark-section: '#000000' on-dark: '#FFFFFF' text: '#020202' accent-2: '#D0353A' accent-3: '#CEBAB2' text-muted: '#CFC5C3' line: '#6F8FC4' cta: '#FEFEFE' on-cta: '#010101' typography: display: fontFamily: Bebas Neue fontSize: 56px fontWeight: 700 lineHeight: 0.95 headline-md: fontFamily: Montserrat fontSize: 24px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.15em body-lg: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 2.3 letterSpacing: 0.05em body-md: fontFamily: Oswald fontSize: 13px fontWeight: 400 lineHeight: 1.45 note: fontFamily: Oswald fontSize: 9px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em accent: fontFamily: Playfair Display fontSize: 10px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Oswald fontSize: 13px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.02em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 12px section: 120px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' series-title: textColor: '{colors.secondary}' typography: '{typography.display}' height: 160px framed-photo: height: 460px black-title-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 190px price-caption: textColor: '{colors.text-muted}' typography: '{typography.note}' height: 40px series-copy: backgroundColor: '{colors.primary}' textColor: '{colors.accent-1}' typography: '{typography.body-md}' height: 130px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px staff-credit: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.note}' height: 200px --- # DESIGN.md — 深紅茶×くすみ青のカラーブロック服飾ルックブック LP（Editorial Lookbook Color-Block Apparel LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: 上品・高級、クール・先進的、シンプル・ミニマル - **キーワード**: ルックブック・カラーブロック・コンデンス欧文・写真の重ね配置・冬のぬくもり・雑誌的余白 - **地の質感**: フラットな単色面。質感は写真の起毛素材やニットにまかせる - **形**: 角のない矩形。写真は細い色枠で囲み、背景の色の境目をまたいで重ねる - **温度感**: 暖色の赤茶と寒色のくすみ青を交互に置き、温度差を出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#411812` | シリーズ地の深い赤茶 | 18% | 画素の実測 | | `secondary` | `#53749D` | くすみ青の地・見出し文字 | 10% | 画素の実測 | | `accent-1` | `#8A9AC8` | 赤茶地に乗る青紫の英文本文 | 1% | 推定 | | `background` | `#FFFFFF` | 基本の白地 | 20% | 画素の実測 | | `background-alt` | `#F1F3E8` | 生成りのシリーズ地 | 7% | 画素の実測 | | `dark-section` | `#000000` | 黒の見出し帯とクレジット帯 | 6% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒地の上の白い見出し | 1% | 画素の実測 | | `text` | `#020202` | 見出し・本文の黒 | 2% | 画素の実測 | | `accent-2` | `#D0353A` | 赤の撮影背景・スタッフ表記 | 1% | 推定 | | `accent-3` | `#CEBAB2` | 見出しや注記に使う淡いピンクベージュ | 1% | 画素の主要色に補正 | | `text-muted` | `#CFC5C3` | 価格表記の淡いグレー | 0% | 画素の実測 | | `line` | `#6F8FC4` | 写真枠の細線（青・黒） | 0% | 推定 | | `cta` | `#FEFEFE` | アウトラインボタンの地 | 0% | 画素の実測 | | `on-cta` | `#010101` | ボタンの文字と枠 | 0% | 画素の実測 | - シリーズごとに地の色を変える（赤茶→白→くすみ青→生成り→白→黒→赤茶） - 地の色はどれも単色で塗り、グラデーションは使わない - 見出しの色は地の色と同系か、写真から拾った色にする - 写真の背景色（青・赤）とセクションの地の色をそろえて一体感を出す - 強調の赤は小さな文字だけに使い、ボタンは白地に黒のアウトラインにする - 価格は淡い色で小さく置き、目立たせない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | シリーズ名の大見出し | 欧文サンセリフ | Bebas Neue | 700 | 56px | 0.95 | 0.0em | | `headline-md` | ロゴ風の字間を広げた欧文 | 欧文サンセリフ | Montserrat | 600 | 24px | 1.2 | 0.15em | | `body-lg` | 冒頭の和文リード | ゴシック | Noto Sans JP | 500 | 13px | 2.3 | 0.05em | | `body-md` | シリーズ説明の英文 | 欧文サンセリフ | Oswald | 400 | 13px | 1.45 | 0.0em | | `note` | 品名と価格 | 欧文サンセリフ | Oswald | 500 | 9px | 1.5 | 0.08em | | `accent` | 見出しの間に添える小さな筆記体 | 欧文セリフ | Playfair Display | 400 | 10px | 1.2 | 0.0em | | `label-button` | ボタンの文字 | 欧文サンセリフ | Oswald | 600 | 13px | 1.0 | 0.02em | - 見出しは縦長のコンデンス欧文を大文字で詰めて組み、2〜3 行に改行する - 見出しは右寄せ・縦書き・中央寄せを、セクションごとに変える - 和文は冒頭のリードだけにし、中央寄せで行間を広く取る - 説明文は英文の短い段落にし、5〜6 行に収める - 価格は品名を太字、金額を細字にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は全幅と左右にずらした 75〜85% 幅を混ぜる - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 120px、基本単位 8px、カード内 12px（375px 幅換算） - 写真を左右交互にずらし、上下の写真を少し重ねる - 写真をセクションの色の境目にまたがせて置く - シリーズ同士の間には 100px 以上の余白を取る - テキストは左右 12〜16px の余白で左寄せを基本にする - 大きな写真の上に小さな写真を重ねる入れ子の配置も使う ## Elevation & Depth - 影は使わない - 奥行きは写真の重なりと細い枠線だけで表す ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンはピル型。 - **写真の切り抜き**: 縦長の矩形。一部の写真には 2px の色枠を付ける - **セクション境界**: 直線で地の色を切り替える - 写真もパネルも角丸にしない - 丸いのは最後の CTA ボタンだけにする - 枠線は写真の背景色か黒の細線にする ## Components - **コンデンス見出し**（`series-title`）: 大文字の欧文を 2〜3 段に組み、写真の端に重ねるか、縦書きで添える - **枠付き写真**（`framed-photo`）: 細い色枠で囲んだ縦長写真。地の色の境目をまたいで置く - **黒帯の見出し**（`black-title-band`）: 黒地に白い大見出しを置き、左下に短い英文を添える - **価格キャプション**（`price-caption`）: 写真の下に左寄せで小さく置く、品名と価格の行 - **英文の説明ブロック**（`series-copy`）: 色地の上に置く 5 行前後の英文段落 - **アウトラインのピル型ボタン**（`button-primary`）: 白地に黒の 1.5px 枠を付けた全幅近いボタン。文字は大文字 - **スタッフクレジット**（`staff-credit`）: 赤い文字を中央寄せで並べた制作クレジット ## Do's and Don'ts **Do** - シリーズごとに地の色を変えて章立てを見せる - 写真を主役にし、文字は最小限にする - 写真の背景色と地の色をそろえる - 余白を大きく取り、雑誌のようにゆったり組む **Don't** - 角丸のカードや影を使わない - 派手な塗りつぶしの CTA や割引バッジを置かない - 和文の太い見出しを多用しない - 1 つのセクションに地の色を 2 色以上混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドの世界観を提示する）: ぼかした人物写真の上に、字間を広げた白いロゴ風欧文を置く 2. **コンセプトリード**（企画の趣旨を伝える）: 白地に和文 3 段落を中央寄せし、広い行間で組む 3. **シリーズ1（赤茶）**（商品を紹介する）: 白と赤茶の境目に青枠の写真をまたがせ、青いコンデンス見出しを右寄せで置く。英文と写真 2 枚を左右にずらして並べる 4. **シリーズ1の価格**（価格を示す）: 全幅写真の下に小さな価格行を置く 5. **シリーズ2（くすみ青・生成り）**（商品を紹介する）: 青地の写真に見出しを縦書きで添え、生成り地に写真 2 枚を積む 6. **シリーズ3（白）**（商品を紹介する）: 黒の大見出しと中央寄せの英文を置き、明るい写真と入れ子の写真を続ける 7. **シリーズ4（黒帯・赤茶）**（人気シリーズを紹介する）: 黒帯の白見出しの後、赤茶地に黒枠の写真を左右にずらして並べる 8. **エンディング**（締めの印象を残す）: 黒地にロゴ風見出しを置き、黒と白の境目に写真をまたがせる 9. **CTA**（一覧ページへ送る）: アウトラインのピル型ボタンを 1 つだけ置く 10. **クレジット**（制作スタッフを記す）: 赤い小さな文字を中央寄せで並べる ## Imagery - 人物 1 人を、単色の背景紙（くすみ青・赤・白）の前で撮る - 椅子・チェック柄のブランケット・花などの小物を少し添える - 起毛やニットの質感が伝わる柔らかい自然光で撮る - シャボン玉などの軽い演出や、モノクロのぼかし写真を背景に重ねる - 全身・ひざ上・顔のアップを組み合わせてリズムを作る - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像がないため推奨を示す。コンテンツ幅は最大 1000px 前後にする - PC では写真を 2 カラムでずらして配置し、見出しを写真の横に置く - 地の色はブラウザの全幅に広げる - 見出しは 1.6 倍程度まで拡大する ## 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-5b403d4b`（元 LP の URL から採番） - **元 LP**: https://gelatopique.com/Page/feature/251024/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。