--- version: alpha name: Showa Retro Glassware Pattern Fashion Lookbook LP description: クラフト紙のようなベージュ地に、テープで留めた白いカードを縦に並べるルックブック型の LP。オレンジの見出しと、昭和レトロな花・動物柄の丸バッジが目印。モデル写真と商品の切り抜き写真を左右交互に置き、懐かしくかわいい雰囲気をつくる。 colors: background: '#E5D6BC' surface: '#FEFEFE' primary: '#E8742A' cta: '#FF7901' on-cta: '#FFFFFF' accent-1: '#E52501' background-alt: '#EAC89D' tint-1: '#F1E4CC' text: '#181819' text-body: '#4A3F36' accent-2: '#DEA249' dark-section: '#523226' line: '#CEC0A2' cta-accessible: '#BE5A00' typography: display: fontFamily: Dela Gothic One fontSize: 34px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Dela Gothic One fontSize: 22px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 500 lineHeight: 1.45 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Yomogi fontSize: 13px fontWeight: 400 lineHeight: 1.3 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 2px md: 4px lg: 0px full: 999px spacing: unit: 8px card: 24px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' paper-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 600px pattern-badge: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 64px heading-orange: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 56px product-caption: textColor: '{colors.text-body}' typography: '{typography.note}' height: 40px campaign-price-bar: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.note}' height: 20px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px button-check: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 24px page-top: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 48px --- # DESIGN.md — 生成り紙×オレンジの昭和レトロ柄アパレル LP（Showa Retro Glassware Pattern Fashion Lookbook LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: レトロ、かわいい、親しみ・手作り感、ナチュラル - **キーワード**: 昭和レトロ・クラフト紙・マスキングテープ・花柄・動物柄・ルックブック・コラボ企画 - **地の質感**: ベージュの紙の繊維が見える質感の背景に、白い紙カードを影付きで重ねる - **形**: 角が直角のカード、丸い柄バッジ、テープ片。ボタンだけ小さく角を丸める - **温度感**: 暖かい。オレンジ・からし色・茶色が中心 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#E5D6BC` | クラフト紙の地 | 45% | 画素の実測 | | `surface` | `#FEFEFE` | コンテンツカードの地 | 28% | 画素の実測 | | `primary` | `#E8742A` | 見出しのオレンジ | 2% | 推定 | | `cta` | `#FF7901` | 下部の主ボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#E52501` | check ボタン・セール価格の赤 | 0% | 画素の実測 | | `background-alt` | `#EAC89D` | ファーストビューの濃いベージュ | 4% | 画素の主要色に補正 | | `tint-1` | `#F1E4CC` | 導入部の淡いベージュ | 5% | 画素の実測 | | `text` | `#181819` | ロゴ・見出しの墨色 | 1% | 画素の主要色に補正 | | `text-body` | `#4A3F36` | 本文の文字 | 2% | 推定 | | `accent-2` | `#DEA249` | 写真背景のからし色 | 3% | 画素の実測 | | `dark-section` | `#523226` | ブラウン系の服・柄の茶色 | 2% | 画素の実測 | | `line` | `#CEC0A2` | マスキングテープ | 0% | 画素の主要色に補正 | | `cta-accessible` | `#BE5A00` | AA を満たす補正値（計算） | | 計算 | - 背景はクラフト紙ベージュ、商品は白いカードに載せる - 見出しはオレンジだけで、本文は暖かい焦げ茶にする - 赤は check ボタンと割引価格だけに使う - 下部の誘導ボタンは明るいオレンジの面に白文字 - 写真の背景はからし色・茶・緑などのくすんだ暖色でそろえる - 冷たい青は花柄のバッジの中だけにとどめる - `button-primary` は文字 `#FFFFFF` × 背景 `#FF7901` のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#BE5A00`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのコラボロゴ | 装飾・ディスプレイ | Dela Gothic One | 700 | 34px | 1.2 | 0.02em | | `headline-lg` | セクション見出し（〜とは？） | 装飾・ディスプレイ | Dela Gothic One | 700 | 22px | 1.3 | 0.05em | | `headline-md` | カード内のオレンジ見出し | ゴシック | Zen Kaku Gothic New | 500 | 20px | 1.45 | 0.04em | | `body-md` | 商品説明の本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.05em | | `note` | 商品名・価格・注記 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.03em | | `accent` | 柄の名前の手書きロゴ | 手書き・筆 | Yomogi | 400 | 13px | 1.3 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.08em | - ロゴと大見出しは、昭和の看板のような太いレトロ書体にする - カードの見出しはオレンジの中太ゴシックで 2 行に改行する - 本文は小さめにし、行間を広く取る - 商品名と価格は写真の下に中央揃えで添える - 柄の名前は手書き風のロゴにしてバッジの下に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム（カード内で写真と文を縦に積む）。PC はカード内 2 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算） - 白いカードを中央に縦に並べ、カードの間からベージュの地を見せる - カードの上端中央にテープ片を斜めに貼る - モデル写真と、テキスト＋商品切り抜きを左右交互に置く - 柄バッジと柄イラストはカードの端からはみ出して置く - ページ下部にオレンジのボタンを 2 段に並べ、SNS アイコンを添える ## Elevation & Depth - カードには下方向にぼかしたやわらかい影をつける（0 8px 16px rgba(0,0,0,.15)） - テープ片は半透明で、影はつけない - ボタンは影なしのフラットにする ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: モデル写真は角が直角の縦長の四角。商品は背景を抜いた切り抜き - **セクション境界**: 区切り線は使わない。カード同士の間隔と、背景色の帯の切り替えで区切る - カードは角を丸めない - 柄バッジは白い縁取り＋色の輪の丸形 - ボタンは長方形で角をわずかに丸める - FV の下部に半円のスタンプ風の装飾を置く ## Components - **テープ留めカード**（`paper-card`）: 白い長方形カードの上中央に半透明のテープ片を貼る。影付き - **柄の丸バッジ**（`pattern-badge`）: レトロな花柄・動物柄を丸く切り抜き、色の輪で囲む。下に柄の名前の手書きロゴを添える - **オレンジ見出し**（`heading-orange`）: カード内の 2 行見出し。装飾はつけない - **商品キャプション**（`product-caption`）: 切り抜き商品の下に、商品名・税込価格・SOLD OUT を中央揃えで小さく置く - **価格＋check バー**（`campaign-price-bar`）: 写真の下に置く横長の帯。左に小さなバッジと割引価格、右に赤い check ボタン - **オレンジ誘導ボタン**（`button-primary`）: ページ下部の横長ボタン。白文字で、末尾に矢印をつける。左にサムネイルを入れる版もある - **check ボタン**（`button-check`）: 赤い小さな長方形のボタン。右端に矢印をつける - **ページトップボタン**（`page-top`）: ベージュ地の丸形ボタン。茶色の縁取りと文字 ## Do's and Don'ts **Do** - 背景には紙の質感のあるベージュを敷く - カードの上端にテープ片を貼り、スクラップブックのように見せる - 柄のバッジやイラストをカードの外に散らす - モデル写真は暖色の店内や壁の前で撮ったものを使う - 見出しはオレンジ、価格の強調は赤と役割を分ける **Don't** - 真っ白やグレーの無地の背景にしない - カードを大きく角丸にしない - 寒色やネオン色を大きな面に使わない - モダンで細い欧文フォントを主役にしない - ボタンをグラデーションや立体的な見た目にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボ企画であることを伝える）: 放射状の光線が入った濃いベージュの帯。中央にレトロロゴを置き、周りに花と動物のイラストを配置。リード文は 3 行 2. **ブランド紹介**（元になった柄の由来を説明する）: 淡いベージュの帯に飾り付きの見出しと中央揃えの本文。下にグラス製品を横一列に並べる 3. **商品ルック（柄別カード）**（柄ごとにアイテムを紹介する）: テープ留めの白いカードに、モデル写真・オレンジ見出し・説明・商品の切り抜き・柄バッジを置く。左右は交互に入れ替える 4. **小物・雑貨カード**（手頃な小物で購入のハードルを下げる）: 同じカードの形で、写真の下に割引価格と赤い check バーを置く 5. **注記**（価格表記の補足）: カードの外に小さな注記を左揃えで置く 6. **CTA**（新作一覧とカタログへ誘導する）: オレンジのボタンを 2 段で中央に置き、その下に SNS アイコン ## Imagery - モデル写真はレトロな喫茶店・レンガ壁・からし色の背景で撮る。暖色寄りのフィルムのような色味 - 商品写真は白背景の切り抜きで、少し影を落とす - 昭和の食器のような花・動物・果物のイラストをフラットに描く - 柄はタイル状のチェック模様や丸い窓に入れて装飾にする - マスキングテープや紙の繊維で手作り感を出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP ではカード内の 2 カラムを縦に積み、写真→見出し→本文→商品の順にする - SP でのカード幅は画面の約 90%。テープ片と影は残す - SP では装飾イラストを小さくし、カードの角に重ねる程度にとどめる - PC はカード幅約 760px を中央に置き、周りの余白に柄を散らす - 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-dc1f2b9f`（元 LP の URL から採番） - **元 LP**: https://www.felissimo.co.jp/syrup/aderiaretro_sy/aderiaretro_sy.html - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。