DESIGN.md — 和紙地に伝統色ブロックの眼鏡 LP（Japanese Traditional Color Eyewear LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 和風、上品・高級、シンプル・ミニマル、ナチュラル
• キーワード: 和モダン・伝統色・縦書き・和紙テクスチャ・大型欧文見出し・和柄
• 地の質感: 白地に薄い和紙の繊維模様。商品セクションはベタ塗りに斜めの淡い影面と和柄の帯を重ねる
• 形: 角丸小さめの白カード、円形の和柄フレームボタン、四隅のL字ブラケット装飾
• 温度感: 温かみのある落ち着いた色調。緑が軸で、黄と赤が季節感を足す

Colors

• 地は和紙調の白。色面は商品セクションだけに使う
• 商品ごとに伝統色（緑・山吹・臙脂）の全幅ブロックを割り当てる
• 色面の右端に、同系色の和柄帯を縦に入れる
• 黄緑はアクセントにだけ使う（番号の円、小さいボタン、括弧の装飾）
• 色面上の文字は白、白地の文字は墨色にする
• オレンジは保証表の強調にだけ使う
• number-circle は文字 #FFFFFF × 背景 #BDC515 のコントラスト比が 1.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#767B0D、4.56:1）を使う。
• bar-button は文字 #FFFFFF × 背景 #BDC515 のコントラスト比が 1.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#767B0D、4.56:1）を使う。

Typography

• キャッチコピーは縦書きの明朝にし、白地に黒枠の帯で囲む
• 大型欧文はセクションの端にはみ出す位置か、縦に配置する
• 色名は漢字の縦書きにし、ルビを小さく添える
• 本文は小さめのゴシックで、行間を広く取る
• 価格は明朝で大きく、税込表記を小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、カラー違いのカードは 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 商品ブロックは全幅の色面にし、右 20% を和柄帯にする
• 商品写真は色面の枠からはみ出して大きく置く
• 縦書きコピーと型番は左右対称の位置に配置する
• 白地のセクションは四隅の L 字ブラケットで囲む
• 保証は番号付きの 2 列ブロックを細い罫線で区切る

Elevation & Depth

• 影はほぼ使わず、フラットな面で構成する
• 白カードは色面の上に影なしで置く
• 円形ボタンは和柄の太いリングで縁取る

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜き写真。人物写真は角丸なしの横長長方形
• セクション境界: 色面は直線で切り替え、内部に斜めの淡い影面を入れる
• カードの角丸は小さく抑える
• 保証の補足ラベルだけピル型の枠線にする
• 番号は黄緑の正円に入れる
• 店舗・EC への導線は和柄リング付きの大きな円にする

Components

• 縦書きキャッチ帯（vertical-catch）: 白地に黒枠の縦長の帯を 2 本ずらして並べ、明朝で書く
• 大型欧文見出し（giant-latin-heading）: 細身セリフの緑の大文字。画面端にはみ出すか縦に置く
• カラー違いカード（color-card）: 白い角丸カードに眼鏡の写真。上に縦書きの色名、下に VIEW MORE
• 和柄帯（pattern-band）: 色面の右側に置く、同系色の和柄の縦帯
• 円形導線ボタン（circle-link）: 白い円を黄緑の和柄リングで囲み、中に小さな欧文ラベルと案内文を入れる
• 番号サークル（number-circle）: 黄緑の正円に欧文の小ラベルと 2 桁の番号
• 保証バー（bar-button）: 黄緑またはオレンジの横長バーに白文字。期間を示す
• L字ブラケット（corner-bracket）: セクションの四隅に置く黄緑の太い L 字

Do's and Don'ts

Do - 商品ごとに伝統色の色面を切り替える - 縦書きの明朝で和の情緒を出す - 和紙の質感がある白地を使う - 商品写真は大きく、色面からはみ出して置く - 和柄はアクセントの帯や円に限って使う

Don't - ネオン色や原色の青を主役にしない - 濃い影や立体的なボタンを使わない - 欧文見出しを太いゴシックにしない - 和柄をページ全面に敷き詰めない - 大きなピル型の CTA を多用しない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（商品群の色の豊かさを見せる）: カラフルなフレームを並べた俯瞰写真に、大きな緑の欧文ロゴを重ねる
2. コンセプト（ブランドの思想を伝える）: 切り抜きの商品写真、縦書きのキャッチ帯、和柄の円、短い本文で構成する
3. 特長（機能と色の魅力を伝える）: 縦に置いた大型欧文、POINT 番号付きの白カード 2 枚、短い説明
4. 商品1（型番 1 の紹介）: 緑の全幅色面に、型番、価格、縦書きコピー、大きな商品写真、カラー違いのカードを置く
5. 商品2（型番 2 の紹介）: 山吹色の面。和柄帯を左に置き、レイアウトを左右反転する
6. 商品3（型番 3 の紹介）: 臙脂の面に赤系の和柄帯を合わせる
7. 購入導線（店舗と EC への誘導）: 和柄リング付きの円形ボタンを 2 つ並べる
8. ギャラリー（着用イメージを見せる）: 人物写真を左に大きく置き、縦書きの欧文と左右の矢印ボタンを添える
9. 安心保証（購入の不安を取り除く）: L 字ブラケットで囲み、大きな数字の見出し、番号付きの保証 3 項目と期間バーを並べる
10. フッター CTA（最後の誘導）: 緑の面に円形ボタンを 2 つ置き、ロゴで締める

Imagery

• 商品は白背景で切り抜き、斜め上からの物撮りにする
• フレームを色違いで並べた俯瞰写真
• 人物は明るい屋外で撮った自然体のカジュアルな着用写真
• 和柄（麻の葉、七宝、青海波など）は同系色の濃淡で描く
• 和紙の繊維模様を背景にうっすら敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は商品の色面を全幅にし、右 20% に和柄帯を置く。SP では帯を上部の細い横帯にする
• PC で横に並べた縦書きコピーと説明文は、SP では縦に積み、縦書きは短く保つ
• カラー違いのカードは PC・SP とも 2 列
• 大型欧文は SP で 48〜56px にし、画面からはみ出しても構わない
• 保証の 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 行書くと起動時に読み込まれる。