--- version: alpha name: Black Monochrome Bold Sumo Experience LP description: 黒い地に白文字の極太見出しを大きく置き、訪日客向け体験の本物らしさを押し出す LP。写真と動画が主役で、和柄イラストと筆文字ロゴが和のアクセントになる。白い帯は特長の列挙にだけ使う。 colors: background: '#000000' primary: '#FFFFFF' background-alt: '#FFFFFF' surface: '#FEFEFE' text: '#000000' line: '#CCCFC3' accent-1: '#89551D' accent-2: '#F26522' accent-3: '#2E4A7A' tint-1: '#FBFAF4' marker: '#C9A24A' on-dark: '#EFEDE5' typography: display: fontFamily: Anton fontSize: 88px fontWeight: 400 lineHeight: 0.95 letterSpacing: -0.02em headline-lg: fontFamily: Anton fontSize: 36px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.08em headline-md: fontFamily: Inter Tight fontSize: 28px fontWeight: 500 lineHeight: 1.1 letterSpacing: -0.04em headline-sm: fontFamily: Inter Tight fontSize: 28px fontWeight: 800 lineHeight: 1.1 letterSpacing: -0.05em accent: fontFamily: Dela Gothic One fontSize: 32px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em body-lg: fontFamily: Arimo fontSize: 14px fontWeight: 400 lineHeight: 1.35 note: fontFamily: Arimo fontSize: 8px fontWeight: 400 lineHeight: 1.3 label-button: fontFamily: Archivo Black fontSize: 16px fontWeight: 900 lineHeight: 1.15 letterSpacing: 0.12em rounded: sm: 0px md: 6px lg: 8px full: 999px spacing: unit: 8px card: 12px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' header-bar: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.accent}' height: 34px social-icons: rounded: '{rounded.full}' height: 56px stacked-slogan: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.display}' height: 240px feature-item: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 80px info-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-lg}' rounded: '{rounded.md}' height: 610px divider-wrestler: textColor: '{colors.line}' height: 30px video-embed: backgroundColor: '{colors.background}' height: 340px access-block: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 260px --- # DESIGN.md — 漆黒×白の極太タイポ相撲体験 LP（Black Monochrome Bold Sumo Experience LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 旅行・観光・ホテル ／ **雰囲気**: 力強い・インパクト、和風、シンプル・ミニマル、ラグジュアリー・ダーク - **キーワード**: 漆黒・極太コンデンス・本物志向・モノクロ・和の筆文字・動画主役 - **地の質感**: 装飾のないフラットな黒の面。質感は写真と墨絵調イラストだけが受け持つ - **形**: 直線と矩形が基本。白カードだけに小さな角丸を付ける - **温度感**: 冷たく硬派。写真の土俵色で少しだけ温度を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#000000` | ページ全体の地色 | | 画素の実測 | | `primary` | `#FFFFFF` | 見出し・ロゴの白文字 | | 画素の主要色に補正 | | `background-alt` | `#FFFFFF` | 特長リストの明るい帯 | | 画素の実測 | | `surface` | `#FEFEFE` | 白カード面 | | 画素の実測 | | `text` | `#000000` | 明るい面の上の見出し・本文 | | 画素の実測 | | `line` | `#CCCFC3` | セクションを区切る細い白線 | | 画素の主要色に補正 | | `accent-1` | `#89551D` | 土俵の土色（写真の主調） | | 画素の主要色に補正 | | `accent-2` | `#F26522` | スマホ枠などのオレンジ差し色 | | 推定 | | `accent-3` | `#2E4A7A` | 和柄イラストの藍 | | 推定 | | `tint-1` | `#FBFAF4` | 和柄イラストの生成り地 | | 画素の実測 | | `marker` | `#C9A24A` | 和柄イラストの金箔 | | 推定 | | `on-dark` | `#EFEDE5` | 黒地の上の小さな本文 | | 画素の主要色に補正 | - ページの地は純黒。面積の約8割を黒にする - 黒地の文字は白だけ。色付きの文字は使わない - 明るい帯は特長リストとカードだけに使い、黒の中で一度だけ反転させる - 色味は写真・和柄イラスト・SNS アイコンに任せる - オレンジの差し色はデバイスの枠など、ごく小さな面積に限る ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 縦に積む巨大なスローガン | 欧文サンセリフ | Anton | 400 | 88px | 0.95 | -0.02em | | `headline-lg` | ファーストビューの字間を広げたキャッチ | 欧文サンセリフ | Anton | 400 | 36px | 1.1 | 0.08em | | `headline-md` | リード見出し（細めのグロテスク） | 欧文サンセリフ | Inter Tight | 500 | 28px | 1.1 | -0.04em | | `headline-sm` | 特長項目の見出し | 欧文サンセリフ | Inter Tight | 800 | 28px | 1.1 | -0.05em | | `accent` | 和文ロゴ・筆文字 | 装飾・ディスプレイ | Dela Gothic One | 400 | 32px | 1.2 | 0.05em | | `body-lg` | カード内・特長の説明文 | 欧文サンセリフ | Arimo | 400 | 14px | 1.35 | 0.0em | | `note` | 黒地の小さな補足文・住所 | 欧文サンセリフ | Arimo | 400 | 8px | 1.3 | 0.0em | | `label-button` | カード見出しなど字間の広い太字 | 欧文サンセリフ | Archivo Black | 900 | 16px | 1.15 | 0.12em | - 巨大な見出しはコンデンス体で画面幅いっぱいに置き、改行で縦に積む - リード見出しは字間を詰めたグロテスク体の中太で中央揃えにする - 本文は極小にして、見出しとのサイズ差を極端に付ける - 和文は筆文字・ロゴの装飾だけに使う - すべて中央揃え。ただしアクセス情報だけは左揃え - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は特長部だけ 2 カラム - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 80px、基本単位 8px、カード内 12px（375px 幅換算） - 写真・動画は画面幅いっぱい、または左右 8px 程度の余白で置く - 黒地のセクション間には大きな余白を取って間を作る - 見出しと説明文は近づけて、ひとかたまりで扱う - 白カードは左右 12px の余白で浮かせる ## Elevation & Depth - 影は使わずフラットにする - 奥行きは黒地と白カードのコントラストだけで出す ## Shapes - **角丸**: 小 0px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 矩形でそのまま置く。アイコンだけ円形 - **セクション境界**: 全幅の細い白線と、左端の小さな力士シルエット - 写真の角は丸めない - カードだけに小さな角丸を付ける - 斜めや波の区切りは使わない ## Components - **ロゴヘッダー**（`header-bar`）: 黒半透明の帯に筆文字ロゴと家紋風マーク、右端に言語切替 - **SNS・予約アイコン列**（`social-icons`）: FV の写真の下部に、円形・正方形の外部リンクアイコンを3つ並べる - **積み上げ巨大見出し**（`stacked-slogan`）: 一語ずつ改行して画面幅いっぱいに置く白のコンデンス体 - **特長テキスト項目**（`feature-item`）: 明るい帯の上に太字見出しと1行説明を縦に繰り返す - **白カード**（`info-card`）: 黒地に浮かせた白カード。字間を広げた見出し、動画、本文を入れる - **力士シルエット区切り**（`divider-wrestler`）: 左端に白い小さな力士アイコンを置き、全幅の細線を引く - **動画ブロック**（`video-embed`）: 全幅の動画に中央の円形再生ボタンを重ねる - **アクセス情報**（`access-block`）: 左揃えのロゴ、住所、●見出し付きの最寄駅リスト ## Do's and Don'ts **Do** - 地は純黒、文字は白に保つ - スローガンは画面幅いっぱいの極太コンデンス体にする - 写真は本物の現場感がある迫力のある一瞬を選ぶ - 和の要素は筆文字ロゴと墨絵調イラストに絞る - 明るい面は特長とカードに限る **Don't** - パステル色やグラデーションの背景は使わない - ボタンや見出しに装飾的な色を付けない - 影・角丸の強いポップな部品は使わない - 本文を大きくして見出しとのサイズ差を弱めない - 観光ショー風の派手なイラストは使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（体験の迫力を一目で伝える）: 全幅の稽古写真の上にロゴヘッダー、下部に SNS アイコン 2. **ブランド紹介**（世界観とキャッチを示す）: 黒地に白の門構えイラスト、和文ロゴ、字間の広い英文キャッチ 3. **リード**（本物の体験であることを宣言する）: 大きな余白の後に中太見出しと極小の本文 4. **スローガン**（価値を3語で刻む）: 画面幅いっぱいの極太見出しを縦に積む 5. **コンセプト説明**（ショーではない理由を説明する）: 中央揃えの見出しと小さな本文、最後に区切り線 6. **動画**（実際の取組を見せる）: 全幅動画と再生アイコン 7. **体験内容**（できることを4つ示す）: 明るい帯に太字見出しと1行説明を4組並べる 8. **ビジュアルバナー**（和の世界観で記憶に残す）: 墨絵の松・富士・金雲を背景に、スマホ型の動画フレームを重ねる 9. **立地紹介**（商店街の魅力を伝える）: 巨大見出しの下に、問いかけ見出し・動画・本文を入れた白カード 10. **アクセス**（行き方を案内する）: 見出し、地図、ロゴ付きの住所と最寄駅リスト ## Imagery - 本物の稽古や取組を至近距離で撮った写真。照明は自然、現場感を残す - 外国人観客が見守る稽古場の全景で、体験の様子を伝える - 墨絵調の松・富士山・雲に金箔を散らした和柄イラスト - 白一色の線画で描いた門構えと力士のロゴイラスト - 小さな力士シルエットのピクトを区切りに使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央寄せで、巨大見出しは幅に合わせて改行を減らす - PC の体験内容は左にテキストリスト、右にビジュアルバナーの2カラム - PC のカードは幅を約60%に絞って中央に置く - PC のアクセスは左に地図、右に住所情報の2カラム - SP は全セクションを1カラムで縦に積む ## 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-3b09c7ca`（元 LP の URL から採番） - **元 LP**: https://www.sunamachi-sumo.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（5/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。