DESIGN.md — 紺×グレージュの父の日ギフト衣料 LP（Calm Navy Gift Guide Apparel LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、シンプル・ミニマル、やさしい・柔らかい、ナチュラル
• キーワード: 平置き写真・くすみカラー・紺のアクセント・番号バッジ・欧文見出し・余白多め
• 地の質感: グレーや紺の無地の背景に商品を真上から撮ったマットな写真。装飾は細い線だけにする
• 形: 四角い写真を全幅で配置。丸い番号バッジ、角が小さい長方形のボタン、最後だけピル型
• 温度感: やや寒色寄りのニュートラル。穏やかで静か

Colors

• 地の色は白。色面は写真の背景（グレーと紺）だけで作る
• グレーの写真と紺の写真をセクションごとに交互に並べる
• ボタン・番号バッジの線・区切り線は紺で統一する
• 写真上の装飾文字は緑か白の 1 色にする
• 末尾のギフト案内は、くすみ青と細い枠で柔らかく見せる
• 原色や強い赤は使わない
• gift-card-box は文字 #839AB5 × 背景 #FFFFFF のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#5C789A、4.56:1）を使う。

Typography

• 見出しは欧文だけにして日本語は本文に回す
• 本文はすべて中央揃えで、1 行を短く改行する
• 写真上の欧文は弧状に配置して手書き風の柔らかさを出す
• 太字は見出しだけに使う
• ギフト案内だけセリフ体と筆記体を組み合わせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、写真は全幅
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 32px（375px 幅換算）
• シリーズごとに番号バッジ→全幅写真→見出し→説明 2〜3 行→ボタンの順に並べる
• 番号バッジは写真の上端の線にまたがせて置く
• 写真の前後には十分な白い余白を取る
• ボタンは中央に置き、幅は画面の約 3 割にする

Elevation & Depth

• 影は使わずフラットにする
• 奥行きは写真の明暗と余白だけで出す

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 32px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅の長方形。角丸なし
• セクション境界: 紺の細い横線と中央の丸い番号バッジ
• シリーズのボタンは角がほぼない小さな長方形
• 最後の一覧ボタンだけ大きなピル型
• 番号は白地に紺の線の正円で囲む
• ギフトカードは細い線で囲んだ枠に入れる

Components

• 番号バッジ（number-badge）: 紺の細線の円に数字を入れ、区切り線の中央に置く
• 区切り線（section-rule）: 写真上端に沿った紺の 2px 線
• 商品確認ボタン（button-check）: 紺地に白の大文字欧文を入れた小さな長方形
• 一覧ボタン（button-primary）: 幅約 8 割の紺のピル型。太い白文字
• 弧状の欧文ラベル（arc-label）: 写真の上に弧を描いて置く素材名・テーマ名
• ギフトカード案内枠（gift-card-box）: 細線の枠に筆記体とセリフ体の見出し、くすみ青の画像、中央揃えの文章を入れる
• シリーズ説明（series-caption）: 欧文見出しと 2〜3 行の説明文を中央揃えで置く

Do's and Don'ts

Do - 写真の背景はグレーと紺の 2 色に絞って交互に並べる - 商品は真上からの平置きで、整然と並べるかラフに散らす - 見出しは欧文、説明文は短い日本語にする - ボタンは小さく控えめにして写真を主役にする - セクション間の白い余白を広く取る

Don't - 派手なグラデーションやドロップシャドウを使わない - 赤や黄色の強いセール色を入れない - ボタンを大きく目立たせすぎない - 本文を左揃えの長い文章にしない - 写真に角丸や枠を付けない

Page Structure

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

1. ファーストビュー（ギフト特集であることを伝える）: グレー背景の平置き写真の上に、白い欧文タイトルとギフトアイコンを重ねる
2. 導入文（贈る気持ちに寄り添う）: 白地に中央揃えの短い文を 5 行ほど並べる
3. 商品シリーズ 1（キャラクター柄のシリーズを紹介）: 番号バッジ、グレー背景の写真、欧文見出し、説明、ボタンの順
4. 商品シリーズ 2（機能素材のセットアップを紹介）: 紺背景の写真に弧状の素材名を重ねる
5. 商品シリーズ 3〜6（シリーズを順に紹介）: グレーと紺を交互にして同じ型を繰り返す
6. 一覧 CTA（全商品へ誘導）: 紺の大きなピル型ボタンを中央に置く
7. ギフトカード案内（ラッピング特典を伝える）: 細線の枠の中に、筆記体とセリフ体の見出し、くすみ青のカード画像、説明文を入れる

Imagery

• 無地のグレーか紺の背景に、商品を真上から平置きで撮る
• 柔らかな自然光で、影は薄くする
• 服はくすみカラーでまとめ、色数を絞る
• 箱やスリッパなどの小物を添えてギフト感を出す
• 写真上の装飾は弧状の欧文 1 つだけにする
• ギフトカードは単色のくすみ青のイラストにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は写真の最大幅を 1000px 前後にして中央に寄せる
• PC では写真と説明文を左右交互の 2 カラムにしてもよい
• 区切り線と番号バッジは PC でも同じ形を保つ
• PC では文字サイズを 1.2 倍ほどにする

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