--- version: alpha name: Retro American Pop Collab Apparel LP description: 生成りの地に、ブランドごとに色を変えた全幅カラー帯（ピンク・ライム・グレージュなど）を並べるコラボTシャツ特集 LP。細長いコンデンス書体の大見出しと、タイプライター調の英文本文、切り抜きモデルや食材のコラージュでレトロなアメリカンポップを演出する。 colors: background: '#FAF9F5' primary: '#E6FBA0' accent-1: '#F7AFB0' accent-2: '#CBFB8D' dark-section: '#AA9E9E' cta: '#010101' on-cta: '#EDF5BD' text: '#2B2E32' secondary: '#0537B8' accent-3: '#ED3334' marker: '#F40783' tint-1: '#06CEC3' tint-2: '#F45406' line: '#2B2E32' typography: display: fontFamily: Oswald fontSize: 56px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.02em headline-lg: fontFamily: Oswald fontSize: 40px fontWeight: 500 lineHeight: 1.1 headline-md: fontFamily: Montserrat fontSize: 24px fontWeight: 700 lineHeight: 1.3 body-lg: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.05em body-md: fontFamily: Courier Prime fontSize: 11px fontWeight: 400 lineHeight: 1.65 letterSpacing: 0.02em accent: fontFamily: Oswald fontSize: 11px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.08em label-button: fontFamily: Oswald fontSize: 18px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 7px fontWeight: 400 lineHeight: 1.4 rounded: sm: 0px md: 0px lg: 9999px full: 999px spacing: unit: 8px card: 24px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 64px button-secondary: textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 64px label-about: backgroundColor: '{colors.secondary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 20px heading-brand: textColor: '{colors.accent-3}' typography: '{typography.headline-lg}' height: 48px link-items: textColor: '{colors.text}' typography: '{typography.accent}' height: 20px logo-carousel: textColor: '{colors.text}' rounded: '{rounded.full}' height: 60px circle-thumb: rounded: '{rounded.full}' height: 96px gingham-dot: rounded: '{rounded.full}' height: 120px --- # DESIGN.md — 生成り×ネオンカラーのレトロ米国風アパレル LP（Retro American Pop Collab Apparel LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: ポップ・元気、レトロ、かわいい - **キーワード**: アメリカンレトロ・雑誌的コラージュ・ブランド別カラー・コンデンス書体・タイプライター・切り抜き写真 - **地の質感**: 生成りの紙のようなマットな地に、フラットな色面と写真を直接置く。影やグラデーションは使わない。 - **形**: 写真は角丸なしの長方形。ラベルは楕円、サムネは正円。ギンガム柄の円をアクセントに散らす。 - **温度感**: 明るく陽気な夏の温度感。色ごとに暖色・寒色が切り替わる。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FAF9F5` | ページ全体の生成り地 | 40% | 画素の実測 | | `primary` | `#E6FBA0` | ライムイエローの帯・フッター地 | 10% | 画素の実測 | | `accent-1` | `#F7AFB0` | サーモンピンクのブランド帯 | 8% | 画素の実測 | | `accent-2` | `#CBFB8D` | 黄緑のブランド帯 | 7% | 画素の実測 | | `dark-section` | `#AA9E9E` | グレージュの帯 | 6% | 画素の実測 | | `cta` | `#010101` | 主ボタン（楕円）の塗り | 0% | 画素の実測 | | `on-cta` | `#EDF5BD` | 主ボタン上の文字 | 0% | 画素の実測 | | `text` | `#2B2E32` | 見出し・本文の黒 | 2% | 画素の主要色に補正 | | `secondary` | `#0537B8` | ブランド見出しのロイヤルブルー | 0% | 画素の実測 | | `accent-3` | `#ED3334` | ブランド見出しのレッド | 0% | 画素の実測 | | `marker` | `#F40783` | ブランド見出しのマゼンタ | 0% | 画素の実測 | | `tint-1` | `#06CEC3` | ブランド見出しのターコイズ | 0% | 画素の実測 | | `tint-2` | `#F45406` | ブランド見出しのオレンジ | 0% | 画素の実測 | | `line` | `#2B2E32` | サブボタンの楕円枠線 | 0% | 画素の主要色に補正 | - 地は生成りを基本に、ブランドごとに全幅の色帯を交互に入れる。 - 各ブランドに見出し色を1色割り当て、見出し・本文・ラベルを同系色で統一する。 - 帯の色と見出し色は補色・高コントラストで組む（ピンク地×赤、ライム地×マゼンタ等）。 - 主CTAは黒塗り×ライム文字、サブは黒枠線のみ。 - グラデーションや影は使わずフラットな色面のみ。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 縦書き風に置くFVの英字大見出し | 装飾・ディスプレイ | Oswald | 400 | 56px | 1.0 | 0.02em | | `headline-lg` | ブランド名の大見出し（細長いコンデンス） | 装飾・ディスプレイ | Oswald | 500 | 40px | 1.1 | 0.0em | | `headline-md` | FVのコラボ名ロゴ風見出し | 欧文サンセリフ | Montserrat | 700 | 24px | 1.3 | 0.0em | | `body-lg` | リード文の日本語本文（中央揃え） | ゴシック | Noto Sans JP | 400 | 13px | 2.0 | 0.05em | | `body-md` | ブランド紹介の英文本文 | 欧文セリフ | Courier Prime | 400 | 11px | 1.65 | 0.02em | | `accent` | 楕円ラベル・リンク見出しの小英字 | 装飾・ディスプレイ | Oswald | 500 | 11px | 1.2 | 0.08em | | `label-button` | ボタンの英字＋日本語2段 | 装飾・ディスプレイ | Oswald | 500 | 18px | 1.2 | 0.02em | | `note` | 写真脇の縦置きクレジット・著作権表記 | 欧文サンセリフ | Noto Sans JP | 400 | 7px | 1.4 | 0.0em | - 見出しは英字のみ、細長いコンデンス書体で大きく。 - ブランド紹介文は英語のタイプライター体で短く、左揃えか右揃え。 - 日本語はリード文とボタン補足だけに絞る。 - 見出し・本文はブランド色で着色し、黒は共通UIのみ。 - 写真上に本文を重ねてもよい（雑誌的なはみ出し）。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム（写真の左右寄せで変化をつける） - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算） - 写真は全幅と左右に余白30px程の縮小版を交互に置く。 - ブランドごとに見出し→紹介文→メイン写真→リンク→商品写真の順を繰り返す。 - 見出しブロックは左寄せ・右寄せ・中央を交互に変える。 - 切り抜き人物や食材を写真の角からはみ出させて重ねる。 - リンク見出しは写真の直下、左右どちらかの端に小さく置く。 ## Elevation & Depth - 影は一切使わない。 - 重なりは切り抜き写真のレイヤーで表現する。 - 写真角に細い白の＋マークを置き、拡大可能を示す。 ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 9999px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸なしの長方形。サムネは正円、背景を色付き円にした人物切り抜き。 - **セクション境界**: 直線で全幅の色帯を切り替える。斜めや波は使わない。 - ボタン・ラベルは横長の楕円。 - ギンガム柄の円を余白にアクセントとして置く。 - 写真は帯の境界をまたいで配置してよい。 ## Components - **楕円の主ボタン**（`button-primary`）: 黒塗りの横長楕円。上段に英字、下段に日本語の補足を2行で。 - **楕円枠のサブボタン**（`button-secondary`）: 黒の細線枠のみの楕円。文字は黒。 - **楕円ラベル**（`label-about`）: ブランド見出しの左上に置く小さな楕円ラベル。ブランド色で塗る。 - **ブランド大見出し**（`heading-brand`）: コンデンス書体の英字見出し。ブランドごとの色で塗る。 - **コーディネートリンク**（`link-items`）: 大文字の小英字＋右向き三角。写真下の端に配置。 - **円形ロゴ横スクロール**（`logo-carousel`）: 白い正円にロゴを入れ、左右に黒三角の矢印を付けた横並び。 - **円形人物サムネ**（`circle-thumb`）: 水色の円の上に切り抜き人物を3つ等間隔で並べる。 - **ギンガム円**（`gingham-dot`）: グレーのギンガム柄の円。画面端からはみ出して置く装飾。 ## Do's and Don'ts **Do** - ブランドごとに地色と見出し色のセットを決め、セクションを色で切り替える。 - 切り抜きモデルを連続ポーズで並べ、動きを出す。 - 食材や小物を写真の外にはみ出して散らす。 - 英文本文はタイプライター体で短く。 - 写真の角に白い細い＋を置く。 **Don't** - 角丸カードや影付きのボックスを使わない。 - 太い角ゴシックの日本語見出しを使わない。 - グラデーション背景を使わない。 - 一つのセクション内で複数のブランド色を混ぜない。 - 価格や割引バッジなど販促的な装飾を入れない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（季節感とテーマを一目で伝える）: 全幅の青空ポートレート写真。右端にライム色のコンデンス英字を縦に配置。 2. **イントロ**（企画の概要を伝える）: 生成り地に中央揃えでロゴ風英字見出しと日本語リード文を8行ほど。 3. **ブランドナビ**（コラボ先の一覧と回遊）: 円形ロゴを横スクロールで並べ、左右に矢印。 4. **ブランド紹介（繰り返し）**（各コラボの背景と世界観を伝える）: 楕円ラベル＋色付きコンデンス見出し＋英文紹介。周囲に円形写真や切り抜きを重ねる。 5. **着用写真**（着こなしイメージを見せる）: 全幅または左右寄せの大きな写真。写真角に＋マーク、端に縦置きクレジット。 6. **商品写真とリンク**（商品詳細へ誘導）: リンク見出しの下に余白付きの物撮り写真。切り抜き人物を角に重ねる。 7. **締めのメッセージ**（余韻を残す）: 斜めに傾けたタイプライター英文と、2色のモノトーン調切り抜き人物。 8. **CTA・フッター**（ストアと着用ページへ送客）: ライム地に黒塗りの楕円ボタンと枠線の楕円ボタンを縦に並べ、クレジット、SNSアイコン、コピーライトを中央揃え。 ## Imagery - 若いモデル1人を自然光で撮る。屋外の青空、キッチン、ランドリーなど生活感のあるアメリカ風の場所。 - 物撮りはハンガー吊りか平置き。食材や小物を一緒に写す。 - 同じモデルを連続ポーズで切り抜き、階段状に並べる。 - トマト・オレンジ・レコードなど食材や小物の切り抜きを手で持つ構図で散らす。 - 締めは赤系と青系の単色に加工した切り抜き人物。 - 写真脇に細いクレジットを縦向きに入れる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央の大きな写真とサブ写真を左右に置く2カラムのコラージュ構成。 - PC の FV は左に英字見出し、右に写真の横長レイアウト。 - PC のブランドナビは円形ロゴを全件1行で並べる。 - 色帯はPCでも全幅のまま、セクション内の要素を左右交互に配置する。 - 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-7c34d1b1`（元 LP の URL から採番） - **元 LP**: https://www.dot-st.com/nikoand/cp/202207product_womens - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。