--- version: alpha name: Red Accent Editorial Plush Toy LP description: グレーの地に、スマホ幅の白い縦長カラムを中央に置いたエディトリアル型LP。写真は余白を広く取って左右にずらして配置する。深紅は巨大なサイズ文字・ピル型ボタン・丸いBUYボタン・額縁枠だけに使い、ゆったりした雑誌のような空気を作る。 colors: background: '#EAECE9' surface: '#FFFFFF' primary: '#972531' cta: '#B41D22' on-cta: '#FFFFFF' text: '#1E2124' dark-section: '#242523' on-dark: '#FFFFFF' background-alt: '#E0E1E3' accent-1: '#E50B2A' line: '#972531' text-muted: '#972531' typography: display: fontFamily: Pacifico fontSize: 56px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: Montserrat fontSize: 64px fontWeight: 900 lineHeight: 1.0 headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Montserrat fontSize: 15px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 2.2 letterSpacing: 0.1em note: fontFamily: Montserrat fontSize: 11px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em label-button: fontFamily: Montserrat fontSize: 12px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.12em accent: fontFamily: Kaushan Script fontSize: 15px fontWeight: 400 lineHeight: 1.4 rounded: sm: 0px md: 4px lg: 999px full: 999px spacing: unit: 8px card: 20px section: 120px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-pill: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 28px button-buy-circle: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px size-letter: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 64px tap-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 18px frame-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 420px button-bar: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 24px nav-underline: textColor: '{colors.primary}' typography: '{typography.note}' height: 20px --- # DESIGN.md — 白地×深紅のファッション雑貨ぬいぐるみLP（Red Accent Editorial Plush Toy LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: シンプル・ミニマル、かわいい、上品・高級 - **キーワード**: エディトリアル・大胆な余白・深紅のアクセント・ずらし配置の写真・スクリプトロゴ - **地の質感**: 白い面がフラットで、写真の毛並みの質感が主役。影はない - **形**: 四角い写真、ピル型ボタン、丸ボタン、二重線の額縁枠 - **温度感**: 白とグレーでやや冷たいが、赤が温度を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#EAECE9` | 外側の地（グレー） | 67% | 画素の実測 | | `surface` | `#FFFFFF` | 中央コンテンツカラムの白 | 13% | 画素の実測 | | `primary` | `#972531` | ブランドの深紅（サイズ文字・ボタン） | 2% | 画素の主要色に補正 | | `cta` | `#B41D22` | ピル型・丸型ボタン | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `text` | `#1E2124` | 本文・価格の文字 | 1% | 画素の主要色に補正 | | `dark-section` | `#242523` | ファーストビューの暗い毛並みの地 | 2% | 画素の実測 | | `on-dark` | `#FFFFFF` | FV上の白いロゴ・コピー | 0% | 画素の主要色に補正 | | `background-alt` | `#E0E1E3` | 写真スタジオの薄いグレー背景 | 4% | 画素の実測 | | `accent-1` | `#E50B2A` | 写真小物の鮮やかな赤 | 2% | 画素の実測 | | `line` | `#972531` | ナビリンクの赤い下線 | 0% | 画素の主要色に補正 | | `text-muted` | `#972531` | クレジット表記の赤 | 0% | 画素の主要色に補正 | - 外側はグレー、中身は白い縦長カラム1本にまとめる - 強調色は深紅1色だけ。面で大きく使うのはボタンと大きな文字に限る - 本文は黒っぽい文字。見出し・リンク・クレジットは深紅にする - 写真の中に赤い小物を入れて、UIの深紅と響き合わせる - FVだけを暗い写真にして、白い文字を乗せる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風のスクリプト見出し | 欧文スクリプト | Pacifico | 400 | 56px | 1.1 | 0.0em | | `headline-lg` | L/Mなどの巨大なサイズ文字 | 欧文サンセリフ | Montserrat | 900 | 64px | 1.0 | 0.0em | | `headline-md` | 枠内の見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.05em | | `headline-sm` | LINEUP・SHAREなどの英字ラベル | 欧文サンセリフ | Montserrat | 800 | 15px | 1.3 | 0.1em | | `body-md` | 中央揃えのリード文・説明文 | ゴシック | Noto Sans JP | 500 | 13px | 2.2 | 0.1em | | `note` | 価格・クレジット | 欧文サンセリフ | Montserrat | 400 | 11px | 1.8 | 0.05em | | `label-button` | ボタンの英字 | 欧文サンセリフ | Montserrat | 800 | 12px | 1.0 | 0.12em | | `accent` | FVの英文サブコピー（斜体スクリプト） | 欧文スクリプト | Kaushan Script | 400 | 15px | 1.4 | 0.0em | - 英字ラベルとボタンは太いサンセリフで字間を広めにする - 和文の本文は小さめにして、行間2以上で中央揃えにする - サイズを表す1文字は極太にして、写真の角に重ねるように置く - スクリプト体はロゴとFVだけに使う - 価格表記は右寄せにして、丸いBUYボタンと横に並べる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。PCでも中央の幅約300pxのカラムを1本置く - **本文ブロックの幅**: 画面幅の約 100% - **余白**: セクション間 120px、基本単位 8px、カード内 20px（375px 幅換算） - 写真は全幅にせず、左寄せ・右寄せで約80%幅に収めて交互にずらす - セクションの間に100〜160pxの大きな白余白を取る - 小さい商品写真とTAP!吹き出しを余白の中に浮かせる - サイズ文字は写真の上端の外側の角に置く - 4枚の写真を2×2で並べるグリッドを1回入れる ## Elevation & Depth - 影は一切使わない - 重なりは、写真と大きな文字の位置をずらして表現する ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの長方形。縦長が多く、片側を画面端まで寄せて切る - **セクション境界**: 区切り線は引かず、余白と写真の端で区切る - 写真は常に角丸0 - ボタンはピル型か正円にする - 説明枠は二重線で、角を切り欠いた額縁型にする - TAP!は小さい四角の吹き出しで、下に尻尾を付ける ## Components - **一覧ピルボタン**（`button-pill`）: 深紅のピル型に白い太字英字のボタン。中央に置く - **丸BUYボタン**（`button-buy-circle`）: 直径約40pxの深紅の正円。左に商品名と価格を並べて右寄せにする - **巨大サイズ文字**（`size-letter`）: 深紅の極太欧文1文字。横に縦書きの小ラベルを添えることもある - **TAP!吹き出し**（`tap-badge`）: 深紅の小さい四角に白文字を入れ、下に尻尾を付ける。商品写真の上に置く - **額縁風説明カード**（`frame-card`）: 深紅の二重線で囲む枠。上から写真が顔を出す。中に見出し・本文・イラスト・帯ボタンを入れる - **帯状リンクボタン**（`button-bar`）: カード内いっぱいの幅の深紅の帯。白文字と右向き矢印を入れる - **下線テキストリンク**（`nav-underline`）: 深紅の英字リンクに細い下線を引き、縦に並べる ## Do's and Don'ts **Do** - 白い余白を惜しまずに取って、写真1枚ずつに間を作る - 深紅はボタン・サイズ文字・枠線に絞って使う - 写真の左右の位置を交互にずらしてリズムを作る - 各商品のブロックは価格行と丸BUYボタンで締める - 写真の小物に赤を入れる **Don't** - 赤以外のアクセント色を足さない - 影やグラデーションのボタンを使わない - 文字を詰め込んだ訴求型の構成にしない - 写真を角丸にしたり、全部を全幅で揃えたりしない - 和文に太い装飾書体を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観とブランドを一瞬で伝える）: 毛並みのクローズアップ写真を全面に敷き、白いスクリプトロゴと英文の一行を中央に置く 2. **ラインナップ**（サイズ展開を一覧で見せる）: 白背景で商品を並べた写真に赤い英字ラベルを付け、下にピルボタンを置く 3. **リード文**（商品の雰囲気を短い詩のような文で伝える）: 中央揃えの小さい和文を行間広めに組み、端から商品写真をのぞかせる 4. **サイズ別商品紹介**（サイズごとに使用シーンを見せて購入へつなぐ）: 巨大サイズ文字、ずらして置いたモデル写真、TAP!付きの小物写真を順に並べ、価格とBUYで締める。サイズの数だけ繰り返す 5. **キーチャーム紹介**（小物バリエーションを見せる）: 赤背景の2×2写真グリッドと縦書きラベル付きのサイズ文字で、同じ流れを繰り返す 6. **ブランドストーリー**（キャラクターの背景を伝える）: 額縁風の二重線カードの中に、見出し・本文・イラスト・帯ボタンを入れる 7. **締めのビジュアルとCTA**（全商品一覧へ誘導する）: 全身モデル写真の下にピルボタンを置く 8. **リンクとクレジット**（関連ページと制作情報を載せる）: 下線付きの赤いリンクを縦に並べ、右揃えのラベルと左揃えの名前で2列のクレジットを組む 9. **フッター**（SNSシェアとブランドを表示する）: SHAREの英字、SNSアイコン、赤いロゴ、コピーライトを中央に並べる ## Imagery - 薄いグレーの無地のスタジオ背景で撮る。自然光で明るく、柔らかい影にする - モデルは白シャツとデニムに赤い靴下やベストを合わせ、赤を差し色にする - 商品を頭に乗せる・宙に浮かせるなど、遊び心のあるポーズにする - 白抜きの小さな物撮り（レトロな雑貨と商品）を余白に浮かせる - 質感が伝わるマクロ写真をFVや区切りに使う - 絵本のような油彩調イラストを1点、物語の説明に添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでもコンテンツはスマホ幅の中央カラムのまま。左右はグレーの地にする - PCではカラムの右横にロゴ・英文・ナビリンクを固定で置く - SPではカラムを画面幅いっぱいにして、写真のずらし幅は同じ比率を保つ - 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-07dc9f10`（元 LP の URL から採番） - **元 LP**: https://www.dot-st.com/studioclip/cp/2025creepu - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。