--- version: alpha name: Retro Checker Teal & Mustard Live Tour LP description: 生成り地に、ティールと辛子色の2色で組んだお笑いライブツアーの告知LP。市松柄の背景に黒い太枠とずらし影のカードを載せ、レトロなボードゲーム風に仕上げている。日程、チケット、販売スケジュールを情報量多めに整理する作り。 colors: primary: '#00A59F' secondary: '#E3A11A' cta: '#E8A818' on-cta: '#1A1A1A' background: '#FFFEF7' surface: '#FCFCF5' tint-1: '#FAE8B9' tint-2: '#A8CBBA' text: '#121B2A' dark-section: '#2A2E2C' accent-1: '#D98E00' accent-2: '#E02020' text-muted: '#555555' line: '#E1E0CE' typography: display: fontFamily: Libre Baskerville fontSize: 40px fontWeight: 700 lineHeight: 1.1 headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Libre Baskerville fontSize: 18px fontWeight: 400 lineHeight: 1.3 headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Libre Baskerville fontSize: 10px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 3px md: 8px lg: 10px full: 999px spacing: unit: 8px card: 12px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' header-bar: backgroundColor: '{colors.dark-section}' typography: '{typography.label-button}' height: 44px section-title-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.display}' height: 80px schedule-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 210px button-primary: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 30px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 30px pref-badge: backgroundColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 16px timeline-node: backgroundColor: '{colors.primary}' rounded: '{rounded.full}' height: 14px price-list: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 50px --- # DESIGN.md — ティール×辛子の市松柄お笑いライブLP（Retro Checker Teal & Mustard Live Tour LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: レトロ、ポップ・元気、情報量多め・訴求型 - **キーワード**: 市松柄・黒太枠・ずらし影・ティール×辛子・セリフ見出し・タイムライン - **地の質感**: フラットなベタ塗り。黒の太線と、ずらしたベタ影でシルク印刷のような手触りを出す - **形**: 角が直角のカードと、角丸小さめのボタン。どちらも黒の2px枠と右下のずらし影を付ける - **温度感**: 生成りとクリーム色で温かい。ティールで爽やかさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#00A59F` | ブランドのティール（見出し・主ボタン・県名バッジ） | 8% | 画素の主要色に補正 | | `secondary` | `#E3A11A` | 辛子色（もう一方のボタン・バッジ） | 4% | 推定 | | `cta` | `#E8A818` | ヘッダーの購入ボタンと登録ボタン | 1% | 推定 | | `on-cta` | `#1A1A1A` | CTAボタン上の文字 | 0% | 推定 | | `background` | `#FFFEF7` | ページの生成り地 | 30% | 画素の主要色に補正 | | `surface` | `#FCFCF5` | カードの白面 | 20% | 画素の実測 | | `tint-1` | `#FAE8B9` | 市松柄のクリーム | 7% | 画素の主要色に補正 | | `tint-2` | `#A8CBBA` | 市松柄のセージグリーン | 6% | 画素の主要色に補正 | | `text` | `#121B2A` | 見出し・枠線・影の墨黒 | 3% | 画素の主要色に補正 | | `dark-section` | `#2A2E2C` | ヘッダーとフッターの濃色 | 3% | 推定 | | `accent-1` | `#D98E00` | 会場名など辛子系の文字 | 0% | 推定 | | `accent-2` | `#E02020` | 重要注意の赤文字 | 0% | 推定 | | `text-muted` | `#555555` | 注釈・住所の灰文字 | 1% | 推定 | | `line` | `#E1E0CE` | カード内の区切り線 | 0% | 画素の主要色に補正 | - 地は生成りにし、日程セクションだけクリームとセージの市松柄にする - ティールと辛子色をカードごとに交互に割り当て、リズムを作る - 枠線と影はすべて墨黒で統一する - グッズのような区切りセクションはティールの全面ベタにする - 赤は重要な注意文だけに使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 英字のセクション見出し | 欧文セリフ | Libre Baskerville | 700 | 40px | 1.1 | 0.0em | | `headline-lg` | リード見出し（ティール） | ゴシック | Noto Sans JP | 800 | 22px | 1.4 | 0.02em | | `headline-md` | 日付と曜日・小見出し | 欧文セリフ | Libre Baskerville | 400 | 18px | 1.3 | 0.0em | | `headline-sm` | 会場名・券種名・ステージ名 | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.02em | | `body-md` | 本文・開場時刻 | ゴシック | Noto Sans JP | 500 | 12px | 1.7 | 0.02em | | `note` | 住所・注意事項 | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.02em | | `accent` | STAGE番号などの欧文ラベル | 欧文セリフ | Libre Baskerville | 700 | 10px | 1.4 | 0.1em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 10px | 1.4 | 0.05em | - セクション見出しは大きな英字セリフにし、下に小さな和文サブを添える - 見出しの左右に線画アイコンを対で置き、左をティール、右を辛子色にする - 日付は数字を大きく、曜日を小さい大文字にする - 本文は太めのゴシックで、小さくても潰れないようにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。日程カードは 2 列グリッド - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算） - カード同士は 12〜16px 空ける - 販売スケジュールは左に縦線と丸ノードを置くタイムライン型にする - カード内は日付→区切り線→バッジ→会場→詳細→ボタンの順に並べる - ボタンはカードの最下部に全幅で置く ## Elevation & Depth - ぼかし影は使わず、墨黒のベタ影を右下へ 4〜6px ずらす - カードとボタンには黒 2px の枠線を付ける - 見出しの枠も同じ太枠＋ずらし影にする ## Shapes - **角丸**: 小 3px ／ 中 8px ／ 大 10px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物写真は角版、または背景を抜いた切り抜き - **セクション境界**: 直線で切り替え、境界に黒の細線を入れる - カードは角丸なしの直角 - ボタンは角丸 8px で、枠とずらし影を付ける - 県名や期間のバッジは角丸 3〜10px の小さいベタ ## Components - **固定ヘッダー**（`header-bar`）: 濃色の帯に英字ナビを並べ、右端に辛子色のピル型購入ボタンを置く - **枠付きセクション見出し**（`section-title-box`）: 白い箱に黒の太枠とずらし影を付け、大きな英字セリフと左右のアイコンを入れる - **公演日程カード**（`schedule-card`）: 白カードに日付、県名バッジ、会場名リンク、時刻、主催、ボタンを入れる。色は交互に変える - **ティールボタン**（`button-primary`）: 白い太字の文字に黒枠とずらし影を付け、外部リンクのアイコンを添える - **辛子色ボタン**（`button-secondary`）: 墨黒の文字を載せた辛子色のボタン。形はティールボタンと同じ - **県名・期間バッジ**（`pref-badge`）: 小さな角丸のベタ地に白字で、ラベルを短く入れる - **タイムライン丸ノード**（`timeline-node`）: 縦の黒線上に、黒枠付きの色丸を置く。各ステージのカードがここに連なる - **券種と価格**（`price-list`）: 色付きの券種名の下に、価格を大きく太字で置く ## Do's and Don'ts **Do** - ティールと辛子色を交互に使う - カードとボタンには必ず黒枠とずらし影を付ける - 日程まわりの背景は市松柄にする - 英字見出しはセリフ体で大きく組む **Don't** - ぼかしのドロップシャドウを使わない - ピンクや紫など第三の強い色を足さない - グラデーションの背景を多用しない - カードを大きな角丸にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ナビと購入導線を常に見せる）: 濃色の帯にロゴ、英字ナビ、辛子色のボタンを並べる 2. **ファーストビュー**（公演の世界観を伝える）: クリーム地に人物写真と、ボードゲームの駒を表すコインを散らし、左にロゴを置く 3. **イントロ**（公演の概要と導線）: ティールの見出しと中央揃えの本文を置き、色違いのボタンを2つ並べる 4. **スケジュール**（全公演の日程と会場）: 市松柄の背景に枠付き見出しを置き、2列の日程カードを並べる 5. **チケット料金**（券種と価格を示す）: 生成り地に色付きの券種名と大きな価格を置き、灰色の注釈を添える 6. **販売スケジュール**（先行受付の流れを示す）: 縦タイムラインに STAGE ごとのカードを並べ、ボタンを横に複数置く 7. **注意事項・問い合わせ**（規約と連絡先）: 小さな文字の箇条書きを、区切り線で分ける 8. **グッズ**（近日公開を予告する）: ティール全面の上に見出しを置き、淡色のセリフ体で予告の一文を入れる 9. **ファンクラブ訴求**（会員登録の誘導）: 宇宙風の濃紺写真の上に白カードを重ね、月額・年額の価格と辛子色の CTA を置く ## Imagery - 人物は明るいクリーム背景で、動きのある全身ポーズを撮る - 盤やコインなどの立体小物をティールとクリームで揃えて散らす - アイコンは線画で、ピンやチケットなどの形にする - 訴求セクションは濃紺の宇宙風背景の写真にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では日程カードを 3 列にする - PC はコンテンツ幅を約 900px で中央に寄せ、左右は市松柄を見せる - タイムラインとカード構造は SP・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-7567703e`（元 LP の URL から採番） - **元 LP**: https://nonstyle.yoshimoto.co.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（1/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。