--- version: alpha name: Pastel Gradient Editorial Fashion Collab LP description: ミント・ラベンダー・ピーチのやわらかなグラデーション地に、淡いトーンの写真を重ねて並べたエディトリアル型のファッションコラボ LP。くすんだブルーのセリフ体を全体の文字色に使い、ルックの写真で世界観を伝える。最後に価格一覧と白いピル型ボタンで締める。 colors: primary: '#578299' secondary: '#90A9B4' background: '#F5F3F8' background-alt: '#FFEEF4' tint-1: '#E6F5F6' tint-2: '#FFECE5' accent-1: '#F2D4DA' accent-2: '#F9E3D3' cta: '#FEFEFE' on-cta: '#E2AFBC' on-dark: '#FDFEFE' surface: '#D9D4CF' primary-accessible: '#4E7489' secondary-accessible: '#54707D' on-cta-accessible: '#BF506C' typography: display: fontFamily: DM Serif Display fontSize: 52px fontWeight: 700 lineHeight: 0.95 headline-lg: fontFamily: DM Serif Display fontSize: 30px fontWeight: 400 lineHeight: 1.2 body-lg: fontFamily: DM Serif Text fontSize: 12px fontWeight: 600 lineHeight: 1.35 accent: fontFamily: Playfair Display fontSize: 12px fontWeight: 500 lineHeight: 1.55 letterSpacing: 0.01em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em headline-sm: fontFamily: Montserrat fontSize: 22px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.2em note: fontFamily: DM Serif Text fontSize: 9px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: DM Serif Display fontSize: 20px fontWeight: 400 lineHeight: 1.0 rounded: sm: 0px md: 0px lg: 40px full: 999px spacing: unit: 8px card: 0px section: 90px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' hero-watercolor: backgroundColor: '{colors.tint-2}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 770px concept-text: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.body-md}' height: 300px display-heading: backgroundColor: '{colors.tint-2}' textColor: '{colors.secondary}' typography: '{typography.display}' height: 130px photo-collage: backgroundColor: '{colors.background-alt}' height: 900px circle-photo: rounded: '{rounded.full}' height: 190px caption-en: textColor: '{colors.primary}' typography: '{typography.body-lg}' height: 90px price-list: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.body-lg}' height: 230px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 66px credit: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.note}' height: 170px --- # DESIGN.md — パステル虹色グラデのアパレル特集 LP（Pastel Gradient Editorial Fashion Collab LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: やさしい・柔らかい、上品・高級、かわいい、シンプル・ミニマル - **キーワード**: パステルグラデーション・エディトリアル・写真の重なり・欧文セリフ・淡いトーン・季節感 - **地の質感**: 水彩やタイダイのようにぼかしたグラデーション地。写真は彩度を抑えた淡いトーン - **形**: 角のない長方形の写真と、色の板を少しずらして重ねる。丸く切り抜いた写真を 1 点だけ入れる - **温度感**: やや暖かめのパステル（ピンク・ピーチ）に、ミントの寒色を少し混ぜる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#578299` | 見出し・本文のくすみブルー | 2% | 画素の実測 | | `secondary` | `#90A9B4` | 大見出しのグレイッシュブルー | 1% | 画素の実測 | | `background` | `#F5F3F8` | ラベンダー寄りの地色 | 25% | 画素の実測 | | `background-alt` | `#FFEEF4` | ピンクのグラデーション地 | 18% | 画素の実測 | | `tint-1` | `#E6F5F6` | ミントのグラデーション始点 | 10% | 画素の実測 | | `tint-2` | `#FFECE5` | ピーチのグラデーション終点 | 9% | 画素の実測 | | `accent-1` | `#F2D4DA` | 写真の裏に重ねるローズの色板 | 2% | 画素の実測 | | `accent-2` | `#F9E3D3` | 写真の裏に重ねるアプリコットの色板 | 2% | 画素の実測 | | `cta` | `#FEFEFE` | ピル型ボタンの白い面 | 1% | 画素の実測 | | `on-cta` | `#E2AFBC` | ボタン文字のピンク（ピーチから続くグラデーション） | 0% | 画素の実測 | | `on-dark` | `#FDFEFE` | ファーストビューのロゴに使う白 | 0% | 画素の実測 | | `surface` | `#D9D4CF` | 写真撮影背景のグレージュ | 30% | 画素の主要色に補正 | | `primary-accessible` | `#4E7489` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#54707D` | AA を満たす補正値（計算） | | 計算 | | `on-cta-accessible` | `#BF506C` | AA を満たす補正値（計算） | | 計算 | - 地は単色にしない。ミント→ラベンダー→ピンク→ピーチと縦に変わるグラデーションにし、セクションごとに繰り返す - 文字はすべてくすみブルー系の 1 色。黒は使わない - 強い色や彩度の高い色は使わない。色は写真の中の柄だけにとどめる - 写真の裏にローズやアプリコットの細長い色板を置き、地の色に奥行きを出す - ファーストビューは水彩のようにぼかした虹色の地に、白いロゴだけを載せる - CTA は白い面に、ピーチ→ピンクのグラデーション文字を載せる - `concept-text` は文字 `#578299` × 背景 `#F5F3F8` のコントラスト比が 3.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#4E7489`、4.56:1）を使う。 - `display-heading` は文字 `#90A9B4` × 背景 `#FFECE5` のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#54707D`、4.61:1）を使う。 - `price-list` は文字 `#578299` × 背景 `#FFEEF4` のコントラスト比が 3.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#4E7489`、4.56:1）を使う。 - `button-primary` は文字 `#E2AFBC` × 背景 `#FEFEFE` のコントラスト比が 1.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-cta-accessible`（`#BF506C`、4.55:1）を使う。 - `credit` は文字 `#578299` × 背景 `#E6F5F6` のコントラスト比が 3.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#4E7489`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | コンセプトを示す大きな英字見出し | 欧文セリフ | DM Serif Display | 700 | 52px | 0.95 | 0.0em | | `headline-lg` | 価格一覧などの英字セクション見出し | 欧文セリフ | DM Serif Display | 400 | 30px | 1.2 | 0.0em | | `body-lg` | 写真に添える英文の説明（太めのセリフ体） | 欧文セリフ | DM Serif Text | 600 | 12px | 1.35 | 0.0em | | `accent` | 英文コンセプトのイタリック | 欧文セリフ | Playfair Display | 500 | 12px | 1.55 | 0.01em | | `body-md` | 和文のコンセプト文（中央揃え） | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.02em | | `headline-sm` | ロゴ下のワイドな英字サブロゴ | 欧文サンセリフ | Montserrat | 500 | 22px | 1.2 | 0.2em | | `note` | スタッフのクレジット | 欧文セリフ | DM Serif Text | 400 | 9px | 1.5 | 0.0em | | `label-button` | ピル型ボタンの英字 | 欧文セリフ | DM Serif Display | 400 | 20px | 1.0 | 0.0em | - 見出しと説明文は英語のセリフ体が中心。和文は冒頭のコンセプト文だけに使う - 和文のコンセプト文は中央揃えにし、一文ずつ短く改行する - 英文の説明は、写真の配置に合わせて左揃えか右揃えにする - イタリックは英文コンセプトとルック番号に限って使う - 文字サイズは小さめに抑え、写真を主役にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラムで、写真を左右にずらして重ねる自由配置 - **本文ブロックの幅**: 画面幅の約 75% - **余白**: セクション間 90px、基本単位 8px、カード内 0px（375px 幅換算） - 写真は画面端まで出したり、片側に寄せたりと幅を変えて並べ、リズムをつける - 写真同士を少し重ね、裏に細長い色板を入れる - テキストブロックの前後には、グラデーション地だけの大きな余白をとる - 価格一覧は、ルック番号のラベル列と商品・価格の列からなる 2 列の表組みにする ## Elevation & Depth - 影はほぼ使わない - CTA ボタンだけにピンクがかった柔らかい影（0 4px 12px 程度）をつける - 奥行きは、写真・色板・半透明の写真を重ねる順番でつくる ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの長方形が基本。1 点だけ正円に切り抜き、別の写真に重ねる - **セクション境界**: 直線で区切り、グラデーション地の色の切り替わりで境界を示す - 写真には角丸をつけない - 丸く切り抜く写真はページで 1 回だけ - ボタンは白いピル型にする - 同じ写真を薄く半透明にして横に添え、残像のように見せる ## Components - **水彩グラデのファーストビュー**（`hero-watercolor`）: 上部に縦長の写真を置き、下半分は虹色をぼかした地に白いロゴを中央に載せる - **中央揃えのコンセプト文**（`concept-text`）: グラデーション地に、くすみブルーの小さな文字を短く改行して中央に組む - **大きな英字セリフの見出し**（`display-heading`）: 2 行の大きなセリフ体をグレイッシュブルーで中央に置き、セクションの区切りにする - **重ね写真のコラージュ**（`photo-collage`）: 大きさの違う長方形の写真を左右交互にずらして重ね、裏にパステルの色板を挟む - **正円の切り抜き写真**（`circle-photo`）: 長方形の写真の角に重ねて置く、丸く切り抜いた写真 - **英文キャプション**（`caption-en`）: 写真の横や下に置く 5〜6 行の太めのセリフ体の英文 - **ルック別の価格一覧**（`price-list`）: 左にイタリックのルック番号、右に商品名と価格を並べた 3 段の表 - **白いピル型ボタン**（`button-primary`）: 画面幅の 7 割ほどの白いピル型。グラデーション文字と淡い影をつける - **スタッフのクレジット**（`credit`）: 小さな見出しの下に、制作スタッフ名を小さな文字で中央に組む ## Do's and Don'ts **Do** - 地は常にパステルのグラデーションにし、セクションごとに色の流れを繰り返す - 写真は淡く明るいトーンに揃え、グレージュの背景で撮る - 写真をずらして重ね、色板を挟んで雑誌のように構成する - 文字はくすみブルー 1 色にまとめる - 文字のない余白を広くとる **Don't** - 黒文字や彩度の高い原色は使わない - 写真に角丸や太い枠線をつけない - 訴求のバッジや吹き出し、細かい情報の詰め込みは避ける - 写真を均等なグリッドにきっちり並べない - セクション見出しを和文の太いゴシックにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボの世界観とブランドロゴを示す）: 縦長のモデル写真と水彩グラデーションの地を組み合わせ、白いロゴを中央に置く 2. **コンセプト（和文）**（コレクションの背景とテーマを伝える）: グラデーション地に、短く改行した文を 2 段落、中央揃えで組む 3. **コンセプト見出し・英文**（テーマを印象的に打ち出す）: 大きな英字セリフの見出しの下に、イタリックの英文を中央に組む 4. **ルック 1 のコラージュ**（1 つ目のコーディネートを見せる）: 全身・部分・寄りの写真を重ねて配置し、正円の写真を 1 点添える 5. **素材の説明**（ニットの質感やモチーフを説明する）: 右揃えの英文キャプションの後に、横長の写真を全幅で置く 6. **ルック 2 のコラージュ**（2 つ目のコーディネートを見せる）: 縦長の写真 3 枚を階段状にずらし、裏に色板を置く。下に左揃えの英文を添える 7. **ポートレート**（アクセサリーと表情で余韻をつくる）: 横顔の寄り写真の横に、同じ写真を半透明にして残像のように重ねる 8. **ルック 3**（3 つ目のコーディネートを見せる）: 横長の写真 2 枚を細い隙間をあけて縦に並べる 9. **価格一覧**（アイテムと価格を示す）: 英字見出しの下に、ルック番号と商品・価格を 2 列の表で並べる 10. **CTA**（商品一覧ページへ誘導する）: 白いピル型ボタンを中央に置き、柔らかい影をつける 11. **スタッフのクレジット**（制作者を明記する）: ミントの地に、小さな文字で中央揃えに並べる ## Imagery - グレージュの無地背景のスタジオで、柔らかな逆光気味の光で撮った女性モデル - 露出は明るめで、コントラストと彩度を下げたフィルム調の淡い色にする - 花びらや紙吹雪が舞う演出で季節感を出す - 全身・上半身・顔の寄り・服の柄のアップを混ぜ、テンポをつける - 水彩やタイダイを思わせるパステルのぼかしを、背景の装飾に使う - 同じ写真をピンクがかった半透明にして重ね、夢のような雰囲気にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では約 580px 幅の中央カラムに SP と同じレイアウトを置き、左右は薄いピンクの単色で埋める - PC では一部の横長の写真と正円の写真だけがカラムの外にはみ出し、変化をつける - 文字サイズと構成は SP とほぼ同じまま、拡大して表示する - PC でも写真を重ねた配置は保ち、横並びのグリッドには組み替えない ## 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-6d36ebcf`（元 LP の URL から採番） - **元 LP**: https://gelatopique.com/Page/feature/260130/?plan=GP260130 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。