漆黒×白の極太タイポ相撲体験 LP

Black Monochrome Bold Sumo Experience LP

黒い地に白文字の極太見出しを大きく置き、訪日客向け体験の本物らしさを押し出す LP。写真と動画が主役で、和柄イラストと筆文字ロゴが和のアクセントになる。白い帯は特長の列挙にだけ使う。

旅行・観光・ホテル力強い・インパクト和風シンプル・ミニマルラグジュアリー・ダークSPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

ページの地は純黒。面積の約8割を黒にする
黒地の文字は白だけ。色付きの文字は使わない
明るい帯は特長リストとカードだけに使い、黒の中で一度だけ反転させる
色味は写真・和柄イラスト・SNS アイコンに任せる
オレンジの差し色はデバイスの枠など、ごく小さな面積に限る

TYPOGRAPHY

書体

display縦に積む巨大なスローガン欧文サンセリフ／ Anton 400 ／ 88px ／行間 0.95

あなたの LP を、もっと伝わる形に。Aa 123

headline-lgファーストビューの字間を広げたキャッチ欧文サンセリフ／ Anton 400 ／ 36px ／行間 1.1

あなたの LP を、もっと伝わる形に。Aa 123

headline-mdリード見出し（細めのグロテスク）欧文サンセリフ／ Inter Tight 500 ／ 28px ／行間 1.1

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm特長項目の見出し欧文サンセリフ／ Inter Tight 800 ／ 28px ／行間 1.1

あなたの LP を、もっと伝わる形に。Aa 123

accent和文ロゴ・筆文字装飾・ディスプレイ／ Dela Gothic One 400 ／ 32px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

body-lgカード内・特長の説明文欧文サンセリフ／ Arimo 400 ／ 14px ／行間 1.35

あなたの LP を、もっと伝わる形に。Aa 123

note黒地の小さな補足文・住所欧文サンセリフ／ Arimo 400 ／ 8px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonカード見出しなど字間の広い太字欧文サンセリフ／ Archivo Black 900 ／ 16px ／行間 1.15

あなたの LP を、もっと伝わる形に。Aa 123

巨大な見出しはコンデンス体で画面幅いっぱいに置き、改行で縦に積む
リード見出しは字間を詰めたグロテスク体の中太で中央揃えにする
本文は極小にして、見出しとのサイズ差を極端に付ける
和文は筆文字・ロゴの装飾だけに使う
すべて中央揃え。ただしアクセス情報だけは左揃え

PAGE STRUCTURE

セクション構成

ファーストビュー体験の迫力を一目で伝える全幅の稽古写真の上にロゴヘッダー、下部に SNS アイコン
ブランド紹介世界観とキャッチを示す黒地に白の門構えイラスト、和文ロゴ、字間の広い英文キャッチ
リード本物の体験であることを宣言する大きな余白の後に中太見出しと極小の本文
スローガン価値を3語で刻む画面幅いっぱいの極太見出しを縦に積む
コンセプト説明ショーではない理由を説明する中央揃えの見出しと小さな本文、最後に区切り線
動画実際の取組を見せる全幅動画と再生アイコン
体験内容できることを4つ示す明るい帯に太字見出しと1行説明を4組並べる
ビジュアルバナー和の世界観で記憶に残す墨絵の松・富士・金雲を背景に、スマホ型の動画フレームを重ねる
立地紹介商店街の魅力を伝える巨大見出しの下に、問いかけ見出し・動画・本文を入れた白カード
アクセス行き方を案内する見出し、地図、ロゴ付きの住所と最寄駅リスト

COMPONENTS

部品

ロゴヘッダー header-bar黒半透明の帯に筆文字ロゴと家紋風マーク、右端に言語切替
SNS・予約アイコン列 social-iconsFV の写真の下部に、円形・正方形の外部リンクアイコンを3つ並べる
積み上げ巨大見出し stacked-slogan一語ずつ改行して画面幅いっぱいに置く白のコンデンス体
特長テキスト項目 feature-item明るい帯の上に太字見出しと1行説明を縦に繰り返す
白カード info-card黒地に浮かせた白カード。字間を広げた見出し、動画、本文を入れる
力士シルエット区切り divider-wrestler左端に白い小さな力士アイコンを置き、全幅の細線を引く
動画ブロック video-embed全幅の動画に中央の円形再生ボタンを重ねる
アクセス情報 access-block左揃えのロゴ、住所、●見出し付きの最寄駅リスト

守ること

地は純黒、文字は白に保つ
スローガンは画面幅いっぱいの極太コンデンス体にする
写真は本物の現場感がある迫力のある一瞬を選ぶ
和の要素は筆文字ロゴと墨絵調イラストに絞る
明るい面は特長とカードに限る

DON'T

避けること

パステル色やグラデーションの背景は使わない
ボタンや見出しに装飾的な色を付けない
影・角丸の強いポップな部品は使わない
本文を大きくして見出しとのサイズ差を弱めない
観光ショー風の派手なイラストは使わない

DESIGN.MD

design.md 全文

読みやすい形で表示する

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 独自の章。上から順に、カッコ内が各セクションの役割。

ファーストビュー（体験の迫力を一目で伝える）: 全幅の稽古写真の上にロゴヘッダー、下部に SNS アイコン
ブランド紹介（世界観とキャッチを示す）: 黒地に白の門構えイラスト、和文ロゴ、字間の広い英文キャッチ
リード（本物の体験であることを宣言する）: 大きな余白の後に中太見出しと極小の本文
スローガン（価値を3語で刻む）: 画面幅いっぱいの極太見出しを縦に積む
コンセプト説明（ショーではない理由を説明する）: 中央揃えの見出しと小さな本文、最後に区切り線
動画（実際の取組を見せる）: 全幅動画と再生アイコン
体験内容（できることを4つ示す）: 明るい帯に太字見出しと1行説明を4組並べる
ビジュアルバナー（和の世界観で記憶に残す）: 墨絵の松・富士・金雲を背景に、スマホ型の動画フレームを重ねる
立地紹介（商店街の魅力を伝える）: 巨大見出しの下に、問いかけ見出し・動画・本文を入れた白カード
アクセス（行き方を案内する）: 見出し、地図、ロゴ付きの住所と最寄駅リスト

Imagery

本物の稽古や取組を至近距離で撮った写真。照明は自然、現場感を残す
外国人観客が見守る稽古場の全景で、体験の様子を伝える
墨絵調の松・富士山・雲に金箔を散らした和柄イラスト
白一色の線画で描いた門構えと力士のロゴイラスト
小さな力士シルエットのピクトを区切りに使う
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC は中央寄せで、巨大見出しは幅に合わせて改行を減らす
PC の体験内容は左にテキストリスト、右にビジュアルバナーの2カラム
PC のカードは幅を約60%に絞って中央に置く
PC のアクセスは左に地図、右に住所情報の2カラム
SP は全セクションを1カラムで縦に積む

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。

---
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/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://www.sunamachi-sumo.com/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

旅行・観光・ホテル深緑×朱×青緑の色面切替アウトドア観光LPColorful Outdoor Tourism Campaign LP 旅行・観光・ホテル波線と青の爽やかサイクル列車案内 LPOcean Wave Blue Cycling Rail Guide LP 旅行・観光・ホテル水彩空色×橙の観光アプリ紹介LPWatercolor Sky Travel App Guide LP 旅行・観光・ホテル深緑×生成りの地域体験旅行 LPOutdoor Green Editorial Travel LP 旅行・観光・ホテル生成りと淡彩の和モダン温泉観光 LPSeasonal Japanese Seaside Travel Editorial LP 旅行・観光・ホテル金枠×藍帯の和風巡礼スタンプラリー LPPilgrimage Digital Stamp Rally Campaign LP