DESIGN.md — 紺×チャコール×金の紳士向け香りコスメ LP（Classic Gentleman Fragrance Body Care LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、レトロ
• キーワード: 英国紳士・クラシック・額縁装飾・幾何学パターン・金アクセント・欧文セリフ
• 地の質感: 菱形・格子の幾何学柄を薄く敷いた地に、マットな単色パネルを重ねる。チェーン柄の細い帯で区切る。
• 形: 角丸なしの長方形パネル。四隅に金の唐草飾り。V 字の切り込みでステップを区切る。
• 温度感: 寒色寄りのニュートラル。紺・チャコールに金とベージュで少し温かみを足す。

Colors

• 明るいセクション（グレー・ベージュ）と暗いパネル（チャコール・オリーブ）を交互に重ね、奥行きを出す。
• セクション地には同系色の幾何学柄を薄く敷く。単色ベタ地にしない。
• 購入ボタンだけをくすみ金で塗る。鮮やかな黄色やオレンジは使わない。
• 金は額縁の四隅飾りと細い線に限って使う。
• 暗いパネル上の文字は白、明るい地の文字は墨色 #2F2F2F にする。
• 在庫切れボタンは白地＋黒文字にして、購入ボタンと区別する。
• button-cart は文字 #F6F4F3 × 背景 #9D9163 のコントラスト比が 2.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#79704C、4.52:1）を使う。

Typography

• 大見出しは欧文セリフの大文字で書き、下に小さな和文の補足を添える。
• 和文の見出しとキャッチは明朝の太字にして格調を出す。
• 商品名・価格・ボタンはゴシックで中央揃えにする。
• ステップ番号は背景に大きく薄い斜体数字で置き、見出しと重ねる。
• 本文は中央揃えで 1 行を短くし、改行して整える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、中央揃え
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 50px、基本単位 8px、カード内 28px（375px 幅換算）
• セクション内に幅 88% の暗いパネルを置き、左右に柄地をのぞかせる。
• パネル内は見出し→写真→商品名・価格→ボタン→詳細リンクの順に縦に並べる。
• ミニサイズ商品はチェーン柄の額縁内に、画像左・情報右の横並びで置く。
• セクションの境目には細いチェーン柄の帯を入れる。
• その他ラインナップは円形写真のカルーセルにし、左右に矢印を置く。

Elevation & Depth

• 影はほぼ使わない。面の明暗差と枠線で階層を表現する。
• 額縁は二重線か、銀のチェーン柄ボーダーで立体感を出す。
• カードは柄地の上にベタ色で重ねるだけにする。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品写真は正方形の角切り。カルーセルの写真だけ円形に抜く。
• セクション境界: チェーン柄の細い帯と、パネル内の V 字（シェブロン）の切り込み
• ボタンは角丸なしの長方形にする。
• パネルの四隅に金の唐草コーナー飾りを置く。
• カードの角は八角形風に斜めに落としてもよい。
• LINE ボタンだけは小さな角丸（約 6px）を許容する。

Components

• カートボタン（button-cart）: くすみ金の長方形で白文字、右端に＞を付ける。幅は約 55%。
• 詳細リンク（link-detail）: 下線付きの太字テキストに、丸い矢印アイコンを添える。
• 在庫なしボタン（button-soldout）: 白地に黒文字の無効状態ボタン。
• 額縁パネル（panel-framed）: 暗色の大パネル。四隅に金の装飾を置き、内側に商品ステップを並べる。
• チェーン枠ミニ商品カード（card-mini-chain）: 銀のチェーン柄で囲んだ黒カード。左に商品画像、右に価格とボタンを置く。
• ステップ見出し（heading-step）: 小さな「- Step n -」の上に大きな明朝の動詞を置き、背後に薄い斜体数字を重ねる。
• 香り詳細アコーディオン（accordion-fragrance）: 上下を細線で区切った開閉行。開くと香りピラミッド図を表示する。
• 円形写真カルーセル（carousel-circle）: 白い円に商品写真を載せ、左右に細い矢印、下にドットを置く。
• LINE 登録バナー（banner-line）: チェーン枠のグレー箱に、緑の LINE ボタンを置く。

Do's and Don'ts

Do - 地には幾何学柄を敷き、その上に無地パネルを重ねる。 - 見出しは欧文セリフ大文字＋和文の補足の 2 段にする。 - 金は CTA と装飾線だけに絞る。 - 商品ブロックは中央揃えの縦積みで統一する。 - セクションの境目にはチェーン柄帯や V 字の切り込みを入れる。

Don't - ピル型や大きな角丸のボタンにしない。 - ビビッドな赤・黄色で値引きを強く訴求しない。 - 丸ゴシックや手書き書体を使わない。 - ドロップシャドウを強くかけない。 - LINE の緑以外に彩度の高い色を足さない。

Page Structure

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

1. ファーストビュー（シリーズの世界観と香りの方向性を伝える）: 濃紺のパネル壁を背景に、商品のギフトセットを写真で見せる。上部に装飾罫と欧文セリフのタイトル、明朝のサブコピーを置く。
2. 香りの紹介（香りの特徴とノート構成を説明する）: 薄グレーの柄地に欧文見出し、アコーディオン、中央揃えの説明文を置く。素材写真とピラミッド図で香調を示す。
3. ボディ商品ライン（ステップ）（使う順番に沿って商品を提案する）: グレー柄地にチャコールの額縁パネルを置く。Step1・2 を V 字で区切り、各ステップに写真・価格・カートボタン・ミニサイズカードを並べる。
4. フェイス商品ライン（顔用アイテムを訴求する）: ベージュ柄地に、オリーブブラウンの額縁パネルを商品ごとに置く。明朝のキャッチ、写真、価格、ボタンを縦に並べる。
5. その他ラインナップ（同じ香りの雑貨商品へ回遊させる）: 黒の格子柄地に、角を落とした淡グレーカードを置く。中は円形写真のカルーセル。
6. LINE 登録（公式アカウントの友だちを獲得する）: チャコール地に、チェーン枠のグレー箱と緑の LINE ボタンを置く。
7. シェア（SNS での拡散を促す）: グレーの幾何学柄地に、二重線の枠の箱を置く。欧文見出しの下に小さなシェアボタンを並べる。
8. フッター（サイトナビと SNS 導線を示す）: 生成り地にアコーディオン型のメニューを並べ、白地に SNS アイコンとコピーライトを置く。

Imagery

• 商品は白いタイル壁や大理石の上で、銀のトレイ・懐中時計・カフスなど紳士小物と一緒に撮る。
• 暗めのカットは黒い布と金具を背景にし、ローキーで光沢を出す。
• 香りの素材は白背景の切り抜き写真にし、小さく並べる。
• 飛び散る柑橘などの動きのある素材は、淡いグレーのグラデーション背景で撮る。
• 装飾は唐草のコーナー飾り、チェーン柄ボーダー、細い渦巻き罫を使う。
• 背景柄は菱形・四角の格子を重ねた、低コントラストの幾何学柄にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅約 60% のパネルを中央に置き、左右に柄地を広く見せる。
• PC の FV は横長の帯にし、左にタイトル、右に商品写真を置く。
• PC の商品ステップは写真左・テキスト右の 2 カラムにする。
• PC のカルーセルは 3 点を同時に表示する。
• PC のフッターは 5 列のリンク一覧と SNS 列にする。

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 行書くと起動時に読み込まれる。