--- version: alpha name: Pastel Color-Block Collaboration Roomwear Lookbook LP description: 若草色を軸に、アイテムごとに地色（緑・紺・黄・淡ピンク）を切り替えるルックブック型 LP。写真はずらして配置し、手描きの線、水彩風のクマのイラスト、文字を散らした英字見出しで遊び心を出している。文字は少なめで、最後に枠線ピル型ボタン 1 つで一覧へ誘導する。 colors: primary: '#91B344' background: '#FFFCFA' background-alt: '#F0FDE3' tint-1: '#D3ECB5' dark-section: '#3A558A' tint-2: '#FFF1FF' accent-1: '#94B3D6' on-dark: '#E2F8E9' text-body: '#8BB050' accent-2: '#7BB64A' cta: '#FEFCFB' on-cta: '#78AB47' text-body-accessible: '#637D39' on-cta-accessible: '#587E34' primary-accessible: '#637A2E' typography: display: fontFamily: Montserrat fontSize: 34px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.12em headline-lg: fontFamily: Josefin Sans fontSize: 30px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.15em headline-md: fontFamily: Outfit fontSize: 19px fontWeight: 600 lineHeight: 1.35 headline-sm: fontFamily: Outfit fontSize: 15px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.05em accent: fontFamily: Poiret One fontSize: 44px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.05em label-button: fontFamily: Outfit fontSize: 20px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.03em note: fontFamily: Outfit fontSize: 10px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.02em rounded: sm: 0px md: 4px lg: 200px full: 999px spacing: unit: 8px card: 24px section: 70px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-outline-pill: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 50px scatter-heading: textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 90px doodle-caption: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 80px mascot-sticker: height: 120px oval-photo: rounded: '{rounded.full}' height: 420px tilted-card: backgroundColor: '{colors.accent-2}' typography: '{typography.accent}' rounded: '{rounded.sm}' height: 360px logo-lockup: textColor: '{colors.primary}' typography: '{typography.display}' height: 120px credit-list: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 200px --- # DESIGN.md — 青リンゴ緑×パステルのルームウェアコラボ LP（Pastel Color-Block Collaboration Roomwear Lookbook LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: かわいい、やさしい・柔らかい、ポップ・元気、ナチュラル - **キーワード**: パステル・ルックブック・カラーブロック・手描き線・キャラクター・おうち時間 - **地の質感**: フラットな単色の面にモコモコ素材の写真を重ねる。影はつけない。 - **形**: 四角い写真をずらして重ね、楕円写真や傾けたカード、波線を挟んで動きを出す - **温度感**: やや暖かく柔らかい。緑を軸に、季節感のある爽やかなパステル ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#91B344` | ロゴ・見出し・ボタンの若草緑 | | 画素の実測 | | `background` | `#FFFCFA` | イントロとグッズ欄の生成り地 | | 画素の実測 | | `background-alt` | `#F0FDE3` | コンセプトとフッターのごく淡い黄緑地 | | 画素の実測 | | `tint-1` | `#D3ECB5` | ジャカード欄の淡い緑地 | | 画素の実測 | | `dark-section` | `#3A558A` | カーディガン欄の紺地 | | 画素の実測 | | `tint-2` | `#FFF1FF` | カットソー欄の淡ピンク地 | | 画素の実測 | | `accent-1` | `#94B3D6` | 散らし英字見出しの水色 | | 画素の実測 | | `on-dark` | `#E2F8E9` | 紺地の上のミント白文字 | | 画素の実測 | | `text-body` | `#8BB050` | イントロ本文の黄緑文字 | | 推定 | | `accent-2` | `#7BB64A` | グッズ写真の後ろに敷く傾いた濃緑の板 | | 画素の実測 | | `cta` | `#FEFCFB` | 枠線ボタンの地 | | 画素の実測 | | `on-cta` | `#78AB47` | ボタンの文字と枠の緑 | | 画素の実測 | | `text-body-accessible` | `#637D39` | AA を満たす補正値（計算） | | 計算 | | `on-cta-accessible` | `#587E34` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#637A2E` | AA を満たす補正値（計算） | | 計算 | - 地色はアイテムごとに切り替える。緑・紺・黄・淡ピンクの 4 色。 - 地色は写真の背景の壁の色に合わせる。 - 文字はグレーや黒を使わず、緑系か、地色に合うパステルの色で書く。 - 紺地の上の文字はミント白にする。 - CTA は生成りの地に緑の枠線と緑の文字。塗りつぶしの強い色は使わない。 - 冒頭とフッターはごく淡い黄緑か生成りにして、全体をつなぐ。 - `page` は文字 `#8BB050` × 背景 `#FFFCFA` のコントラスト比が 2.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-body-accessible`（`#637D39`、4.54:1）を使う。 - `button-outline-pill` は文字 `#78AB47` × 背景 `#FEFCFB` のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-cta-accessible`（`#587E34`、4.61:1）を使う。 - `credit-list` は文字 `#91B344` × 背景 `#F0FDE3` のコントラスト比が 2.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#637A2E`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風のタイトル（大文字の英字） | 欧文サンセリフ | Montserrat | 700 | 34px | 1.2 | 0.12em | | `headline-lg` | アイテム名の英字。1 文字ずつ上下にずらして散らす | 欧文サンセリフ | Josefin Sans | 600 | 30px | 1.2 | 0.15em | | `headline-md` | 英文のリード文 | 欧文サンセリフ | Outfit | 600 | 19px | 1.35 | 0.0em | | `headline-sm` | 写真に添える手書き風の英語コメント | 欧文サンセリフ | Outfit | 700 | 15px | 1.4 | 0.0em | | `body-md` | 日本語のイントロ本文（中央揃え） | ゴシック | Zen Kaku Gothic New | 500 | 13px | 2.0 | 0.05em | | `accent` | GOODS 等の白抜き袋文字見出し | 装飾・ディスプレイ | Poiret One | 400 | 44px | 1.0 | 0.05em | | `label-button` | 一覧へ進むボタン | 欧文サンセリフ | Outfit | 600 | 20px | 1.0 | 0.03em | | `note` | 著作権表記・小さな注記 | 欧文サンセリフ | Outfit | 400 | 10px | 1.4 | 0.02em | - 見出しは英字だけで作る。日本語はイントロにだけ使う。 - アイテム名は 1 文字ずつ高さを変え、写真の上で弾むように並べる。 - 本文は中央揃えにし、短い段落で行間を広くとる。 - 太字の黒文字は使わない。文字色は緑かパステルにする。 - 袋文字の見出しは写真の上に重ねて置く。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は左右にずらして互い違いに置く - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 70px、基本単位 8px、カード内 24px（375px 幅換算） - 全幅写真の次に、地色の上へ幅 75〜85% の写真を左右交互に置く。 - 写真の空いた側にイラストや英語コメントを置き、余白を埋める。 - 写真どうしを少し重ねたり、地色の外へはみ出させたりしてリズムを出す。 - アイテムが変わるたびに、地色の帯を全幅で切り替える。 - フッターは中央揃えで、ロゴ・写真・ボタン・クレジットを縦に並べる。 ## Elevation & Depth - 影は基本的に使わない。 - 奥行きは写真の重なりと、背面に敷いた色板のずれで出す。 - グッズ写真は少し傾け、後ろに濃い緑の板をずらして敷く。 ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 200px。ボタンはピル型。 - **写真の切り抜き**: 基本は角丸なしの四角。コンセプト写真だけ縦長の楕円に切り抜き、少し傾けたカードも混ぜる - **セクション境界**: 装飾なしの直線で、地色を全幅で切り替える - 写真は角を立てた四角を基本にする。 - 楕円の切り抜きは、ページ全体で 1 か所のアクセントにとどめる。 - ボタンは細い枠線のピル型にする。 - 手描きの波線や吹き出し線を、写真の周りに添える。 ## Components - **枠線ピルボタン**（`button-outline-pill`）: 生成りの地に緑の細枠と緑の英字。幅はほぼ全幅 - **散らし英字見出し**（`scatter-heading`）: アイテム名を 1 文字ずつ上下にずらし、写真の上に重ねる - **手描き線付きコメント**（`doodle-caption`）: 短い英語コメントに、手描きの雲形線や波線を添える - **キャラクターのステッカー**（`mascot-sticker`）: 水彩風のクマのイラストを写真の角に重ねる。3 体並べて飾りにもする - **楕円写真**（`oval-photo`）: 縦長の楕円に切り抜いた集合写真。上にイラストを乗せる - **傾けたグッズカード**（`tilted-card`）: 写真を少し傾け、背面に濃い緑の板をずらして敷く。上に袋文字の見出しを重ねる - **ロゴの組み合わせ**（`logo-lockup`）: 2 ブランドの英字を 3 段で中央に積む - **出演者クレジット**（`credit-list`）: 名前と SNS アイコンを横に並べ、それを縦に積む。すべて緑 ## Do's and Don'ts **Do** - 地色は写真の背景の色に合わせ、アイテムごとに切り替える。 - 写真は左右交互にずらし、空いた余白にイラストや手描き線を置く。 - 英字の見出しやコメントは短くし、遊び心を出す。 - 文字は緑系かパステルの色だけで組む。 - CTA はページ末尾に、控えめな枠線ボタンで 1 つだけ置く。 **Don't** - 黒文字や原色の赤など、強いセール調の色を使わない。 - 写真に影や太い枠をつけない。 - 日本語の長い説明文を何段も入れない。 - すべての写真を同じ幅で等間隔に並べない。 - CTA ボタンを塗りつぶしの濃い色にしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観と出演者を一目で見せる）: 全幅の集合写真。文字は入れない 2. **コンセプト紹介**（コラボの趣旨を伝える）: 生成りの地に、ロゴの組み合わせと中央揃えの短い段落 3. **動画**（動きで印象を強める）: 写真をスライスしたような帯状の動画を、枠の中に置く 4. **アイテム紹介 1**（主力ウェアを見せる）: 全幅写真＋散らし英字。続けて淡い緑の地にずらし写真とイラストを置く 5. **コンセプト英文**（オリジナルのアートワークを紹介する）: 淡い黄緑の地に英文リード、クマ 3 体、楕円写真 6. **アイテム紹介 2**（カーディガンを見せる）: 水色の写真に散らし英字。紺地にずらし写真とミント白のコメント 7. **アイテム紹介 3**（カットソーを見せる）: 黄色い壁の写真に水色の散らし英字。淡ピンクの地に波線付きの英文と写真 8. **グッズ**（雑貨の展開を伝える）: 英文リードと袋文字の見出し。傾けたカードと背面の色板 9. **クロージング CTA**（一覧ページへ送る）: ロゴの組み合わせ、集合写真、著作権表記、枠線ピルボタン 10. **クレジット**（出演者の SNS へ誘導する）: 袋文字の小見出しに続けて、名前と SNS アイコンのリスト ## Imagery - パステルの単色の壁とラグを背景にした、室内スタジオ写真にする。 - 家具や小物（ソファ・本・ミニ冷蔵庫・果物）は、衣装と同じ系統の色でそろえる。 - モデルは寝そべる・伸びをするなど、くつろいだ自然なポーズにする。 - キャラクターは輪郭の柔らかい水彩風で描き、ステッカーのように写真の端へ重ねる。 - 手描き風の細い波線・雲形・ループ線を、白か水色で添える。 - グッズは緑のラグの上に並べ、真上から撮る。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に SP 幅（約 330px）の縦長カラムを固定し、左右は淡い黄緑の地にする。 - PC の左の余白にはロゴとキャラクター、右の余白には一覧ボタンを固定して表示する。 - PC のカラム内の構成は SP と同じにする。 - 広げる場合でも、カラム幅は 400px 前後に抑える。 ## 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-f0bbbb30`（元 LP の URL から採番） - **元 LP**: https://gelatopique.com/Page/feature/261002/ - **解析に使った画像**: 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/）からご連絡ください。