DESIGN.md — 生成り×朱赤の手描き大人服ルックブック LP（Ecru Notebook Grid Mature Fashion Lookbook LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 親しみ・手作り感、やさしい・柔らかい、ナチュラル、上品・高級
• キーワード: 生成り・方眼ノート・手描きクレヨン線・朱赤セリフ・雑誌的ルックブック・余白多め
• 地の質感: 生成りの紙のような地に細い方眼罫の帯。クレヨンや鉛筆のラフな手描きイラストを添える
• 形: 写真は角丸なしの矩形を左右にずらして配置。赤い面は角を斜めに落とした八角形。ボタンは白いピル型
• 温度感: 温かくやわらかい。朱赤が差し色として効く

Colors

• 地は生成り一色。読み物の本文は方眼ノート柄の淡い帯に乗せる
• 朱赤は英字セリフ見出し・特集ブロック・商品グリッド線・区切り点線だけに使う
• 朱赤の大きい面は1ページに2〜3回まで。中の文字と CTA は白で抜く
• 写真は白グレーの壁で撮り、地の生成りとの差をやわらかく保つ
• イエロー・空色・ピンクは手描きイラストの中だけで使う
• product-grid は文字 #D23435 × 背景 #F4F2E6 のコントラスト比が 4.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D02E2F、4.54:1）を使う。

Typography

• 英字セリフ見出しの下に、小さな和文サブ見出しを朱赤で添えて対にする
• 本文は詩のように短く改行し、行間を2倍以上とる
• ロゴや季節タイトルは手書き文字の画像で作る
• 太字はできるだけ使わない。強調は色と大きさで出す
• キャプションは2行に分け、1行ずつ白帯に乗せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右にずらして非対称に重ねる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 40px（375px 幅換算）
• 方眼帯は画面幅いっぱいに敷き、本文は中央寄せのブロックで左揃えにする
• LOOK 写真は左右に約5%ずつ余白をとり、ときどき画面端まで裁ち落とす
• サブ写真は画面幅の半分ほどで左右交互に置き、余白にイラストを入れる
• 商品一覧は3列の正方形グリッドを朱赤の細線で区切る
• セクションのつなぎに朱赤の縦点線を入れる

Elevation & Depth

• 影は使わず、すべてフラットにする
• 奥行きは写真の重なりとイラストのはみ出しで出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの矩形。プロフィール写真だけ切り抜く。商品は白抜きにする
• セクション境界: 赤ブロックは角を斜めに落とした八角形。ほかは直線で地の色を切り替える
• 吹き出しは手描き風の楕円にしっぽを付け、手書き英字を入れる
• 写真上には白丸＋アイコンを置いてアイテムの位置を示す
• 図解は大きな白い楕円の中に描く

Components

• 英字セリフ見出し（heading-serif-en）: 朱赤の大きな英字に和文サブ見出しを添える
• 方眼ノート帯（grid-note-band）: 淡い方眼柄を全幅に敷き、短い改行の本文を載せる
• LOOK 写真カード（look-photo）: 左上に LOOK 番号を入れた白壁の全身写真。＋アイコンを散らし、吹き出しを重ねる
• 手描き吹き出しバッジ（speech-badge）: グレー塗りまたは線だけの手描き吹き出しに手書き英字を入れる
• 白帯キャプション（caption-label）: 写真脇に置く。白い長方形に1行ずつ短い文字を載せる
• 八角形の赤特集ブロック（octagon-feature）: 角を落とした朱赤の面に白い見出し・写真・本文・ボタンを縦に並べる
• 白ピルボタン（button-primary）: 赤地や生成り地に置く白いピル型。文字は朱赤
• 商品グリッド（product-grid）: 3列の正方形セルを朱赤の細線で区切り、白抜きの商品と右下の＋丸アイコンを置く
• 英文テロップ（marquee-text）: 白地の帯の上を英字セリフ文が横に流れる

Do's and Don'ts

Do - 生成り地に方眼帯と手描きイラストを組み合わせ、ノートや雑誌のような質感を保つ - 写真はずらして重ね、余白にイラストを置いて動きを出す - 朱赤は見出しと要所の面だけに絞る - 本文は短く改行し、語りかけるような口調にする - モデルは自然な笑顔で、白壁の前で撮った写真を使う

Don't - 鮮やかなグラデーションや影は使わない - 朱赤の面を連続して並べない - 写真に角丸や太い枠を付けない - 長い段落の本文を詰めて組まない - 手描きイラストをデジタルのアイコンに置き換えない

Page Structure

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

1. ファーストビュー（特集の世界観を伝える）: 白壁の前でモデルが机に座る写真。手書きロゴと小物イラストを重ねる
2. 英文テロップ（区切りとリズムを作る）: 白い帯の上を英字セリフ文が横に流れる
3. 特集の紹介（コンセプトを説明する）: 手書きの季節タイトルと人物イラストの下に、短い段落の本文を置く
4. コラム導入（季節のテーマを語る）: 朱赤の英字見出しの後に方眼帯の詩的な本文を置く
5. コーデ紹介（複数 LOOK）（着こなしを提案する）: LOOK 写真、吹き出し、サブ写真、白帯キャプション、方眼帯の本文を繰り返す
6. イラストの見せ場（余韻と季節感を出す）: 全幅の水彩イラストを1枚置く
7. 専門家のコラム（暮らしに役立つ付加価値を届ける）: 丸い人物写真と点線の後に八角形の赤ブロックを置き、白楕円の中に図解を描く
8. 写真の帯（コーデを振り返る）: 全幅で写真を横に並べ、つなげて見せる
9. 商品一覧（購入につなげる）: 朱赤の英字見出しと、3列の赤線グリッド
10. 関連カタログ（別の媒体へ誘導する）: 英字見出し、誌面画像、白ピルボタンの順に置く
11. 特別企画（関連企画へ誘導する）: 八角形の赤ブロックに英字の筆記風見出し、和文大見出し、写真、本文、白ボタンを並べる
12. フッター誘導（ほかの商品へ回遊させる）: 白地に手書きタイトルと空色の点線を置く

Imagery

• 50〜60代の女性モデルを明るいグレー白壁の前で撮り、自然光とやわらかい影を出す
• 全身・上半身・小物のアップを撮り分け、笑顔や仕草で自然な表情を出す
• クレヨンや鉛筆のラフな線で小物・動物・花を描き、淡い色を少しだけ乗せる
• 季節を表す全面の水彩イラストを1枚入れる
• 商品は白背景で切り抜き、真上または正面から撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約800px幅で、写真とテキストを2〜3枚の非対称なコラージュに組む
• PC の方眼帯は短い横長の箱にして、写真の隣に置く
• PC の商品グリッドは6列にする
• PC の赤ブロックは幅を約80%に絞り、八角形を保つ
• FV は 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 行書くと起動時に読み込まれる。