DESIGN.md — マスタード×えんじのレトロ雑誌風アパレル LP（Mustard Retro Editorial Fashion Magazine LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: レトロ、親しみ・手作り感、力強い・インパクト
• キーワード: マスタード地・えんじ文字・ジグザグ写真・雑誌の目次・白下線マーカー・縦書きコピー
• 地の質感: グラデーションも影もないフラットな単色の地。写真のフィルム調の色味が質感を足している
• 形: 角丸なしの長方形写真と細い横罫線だけで組む。装飾は最小限
• 温度感: 暖色寄りで、懐かしく人の温もりを感じる

Colors

• 地はページ全体マスタード1色で通し、色の切り替えで区切らない
• 文字はほぼすべてえんじ1色。黒や灰色の本文は使わない
• 強調はえんじの面＋ベージュ金文字のバナーに限る
• 記事タイトルの各行下に白い太下線を敷き、紙の上の書き込み感を出す
• 写真の深い黒とウッドの茶色を暖かいアクセントとして見せる

Typography

• 本文も含めて太字で組み、細いウェイトは使わない
• 記事タイトルは短く改行して3〜5行にし、行ごとに白下線を敷く
• 番号は「Vol.数字」の英字表記でタイトルの1行目に置く
• ファーストビューの大コピーは左右の端で縦書きにする
• 締めのコピーは2行の大きな見出しにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は写真と文字の2カラムを左右交互に入れ替えるジグザグ。PC も同じジグザグを中央の細い列で組む
• 本文ブロックの幅: 画面幅の約 100%
• 余白: セクション間 48px、基本単位 8px、カード内 14px（375px 幅換算）
• 写真は画面幅の約40%で、左端または右端にぴったり付ける
• 文字は写真の反対側に置き、写真の縦中央あたりに合わせる
• 隣り合う記事は縦に少し重ね、段差のあるリズムを作る
• 後半のブロックは左右に約8%の余白をとって中央に寄せる
• セクション見出しは画面幅いっぱいの上下2本罫線で挟む

Elevation & Depth

• 影は使わない。完全にフラット
• 奥行きは写真の暗いトーンと地色の対比だけで出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの縦長または横長の長方形。画面端で裁ち落とす
• セクション境界: えんじの細い横罫線（上下2本で見出しを挟む）
• 円形はSNSアイコン以外に使わない
• 枠線は罫線のみ。カードの枠は付けない
• 写真に枠や白フチは付けない

Components

• 縦書きキャッチ付きロゴヘッダー（hero-vertical-copy）: 中央に手書き風のロゴ、左右の端にえんじの縦書きコピーを置く。その下に全幅の暗い写真
• ジグザグ記事アイテム（article-zigzag）: 片側に端まで付けた写真、反対側にVol番号とタイトル。左右を交互に入れ替える
• 白下線マーカー（title-marker）: タイトルの各行の下半分〜下端に、白い太線を文字幅だけ敷く
• 罫線挟み見出し（section-rule-heading）: 画面幅いっぱいの上下罫線の間に、英字見出しを中央に置く
• カタログ表紙2列（catalog-cover-grid）: 縦長の表紙画像を2枚並べ、間を狭くする
• ショップ誘導バナー（shop-banner）: えんじの横長の面にベージュ金の太い英字。背景に薄く線画イラストを入れる
• フッターロゴとSNS（footer-logo）: 太い英字の社名、小さなコピーライト、白い丸型SNSアイコンを中央に揃える

Do's and Don'ts

Do - 地はマスタード、文字はえんじの2色を徹底する - 写真は左右交互に置き、画面端で裁ち落とす - 記事タイトルには必ず白の下線マーカーを付ける - Vol番号を付けて連載の目次のように並べる - 文字はすべて太いウェイトで、短く改行する

Don't - 角丸のカードや影付きボタンを使わない - 青や緑などの寒色を文字や面に使わない - 細い明朝体で本文を組まない - 写真を中央に揃えた均等グリッドにしない - グラデーションや光沢の装飾を入れない

Page Structure

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

1. ファーストビュー（ブランドの世界観を一目で伝える）: マスタード地に中央ロゴと左右の縦書きコピー。下に暗い店内の人物写真を全幅で置く
2. 最新記事（いちばん新しい記事へ誘導する）: Vol番号と5行ほどの大きなタイトルを、白下線付きで左寄せに置く
3. 記事一覧（過去の連載を回遊させる）: 写真とタイトルを左右交互にジグザグで十数本並べる
4. メディア紹介（ウェブマガジンの趣旨を伝える）: 小見出し、2行の大コピー、えんじ太字の本文の順に置く
5. カタログ（最新カタログを見せる）: 罫線挟みの見出しの下に、表紙画像を2列で並べる
6. ショップ誘導（購入ページへ送客する）: 罫線挟みの見出しの下に、えんじの大バナー
7. フッター（企業名とSNSを示す）: 太い英字の社名、コピーライト、白いSNSアイコン。最下部に黒い帯

Imagery

• 人物は大人の男女を店内・路地・古い建物の前で撮ったドキュメンタリー風
• 暖色の照明やウッドの茶色が残る、やや粗めのフィルム調
• 全身または半身で、服の着こなしがわかる構図
• 小物の静物はダークな卓上でローキーに撮る
• イラストはバナー背景の薄い線画にだけ使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツを中央の約70%幅に収め、両端の縦書きコピーは画面端に固定する
• PC のジグザグは写真を小さめ（約14%幅）にして、記事を縦に詰める
• PC のメディア紹介は大コピーを左、本文を右の2カラムにする
• 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 行書くと起動時に読み込まれる。