--- version: alpha name: Pastel Lab Notebook Staff Collab Goods LP description: 方眼紙柄の白地に実験器具のアイコンを散りばめた、ラボ風アパレル雑貨のコラボ企画 LP。メンバーごとにラベンダー・ダスティピンク・イエローの淡い地色でセクションを分け、写真スライダー、白い説明カード、黒の BUY ボタンを繰り返す。全体は軽やかでカジュアルな印象。 colors: background: '#FEFEFE' primary: '#3894A7' tint-1: '#E6DEEB' tint-2: '#F4E2E2' background-alt: '#FDFDF5' surface: '#FEFEFE' cta: '#010101' on-cta: '#FFFFFF' text: '#3D3531' accent-1: '#A79EB3' accent-2: '#C49FA1' accent-3: '#E9E977' line: '#C1B4AB' dark-section: '#000000' typography: display: fontFamily: Montserrat fontSize: 24px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Montserrat fontSize: 20px fontWeight: 500 lineHeight: 1.2 headline-md: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Montserrat fontSize: 13px fontWeight: 700 lineHeight: 1.1 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Montserrat fontSize: 11px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.08em accent: fontFamily: Zen Maru Gothic fontSize: 11px fontWeight: 700 lineHeight: 1.2 rounded: sm: 2px md: 4px lg: 0px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-buy: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 32px button-sns: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 26px section-title-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.display}' height: 56px member-avatar: textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 200px member-color-head: textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 72px item-desc-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 80px slider-dots: textColor: '{colors.text}' rounded: '{rounded.full}' height: 8px intro-frame: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 240px --- # DESIGN.md — 方眼紙×メンバーカラーのアパレル雑貨 LP（Pastel Lab Notebook Staff Collab Goods LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: かわいい、やさしい・柔らかい、シンプル・ミニマル、親しみ・手作り感 - **キーワード**: 方眼紙・ラボ・実験・メンバーカラー・パステル・スタッフプロデュース・モノトーンボタン - **地の質感**: 白地に薄いグレーの方眼グリッド。カラー区間は無地のパステル面 - **形**: 円形のプロフィール写真、細枠の四角い見出しボックス、点線の区切り線、角丸なしの黒ボタン - **温度感**: やや暖かいニュートラル。淡いパステルで柔らかく見せる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FEFEFE` | 方眼紙柄の地色 | 30% | 画素の実測 | | `primary` | `#3894A7` | ロゴや告知見出しの水色 | 1% | 画素の実測 | | `tint-1` | `#E6DEEB` | 1人目のメンバーカラー（ラベンダー）の区間の地 | 20% | 画素の実測 | | `tint-2` | `#F4E2E2` | 2人目のメンバーカラー（ダスティピンク）の区間の地 | 20% | 画素の実測 | | `background-alt` | `#FDFDF5` | 3人目のメンバーカラー区間のクリーム地 | 15% | 画素の実測 | | `surface` | `#FEFEFE` | 商品説明カード・見出しボックス | 5% | 画素の実測 | | `cta` | `#010101` | BUY ボタンと SNS ボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | 黒ボタン上の文字 | 0% | 画素の主要色に補正 | | `text` | `#3D3531` | 本文・商品名 | 1% | 画素の主要色に補正 | | `accent-1` | `#A79EB3` | ラベンダー系の見出し文字・名札 | 0% | 画素の実測 | | `accent-2` | `#C49FA1` | ピンク系の見出し文字・名札 | 0% | 画素の実測 | | `accent-3` | `#E9E977` | イエロー系の見出し文字・名札 | 0% | 画素の実測 | | `line` | `#C1B4AB` | 方眼・枠線・点線 | 1% | 画素の主要色に補正 | | `dark-section` | `#000000` | フッターの黒帯 | 2% | 画素の実測 | - メインの地は白っぽい方眼紙柄にし、イントロ・メンバー紹介・告知の区間で使う - メンバーごとに淡いテーマ色の無地を地にして区間を切り替える - メンバー名や『〇〇 produce items』の名前部分は、そのメンバーのテーマ色の濃いめトーンで書く - ボタンはすべて黒地に白文字で統一し、色を足さない - 水色はロゴと告知の強調にだけ使う - 説明カードは白地にして、パステル地から浮かせる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 英字のセクション見出し（四角い枠の中） | 欧文サンセリフ | Montserrat | 400 | 24px | 1.2 | 0.05em | | `headline-lg` | メンバーカラー名 | 欧文サンセリフ | Montserrat | 500 | 20px | 1.2 | 0.0em | | `headline-md` | 『〇〇 produce items』見出し・告知の強調 | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.03em | | `headline-sm` | member color のラベル | 欧文サンセリフ | Montserrat | 700 | 13px | 1.1 | 0.0em | | `body-md` | 紹介文・説明カード・商品名と価格 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `note` | 注釈・コピーライト | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `label-button` | BUY・SNS ボタン | 欧文サンセリフ | Montserrat | 700 | 11px | 1.0 | 0.08em | | `accent` | メンバー名の名札 | 丸ゴシック | Zen Maru Gothic | 700 | 11px | 1.2 | 0.0em | - 本文は小さめで中央揃えにし、短い行で改行する - 英字見出しは細めのサンセリフで書き、四角い枠に入れる - 強調は太さではなく色で付ける（メンバー色・水色） - 商品名と価格は1行に並べ、価格の前に全角スペース程度を空ける - 全体を中央揃えで組む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品写真は横スクロールのスライダー - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - メンバーごとに『プロフィール → produce items 見出し → 商品の繰り返し』で組む - 商品 1 点は『写真スライダー → ドット → 白カード → 商品名と価格 → BUY』の順に縦に積む - 商品と商品の間は 100px 前後と大きく空ける - メンバー紹介の円形写真はジグザグに配置する - 見出しの上下は点線で挟む ## Elevation & Depth - 影はほぼ使わず、フラットに見せる - 浮かせたい要素は白地と細い枠線で区別する - 円形写真には細いグレーの縁を付ける ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: プロフィールは正円。商品写真は角丸なしの縦長の長方形で、スライダーの右端を見切らせる - **セクション境界**: 区間の境目は直線で地色を切り替える。見出しの両脇に短い横線を引く - ボタンは角丸ほぼなしの黒い長方形にする - 名札は円形写真の左下に重ねる小さな四角ラベルにし、メンバー色で塗る - 見出しボックスは細い黒枠の長方形にする ## Components - **BUY ボタン**（`button-buy`）: 商品の下に置く横長の黒ボタン。幅は 180px 程度 - **SNS リンクボタン**（`button-sns`）: アイコン付きの小さな黒ボタンを 2 つ横に並べる - **英字見出しボックス**（`section-title-box`）: 白地に細い黒枠の長方形。英字見出しの右に実験器具アイコンを添える - **円形プロフィール＋名札**（`member-avatar`）: 正円の写真の左下に、メンバー色の名札を重ねる - **メンバーカラー見出し**（`member-color-head`）: 点線で上下を挟み、member color のラベル、鉛筆アイコン、色名を横に並べる - **商品説明カード**（`item-desc-card`）: 白い長方形に、2 行のキャッチを中央揃えで入れる - **スライダードット**（`slider-dots`）: 写真の下に小さな丸を 3 つ並べる。現在位置は黒、他はグレー - **イントロ枠**（`intro-frame`）: 白地に細枠の文章ボックス。四隅に実験器具アイコンをはみ出させて置く ## Do's and Don'ts **Do** - 方眼紙柄と実験器具の線画アイコンで『ラボ』の世界観を出す - メンバーごとにテーマ色を決め、地・名札・見出し文字で一貫して使う - 商品ブロックは同じ型で繰り返す - 余白を大きく取り、1 画面に 1 商品が収まるくらいのゆとりを持たせる - ボタンは黒一色で統一する **Don't** - 彩度の高い原色を広い面に使わない - ボタンをカラフルなピル型やグラデーションにしない - 影や立体的な装飾を入れない - 本文を大きく太くしすぎない - メンバー色を別のメンバーの区間に混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画の顔を見せる）: 方眼紙の地に手書き風のロゴを置き、その下にメンバー集合写真を横長で載せる 2. **企画紹介**（企画の背景を伝える）: 細枠の白ボックスに短い文章を中央揃えで入れ、周りにアイコンを散らす 3. **メンバー紹介**（プロデューサーの人柄を見せる）: 英字見出しボックスの下に、名札付きの円形写真 3 枚をジグザグに置く 4. **メンバー別商品（1人目）**（1人目がプロデュースした商品を売る）: ラベンダー地にプロフィールとカラー見出しを置き、続けて商品ブロックを繰り返す 5. **メンバー別商品（2人目）**（2人目がプロデュースした商品を売る）: ダスティピンク地で同じ型を繰り返す 6. **メンバー別商品（3人目）**（3人目がプロデュースした商品を売る）: クリーム地で同じ型を繰り返し、見出し文字はイエローにする 7. **販売情報**（発売日と販売場所を伝える）: 方眼紙の地に英字見出しボックスを置き、ラベルは水色の小見出し、詳細は中央揃えの本文で書く 8. **次回予告**（次の展開への期待を高める）: 水色の太字 2 行の下に、黒い服のシルエットとカラフルな『？』を散らす 9. **クロージング・フッター**（ブランドの印象を残す）: 切り抜いた集合写真とロゴを置き、最後に黒帯のフッターを敷く ## Imagery - グレージュ系の無地の背景で、笑顔のスタッフを自然光で撮る - 商品は人が着用・手持ちしている写真で見せ、寄りと引きを混ぜる - 締めには背景を切り抜いた集合写真を使う - 実験器具（フラスコ・顕微鏡・クリップボード）は、黒線＋水色の差し色のフラットな線画にする - 予告には黒一色の服のシルエットと、パステル色の『？』を使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC でも中央のカラムを 480px 前後に絞り、スマホと同じ縦の流れで組む - PC では方眼紙やパステルの地を画面幅いっぱいまで広げる - SP では商品写真を 1.3 枚ほど見せるスライダーにする - SP ではメンバー紹介の円形写真を 160px 程度にし、ジグザグ配置を保つ - 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-685b9259`（元 LP の URL から採番） - **元 LP**: https://www.dot-st.com/globalwork/cp/stafflab2601 - **解析に使った画像**: PC（PC版） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。