DESIGN.md — 白地と野菜色の手描きアパレル LP（Vegetable Motif Seasonal Apparel Lookbook LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: ナチュラル、ポップ・元気、シンプル・ミニマル、親しみ・手作り感
• キーワード: ルックブック・野菜モチーフ・手描きイラスト・スタンプ調英字・白場多め・スタジオ撮影
• 地の質感: 見出し英字にかすれたスタンプ質感。イラストは版画・色鉛筆風のざらつき。地はフラットな白とグレー。
• 形: 写真は角丸なしの矩形。素材アップのみ白縁つきの円形。ボタンは細線のピル型。
• 温度感: 明るく爽やかな夏の温度感。野菜色の差し色でほどよく陽気に。

Colors

• 地は白とスタジオグレーの 2 色だけで交互に切り替える。
• 英字見出しはそのセクションの野菜の色で塗る（緑・オレンジ・紫・ピンク）。
• ブランド名と総合タイトルだけ深緑のスラブ系英字にする。
• CTA は黄緑の細線ピルで統一し、塗りつぶしボタンは使わない。
• ピンクは割引価格と赤い野菜の見出しのみに限定する。
• 本文はダークグレーで、黒ベタは使わない。
• button-buy は文字 #7EB04E × 背景 #FEFFFE のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#5C8039、4.55:1）を使う。

Typography

• 英字見出しは 2〜3 行で大きく組み、和文サブコピーを細めに 1 行添える。
• 見出しの揃えはセクションごとに左・右・中央・縦組みと変えてリズムを作る。
• 縦組みセクションは英字を 90 度回転させ、和文は縦書きにする。
• 和文は細めのウェイトで字間を広めに取る。
• 商品名は〈レディース〉〈メンズ〉の山括弧で区分を付記する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品は 2 列グリッド、または写真と情報の左右 2 分割。
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 110px、基本単位 8px、カード内 12px（375px 幅換算）
• セクションは英字見出し → 着用写真 → 商品カードの順で繰り返す。
• メイン写真は画面幅いっぱいか片側に寄せて置き、余白を非対称にする。
• 商品は白抜きの平置き写真の下（または右）に名称・価格・BUY を中央揃えで置く。
• セクション間は 100px 以上の大きな白場を取る。
• イラストは写真の端や余白にはみ出させて配置する。

Elevation & Depth

• 影はほぼ使わずフラットにする。
• 素材アップの円だけごく薄いドロップシャドウと白縁を付ける。
• 立体感は写真の床影とイラストの重なりで出す。

Shapes

• 角丸: 小 0px ／ 中 14px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 着用写真は角丸なしの矩形。生地のアップは白縁つきの円形。商品は切り抜きの平置き。
• セクション境界: 直線で切り替える。白とグレー地の境界をイラストがまたいでいる。
• ボタンだけ角丸にし、写真やカードは角を立てる。
• 円形の素材アップは直径 120px 前後にする。
• 区切り線や枠で囲まず、白場で区切る。

Components

• BUY ピルボタン（button-buy）: 白地に黄緑 1px の枠線。中央に字間広めの英字、右端に黄緑の小さな丸ドット。幅は約 70px。
• 野菜英字見出し（heading-veggie）: かすれ質感の極太英字を野菜色で置き、下に細い和文コピーを添える。
• 縦組み見出し（heading-vertical）: 写真の左側に、回転させた英字と縦書きの和文を並べる。
• 商品カード（product-card）: 切り抜きの商品写真、名称 2 行、価格、BUY を縦に中央揃えで並べる。
• 素材アップ円（fabric-circle）: 柄や刺繍を拡大した円形写真。商品写真の左隣に置く。
• コレクションタイトル（brand-title）: 点線に挟んだ小さなブランド英字と、深緑のスラブ英字 2 行。ページの冒頭と末尾に置く。
• お試し価格表記（price-special）: 矢印に続けて、ピンク文字で割引価格を表示する。

Do's and Don'ts

Do - 野菜ごとに見出し色とイラストを変え、柄の服と対応させる。 - 写真は無地のグレー背景で全身を撮る。 - イラストを写真の角にはみ出させて重ねる。 - 見出しの揃え位置をセクションごとに変える。 - 商品情報は小さく控えめにして、写真を主役にする。

Don't - 塗りつぶしの大きな CTA ボタンを置かない。 - 写真に角丸や太い枠を付けない。 - 濃い背景のセクションを作らない。 - 見出しの英字を細いフォントにしない。 - テキストを詰め込みすぎない。 - 写真やリアルな素材画像で野菜の装飾を代用しない。

Page Structure

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

1. ファーストビュー（コレクションの世界観を一目で伝える）: 淡いミント地に総合タイトルを中央に置き、モデル数人の全身切り抜きを横に並べる。四隅に野菜イラストを置く。
2. コンセプト導入（テーマを短く説明する）: 白地に細い和文キャッチを 2 行、その下に説明文を 4 行ほど置く。
3. テーマ別ルック①（左揃え）（1 柄目の着用イメージを見せる）: グレー地の大きな写真の上に、オレンジの英字見出しを左寄せで重ねる。
4. 商品グリッド（関連商品を購入へつなぐ）: 着用写真 2 枚と商品切り抜き 2 点を 2 列に並べ、それぞれに BUY を付ける。
5. テーマ別ルック②（右揃え）（別の柄を見せる）: 緑の英字見出しを右寄せにし、写真の端にイラストをはみ出させる。
6. 縦組みルック（変化をつけて目を止めさせる）: 写真の左側に回転した英字と縦書きの和文を置き、右側にモデルを立たせる。
7. 中央見出しルック（単品の柄シャツを訴求する）: 中央揃えの見出しの下に、左右へ余白を残した写真と、右に情報を置いた商品を並べる。
8. 左右分割ルック（男女別の商品を見せる）: 写真を左右に寄せて、反対側に商品カードを置く千鳥配置にする。
9. 素材アップ付き商品（柄や刺繍のディテールを伝える）: 左に円形の素材アップ、中央に商品写真、右に情報を置く 3 要素の横並び。
10. カラー展開（色違い商品とお試し価格を訴求する）: 色違いの着用写真 2 枚と 3 色並べの商品を置き、ピンクで割引価格を添える。
11. クロージング（ブランド印象で締める）: 白地の中央に総合タイトルを再掲する。

Imagery

• モデル写真は明るいグレーの無地背景で、全身をフラットな光で撮る。
• モデルは野菜やかごを手に持ち、自然な笑顔を見せる。
• 商品写真はハンガー掛けか平置きで背景を切り抜き、薄い影だけを残す。
• 野菜イラストは版画・ガッシュ風のかすれたテクスチャで、輪郭線は描かない。
• イラストは柄の野菜と一致させ、2〜3 点を写真の周囲に散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも中央に幅 約 480px の 1 カラムを維持し、左右は白場にする。
• PC のファーストビューは横長にして、モデル 6 人ほどを横一列に並べる。
• PC の導入文は 1 行キャッチと横長の段落にまとめる。
• 写真やグリッドの比率は SP と同じで、余白だけ広げる。

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