--- version: alpha name: Bold Pink Editorial Luxury Resale Store LP description: 淡いピンク地にマゼンタの太い欧文セリフを大きく置いた、雑誌風の新店舗告知 LP。キャラクター写真と白抜き線の大きな漢字で遊びを出す。中盤は白とライトグレーの明朝体で店舗情報を落ち着いて並べる。 colors: primary: '#E6367F' background-alt: '#F3CCDD' background: '#FFFFFF' tint-1: '#F7F7F7' surface: '#FEFEFE' secondary: '#333333' text: '#2C2C2C' on-primary: '#FFFFFF' line: '#D9D7D6' tint-2: '#F4F4F4' text-muted: '#ECEDEB' accent-1: '#FDD3E4' primary-accessible: '#E11C6E' typography: display: fontFamily: Playfair Display fontSize: 72px fontWeight: 800 lineHeight: 1.0 letterSpacing: -0.02em headline-lg: fontFamily: Playfair Display fontSize: 56px fontWeight: 700 lineHeight: 1.05 headline-md: fontFamily: Noto Serif JP fontSize: 28px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.04em headline-sm: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Noto Serif JP fontSize: 12px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em accent: fontFamily: Roboto Condensed fontSize: 12px fontWeight: 500 lineHeight: 1.2 label-button: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.06em rounded: sm: 0px md: 0px lg: 999px 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-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' height: 52px button-dark: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' height: 48px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 48px button-pill-white: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 46px store-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 960px badge-new: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.note}' height: 32px label-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.accent}' height: 22px tag-chip: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.note}' height: 36px --- # DESIGN.md — ピンク×マゼンタの高級リユース店舗 LP（Bold Pink Editorial Luxury Resale Store LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: ポップ・元気、上品・高級、力強い・インパクト - **キーワード**: ピンク一色の世界観・高コントラストの欧文セリフ・雑誌風エディトリアル・キャラクター起用・アイソメトリック図解・明朝の情報面 - **地の質感**: フラットな単色面。写真とイラストの切り抜きで奥行きを出す。背景には白い細線で描いた大きな漢字を透かして置く。 - **形**: 情報面は角丸なしの四角。FV と キャラクター周りだけピル型ボタンと円形アイコンを使う。 - **温度感**: ピンクの部分は温かく陽気。店舗情報の部分は白とグレーで冷静。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E6367F` | 見出し欧文・主ボタン・バッジのマゼンタ | 4% | 画素の実測 | | `background-alt` | `#F3CCDD` | FV・フロアガイド・キャラクター紹介の淡ピンク地 | 28% | 画素の実測 | | `background` | `#FFFFFF` | 商品紹介・フッターの白地 | 32% | 画素の実測 | | `tint-1` | `#F7F7F7` | 店舗情報セクションのライトグレー地 | 12% | 画素の実測 | | `surface` | `#FEFEFE` | 店舗カードの白面 | 8% | 画素の実測 | | `secondary` | `#333333` | 予約ボタン・公式サイトボタンの墨色 | 2% | 画素の実測 | | `text` | `#2C2C2C` | 明朝の見出し・本文の濃グレー | 2% | 画素の実測 | | `on-primary` | `#FFFFFF` | マゼンタ面の上の白文字 | 0% | 画素の主要色に補正 | | `line` | `#D9D7D6` | 情報の区切り線・枠線ボタン | 0% | 画素の主要色に補正 | | `tint-2` | `#F4F4F4` | ハッシュタグ・店舗種別のグレーのチップ | 0% | 画素の実測 | | `text-muted` | `#ECEDEB` | セクション背後の薄い欧文透かし | 1% | 画素の主要色に補正 | | `accent-1` | `#FDD3E4` | 商品写真背景の柔らかいピンク | 2% | 画素の実測 | | `primary-accessible` | `#E11C6E` | AA を満たす補正値（計算） | | 計算 | - ブランドの場面（FV・フロア・キャラクター）は淡ピンクの地にマゼンタの文字で組む。 - 情報の場面（商品・店舗）は白かライトグレーの地に墨色の文字で組み、ピンクは控える。 - マゼンタは見出しの欧文、主ボタン、新店バッジ、ラベル帯に限って使う。 - 店舗カードのボタンは白地の枠線ボタンと墨色の塗りボタンを横に並べる。 - ピンクの写真の上にはマゼンタの帯を敷き、白文字を乗せる。 - 背景の大きな漢字は白か薄灰の細い線だけで描き、主張させない。 - `button-primary` は文字 `#FFFFFF` × 背景 `#E6367F` のコントラスト比が 4.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E11C6E`、4.57:1）を使う。 - `button-pill-white` は文字 `#E6367F` × 背景 `#FFFFFF` のコントラスト比が 4.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E11C6E`、4.57:1）を使う。 - `badge-new` は文字 `#FFFFFF` × 背景 `#E6367F` のコントラスト比が 4.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E11C6E`、4.57:1）を使う。 - `label-band` は文字 `#FFFFFF` × 背景 `#E6367F` のコントラスト比が 4.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E11C6E`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の日付と開店告知の超大見出し | 欧文セリフ | Playfair Display | 800 | 72px | 1.0 | -0.02em | | `headline-lg` | セクション名の欧文大見出し（マゼンタ） | 欧文セリフ | Playfair Display | 700 | 56px | 1.05 | 0.0em | | `headline-md` | 和文のセクション見出し・店舗名 | 明朝 | Noto Serif JP | 400 | 28px | 1.4 | 0.04em | | `headline-sm` | キャラクター紹介の帯付き見出し | 明朝 | Shippori Mincho | 500 | 24px | 1.5 | 0.04em | | `body-md` | 店舗情報・説明文 | 明朝 | Noto Serif JP | 400 | 14px | 1.9 | 0.04em | | `note` | 注釈・コピーライト | 明朝 | Noto Serif JP | 400 | 12px | 1.8 | 0.03em | | `accent` | フロア図のラベル帯（白文字の欧文） | 欧文サンセリフ | Roboto Condensed | 500 | 12px | 1.2 | 0.0em | | `label-button` | ボタンの文字 | 明朝 | Noto Serif JP | 400 | 15px | 1.2 | 0.06em | - 欧文の見出しはハイコントラストの太いセリフにする。2 行に割り、画面幅いっぱいまで大きく置く。 - 和文はすべて明朝体で統一し、ゴシック体は使わない。 - セクション見出しの背後に、同じ意味の欧文を薄く大きく透かして重ねる。 - キャラクターの紹介文は 1 行ずつマゼンタの帯に白文字で載せる。 - 英字の小見出しは手書き風の斜体のセリフにし、帯の左上に重ねる。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品写真だけ 2 列グリッド - **本文ブロックの幅**: 画面幅の約 91% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 左右の余白は約 16px。 - 商品写真は正方形を 2 列にし、間隔は約 16px。 - 店舗カードは白面に入れ、ラベルと値の組を区切り線で縦に並べる。 - ボタンを 2 つ横に並べるときは等幅にし、間隔は 8px。 - FV は要素を重ねて置く。写真・キャラクター・文字を斜めにずらして重ねる。 ## Elevation & Depth - 影はほぼ使わない。カードは地の色との差だけで分ける。 - キャラクターの切り抜き写真をカードや見出しの上にはみ出させ、奥行きを出す。 ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 999px。ボタンは角丸の長方形。 - **写真の切り抜き**: 店舗と商品の写真は角丸なしの四角に切る。キャラクターは切り抜くか、円形のアイコンにする。 - **セクション境界**: 直線で区切り、背景色を切り替える。 - 情報の部品はすべて角丸 0 にする。 - FV の展開ボタンと SNS への導線だけ、白のピル型にする。 - SNS アイコンは細い線の円形ボタンにする。 - ラベル帯とバッジは角丸なしの長方形にする。 ## Components - **マゼンタの主ボタン**（`button-primary`）: 全幅・角丸なしのマゼンタ面。中央に白の明朝文字、右端に細い矢印か＋を置く。 - **墨色の予約ボタン**（`button-dark`）: 店舗カード内の右側に置く塗りボタン。白文字。 - **枠線ボタン**（`button-outline`）: 白地に墨色の 1px 枠。予約ボタンと並べて置く。 - **白のピルボタン**（`button-pill-white`）: ピンク地の上に置く白のピル型ボタン。マゼンタの欧文と右の矢印。左にキャラクターがはみ出す。 - **店舗情報カード**（`store-card`）: 白面に明朝の店舗名を中央に置き、項目は区切り線で並べる。下に地図とボタン 2 つ。右上の角にバッジを置く。 - **新店バッジ**（`badge-new`）: カード右上に付ける長方形のバッジ。新店はマゼンタ、既存店はグレーにする。 - **マゼンタのラベル帯**（`label-band`）: 図解の項目名や紹介文に敷く帯。白文字を 1 行ずつ載せる。 - **グレーのチップ**（`tag-chip`）: ハッシュタグや営業形態を示す小さな四角いチップ。 ## Do's and Don'ts **Do** - 欧文のセリフ見出しは画面幅いっぱいまで大胆に大きくする。 - ブランドの場面はピンク、情報の場面は白とグレーにはっきり分ける。 - 背景に白い細線の大きな漢字を透かして置き、地域性を出す。 - キャラクターは要所に繰り返し登場させ、はみ出す配置にする。 - 和文は明朝体で統一し、行間を広めに取る。 **Don't** - 情報の部品に角丸や影を付けない。 - ゴシック体や丸ゴシック体を混ぜない。 - マゼンタを本文の文字色に使わない。 - ピンク以外の鮮やかな色を足さない。 - 店舗情報の面にピンクの装飾を詰め込まない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（開店日と店舗名を強く告知する）: 淡ピンクの地に、マゼンタの欧文を 2 行と白い巨大な日付を重ねる。キャラクターと店内写真を斜めに配置し、白のピルボタンを置く。 2. **キャラクターへの導線**（SNS への誘導）: 円形に切り抜いたキャラクターと、マゼンタの円形 SNS アイコン、斜めの手書き風の欧文を並べる。 3. **店舗写真の帯**（外観と内観を見せる）: 写真を 3 枚横に並べ、左右は画面外にはみ出させる。 4. **フロアガイド**（各階の内容を図解する）: アイソメトリックの店内イラストを階ごとに積む。商品の切り抜きを引き出し線とマゼンタの帯ラベルでつなぐ。 5. **商品紹介**（取扱い商品を見せる）: 白地。ピンク背景で撮った商品写真を正方形 2 列で並べ、注釈と全幅のマゼンタボタンを置く。 6. **取り組みの説明**（品質への方針を伝える）: 明朝の見出し、グレーのハッシュタグチップ、本文の順に置く。 7. **店舗情報**（住所・営業時間・地図を示す）: グレーの地に白のカードを置く。透かし欧文の上に和文見出しを重ね、バッジ・項目リスト・地図・ボタン 2 つを並べる。 8. **他店舗の紹介**（近隣店舗へ誘導する）: 写真・店舗名・住所・チップ・ボタン 2 つを区切り線で繰り返す。 9. **キャラクター紹介**（親しみとブランドの個性を出す）: ピンクの地に大きな欧文名を置き、全身写真に重ねてマゼンタの帯で自己紹介を載せる。下に SNS のピルボタンと主ボタン。 10. **フッター**（ナビゲーションと法的表記）: 白地に中央揃えのロゴと欧文のメニュー、言語切替、墨色の全幅ボタン、線の円形 SNS アイコンを置く。 ## Imagery - マスコットは擬人化した動物にし、ピンクの柄スーツを着せて切り抜き写真で使う。 - 商品はピンクの単色背景で、柔らかい光の物撮りにする。 - 店内は線画のアイソメトリックイラストで描き、壁や棚をピンクに着色する。 - 背景の装飾は、地名の漢字を白い細い輪郭線で巨大に描く。 - 店舗の外観写真は正面から撮り、実際の明るさのまま使う。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では FV の欧文と日付を 1 行に収め、要素の重なりを横長に広げる。 - PC の商品グリッドは 4 列にする。 - PC の店舗カードは 2 枚を横に並べ、他店舗は写真を左・情報を右に置く。 - 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-1265648d`（元 LP の URL から採番） - **元 LP**: https://komehyo.jp/p/landing/shinsaibashi/open/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。