DESIGN.md — 真紅×金のホリデー招待状型ファッション LP（Crimson Holiday Invitation Fashion Mall LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、力強い・インパクト、情報量多め・訴求型
• キーワード: 真紅一色・金の欧文セリフ・アーガイル柄・アーチ枠・ホリデー招待状・カタログ
• 地の質感: 赤のベタ面にうっすらとした紙のノイズ。カード内には濃淡の赤でアーガイル柄を敷き、細い点線をあしらう
• 形: 角丸の大きいカード、上が半円のアーチ線枠、円で囲んだアルファベット記号
• 温度感: 暖かく華やか。クリスマスらしい祝祭感がある

Colors

• ページ全体を真紅で塗る。白地のセクションは作らない
• 地の赤は濃淡の違う 3〜4 色だけで切り替え、セクションの区切りを見せる
• 見出しの英字と装飾線は金色に限定する
• ブランド名が流れる帯の英字は、サーモン系の半透明色で大きく出す
• 本文と価格は白。強調には太字を使い、別の色は足さない
• 白い面はロゴカードと商品の切り抜き写真だけに使う
• marquee-band は文字 #EA695C × 背景 #9E050C のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。

Typography

• 英字はすべて細身のセリフ体にし、招待状らしい品のよさを出す
• 日本語の見出しとキャッチは明朝で字間を広めにとる
• 本文は白のゴシックで小さめにし、行間は広くとる
• コンセプト文は中央揃えにして、短い行で改行する
• 大きな英字は、カードの右端やアーチの外へはみ出させる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ロゴ一覧は 2 列グリッド、写真と説明文は左右 2 分割
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• ブランドごとに角丸カードを 1 枚使い、上から順に積む
• カードとカードの間には、ブランド名が横に流れる帯を挟む
• カード上部に、オープン日・ブランド名・フロア・番号/総数をまとめる
• アーチ枠の中に商品の切り抜き写真を置き、A・B などの記号で示す
• 記号付きの商品名と価格リストのあとに、写真と説明文を 2 分割で置く

Elevation & Depth

• 影はほぼ使わず、線と色の濃淡で奥行きを出す
• ロゴカードだけに、ごく弱い影をつける
• 切り抜き写真には、ほんのり落ち影をつけて浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: モデル写真は長方形で、左右にずらしてレイアウトする。商品は背景を抜いた切り抜き。補足写真は角丸なしの長方形
• セクション境界: 角丸カードの境界と、横に流れる英字帯で区切る
• カードの角丸は大きめにし、周囲に細い金線を沿わせる
• アーチ枠は上が半円の細い線で描く
• 商品記号は細い白線の円で囲む
• ニューオープンには、ギザギザ円形のバッジをつける

Components

• ブランドロゴカード（brand-logo-card）: 白地に金のクラシックな飾り枠をつけたカード。2 列で並べ、各ブランド紹介へのリンクにする
• ブランド名の流れる帯（marquee-band）: 暗めの赤の帯に、大きなセリフ英字を・区切りで繰り返して流す
• ブランド紹介カード（shop-card）: アーガイル柄を敷いた角丸カード。上部にオープン日・ブランド名と外部リンクのアイコン・フロアの点・番号 01/15 を置き、下に細線を引く
• アーチ枠の商品ビジュアル（arch-frame）: 細い金線の二重アーチに、切り抜いた商品を重ねる。後ろには半透明の大きなブランド英字を置く
• 円囲みの記号付き商品リスト（item-marker）: 白線の円に A〜D を入れ、右に商品名と価格を並べる。（税込）は小さく添える
• ニューオープンバッジ（badge-new）: 金線のギザギザ円に、セリフ体の英字を 2 行で入れる
• 写真＋説明の 2 分割（photo-note）: 左に素材のアップ写真、右に白い短い説明文を置く
• 円形の下矢印（scroll-cue）: 白線の円に下向きのシェブロンを入れ、上に短い案内文を添える

Do's and Don'ts

Do - 赤のベタ面とアーガイル柄で、ページ全体を包む - 英字見出しは金色のセリフ体にする - 商品は切り抜き写真にし、アーチ枠と円の記号でカタログのように見せる - ブランドごとに同じカード構成を繰り返し、番号/総数を入れる - ブランドが切り替わる位置に、流れる英字帯を入れる

Don't - 白や淡色の背景セクションを挟まない - ゴシックの太い見出しや、ポップな色を使わない - ピル型のボタンや、強い影のボタンを使わない - 商品写真を背景付きのまま大きく敷かない - 金色を面で使わない。金は線と文字だけにする

Page Structure

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

1. ファーストビュー（冬の招待状というテーマを一目で伝える）: 赤い封筒を持つモデル写真を全幅で見せ、上に半透明の赤いナビゲーションを重ねる
2. コンセプト（企画の意図を伝える）: 金の装飾ロゴ、金の英字リード、明朝の見出し、中央揃えの白い本文の順に置く
3. モデルビジュアル（世界観を補強する）: 大小のモデル写真を、左右にずらしてリズムよく配置する
4. プロモーション動画（動画へ誘導する）: 縦書きの金英字を添えた動画サムネイル、説明文、円形の下矢印を並べる
5. ブランド一覧（掲載ブランドを一覧で見せ、各紹介へ飛ばす）: アーガイル柄の大カードの中に、金の飾り枠つき白ロゴカードを 2 列で並べる
6. ブランド別おすすめコーデ（各ブランドの商品と価格を見せる）: 流れる英字帯、角丸カード（ヘッダー・アーチの商品・記号付きリスト・写真と説明の 2 分割）の順で、ブランド数だけ繰り返す
7. 動画・メイキング（動画を視聴してもらう）: 大きな金英字の見出しのもとに埋め込み動画を置き、メイキングのサムネイルを続ける
8. モデル紹介（起用モデルのプロフィールを見せる）: 円形の枠に写真を入れ、横に金のセリフ英字の名前と本文を置く
9. ギャラリー（ビジュアルを一覧で見せる）: 流れる英字帯のあとに、モデル写真を横に並べる
10. ディスプレイ告知（館内イベントを告知する）: 角丸カードの中に、金の英字見出し・期間・説明・イラストを入れる

Imagery

• モデルは赤いドレープを背景に、白やベージュのニットを着て、赤い封筒を手にするスタジオ撮影
• 商品は真上か正面から撮り、背景を抜いた切り抜きで使う
• 補足写真は、グレー地で撮った素材やディテールのアップ
• 雪の結晶やきらめきを、金の細線アイコンで少量添える
• 背景にはアーガイル柄と、細い点線のダイヤ模様を敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を中央寄せし、両側にも赤い地を見せる
• PC のファーストビューは、左にモデル写真、右に装飾ロゴを置く横長構成にする
• ロゴ一覧は、SP の 2 列から PC では 5 列にする
• PC のブランドカードは、アーチ枠を中央に置き、商品名と価格を左右に振り分ける
• 流れる英字帯は 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 行書くと起動時に読み込まれる。