DESIGN.md — グレージュ×桜色の上品なフォトウェディングLP（Soft Greige Elegant Photo Wedding LP）

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

Overview

• 業種: ウェディング・冠婚葬祭 ／ 雰囲気: 上品・高級、やさしい・柔らかい、シンプル・ミニマル
• キーワード: 余白多め・欧文セリフ見出し・淡いピンクベージュ・写真主体・ピル型ボタン・アーチ切り抜き
• 地の質感: フラットな淡色面と高彩度の写真の対比。影はほぼ使わない。
• 形: 四角い写真を基本に、アーチ型や大きな角丸の切り抜きを差し色的に使う。ボタンは完全なピル型。
• 温度感: 暖かめのニュートラル。ベージュとくすみピンクで柔らかい。

Colors

• 地は白を基本に、ピンクベージュとグレージュの面をセクションごとに切り替える。
• ボタンはすべて同じベージュのピル型で統一する。
• くすみピンクは写真の背後にずらして敷く帯として限定的に使う。
• 黒は選択中タブとスライダー矢印など小面積のみ。
• 文字は純黒でなく濃い墨色、補足は灰色。
• 高彩度の色は写真とバナーに任せ、UIには使わない。

Typography

• 見出しは欧文セリフ大文字＋和文明朝サブコピーの2段構成。
• 本文も明朝で統一し、行間は2倍前後と広く取る。
• 和文は字間を0.08〜0.15em広げ、ゆったりさせる。
• 太字は使わず、細めのウェイトで上品さを保つ。
• 白や淡色の大きな透かし英字を写真に重ねる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、プラン・ポイントは 2 カラムグリッド
• 本文ブロックの幅: 画面幅の約 91%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出し・本文・ボタンは左揃えが基本、Q&Aやコンセプトは中央揃え。
• 左右余白は約16px。
• セクションは淡色面の切り替えで区切る。
• 写真の背後にピンク帯をずらして敷き、奥行きを出す。
• ニュース・レポートは横スクロールのカルーセル。

Elevation & Depth

• 影はほぼ使わずフラット。
• 奥行きは色面のずらし重ねで表現する。
• コンセプトは写真に白の半透明を重ねて文字を載せる。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 基本は角なしの長方形。アクセントとしてアーチ型や一角だけ大きく丸めた切り抜きを使う。
• セクション境界: 直線の色面切り替え。コンセプト上部はゆるい弧状のカーブ。
• ボタンは完全なピル型。
• FAQはrに8px程度の角丸カード。
• タブは角なしの細枠ボックス。
• 写真は角を丸めない。

Components

• もっと見るピルボタン（button-more）: ベージュのピル型。中央に文字、右端に細い長い矢印。
• 欧文＋和文見出し（section-heading）: 欧文セリフ大文字の下に2行の明朝サブコピーを置く。
• プラン切替タブ（plan-tab）: 3つ並ぶ細枠ボックス。選択中は黒塗り白文字。
• プランカード（plan-card）: 横長写真の下に中央揃えのプラン名、価格、税込注記。
• FAQアコーディオン（faq-item）: 淡色面の角丸カード。左にピンクのQ、右に細い＋。
• スライダー矢印（slider-arrow）: 黒の小さな正方形に白矢印、写真の左右端に重ねる。
• おすすめポイントカード（point-card）: 白い正方形に線画イラスト、下に欧文ラベルと和文小見出し、下線。
• もっと見るテキストリンク（more-link）: 見出し右に置く、四角アイコン付き下線リンク。

Do's and Don'ts

Do - 余白を広く取り、写真を主役にする。 - ボタンはベージュのピル型で統一する。 - 見出しは欧文セリフ＋和文明朝で組む。 - 写真の背後に淡色帯をずらして重ねる。 - セクション地を白・ピンクベージュ・グレージュで交互にする。

Don't - 原色や蛍光色をUIに使わない。 - 太いゴシック体や太字の強調を多用しない。 - 強いドロップシャドウを付けない。 - ボタンの色や形をセクションごとに変えない。 - 本文の行間を詰めない。

Page Structure

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

1. ファーストビュー（世界観と実績を一目で伝える）: 全幅の華やかな撮影写真に、筆跡風の淡色帯で訴求コピーを重ね、下にグレージュ帯のキャッチと縦書きスクロール表示。
2. キャンペーンバナー（フェアや割引を告知）: パンくず下にバナーのカルーセル、黒い四角矢印。
3. プラン（料金と種類を比較させる）: 欧文見出し＋説明、3タブ、2カラムの写真カードに価格、もっと見るボタン、別プランのバナー。
4. 衣装紹介（衣装の魅力を伝える）: ピンクベージュ地に上角丸の2×2写真グリッド、白の透かし英字を重ねる。
5. ギャラリー（作例を見せる）: 透かし英字の下に長方形とアーチ型の写真を並べ、見出しとボタン。
6. スタジオ・ロケーション（撮影場所の幅を伝える）: 大きな写真の下にグレージュの面、白抜き欧文見出し、本文、ボタン、サムネイル4枚の帯。
7. お知らせ（最新情報）: 見出しと右上のテキストリンク、横スクロールのサムネイル付き記事カード。
8. おすすめポイント（サービスの強みを4つ示す）: 薄ピンク地に、線画イラストの2カラムカード。
9. 当日の流れ（準備の安心感を与える）: くすみピンク帯をずらして敷いた上に写真、見出し、本文、ボタン。
10. スタッフ紹介（人柄と専門性を伝える）: 淡ピンク帯の上に人物写真、明朝の3行サブコピーと本文。
11. 体験レポート（利用者の事例）: 写真付き記事カードを横スクロール。
12. コンセプト（ブランドの想いを伝える）: 上辺が弧の写真背景に白い半透明を重ね、中央揃えの白文字と白いピルボタン。
13. よくある質問（不安を解消）: 中央見出し、淡色角丸のアコーディオンを縦に並べる。
14. アクセス・お問い合わせ（来店と問い合わせへ誘導）: 淡色の大きな欧文見出しにモノクロ地図、灰色地のフッターに診断バナー、シェア、問い合わせリンク、ナビ。

Imagery

• 明るく自然光の、笑顔のカップル写真。白背景スタジオ・和室・緑の屋外など場面を変える。
• 衣装は単体のモデル写真を明るいグレー背景で揃える。
• 線画に淡い水彩風の色を少し差した人物イラストをポイント紹介に使う。
• 地図はグレースケールにして全体の淡色調に合わせる。
• 高彩度の花や和装は写真内に留め、周囲は淡色で受ける。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは左に縦長のロゴ帯、右に写真のFV、上部に横並びグローバルナビ。
• PCのプランは3カラム、ポイントは4カラム、衣装は4枚横並び。
• PCは見出しと本文を左、写真を右に置く2カラムの交互配置。
• PCはコンテンツ幅約80%で中央寄せ、左右に広い余白。
• PCは画面右端に縦型の予約タブを固定する。

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