DESIGN.md — 青×橙×緑の原色ブロック・ルームウェアLP（Bold Primary Color Block Apparel Lookbook LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: ポップ・元気、かわいい、シンプル・ミニマル、レトロ
• キーワード: 原色ベタ面・カラーブロック・ルックブック・非対称グリッド・絵本調・余白
• 地の質感: グラデーションや影のないフラットな単色面。質感は写真のもこもこ素材が担う
• 形: 角丸なしの長方形のみ。写真もカラーパネルも直角
• 温度感: 暖色の朱橙と寒色の濃青を交互に置く、明るく温かいコントラスト

Colors

• 地は青・朱橙・緑のベタ面をセクション単位で切り替える
• 左端に幅約30pxの別色帯を置き、隣接色と対比させる
• 写真の横に写真と同寸の単色パネルを置き、価格を載せる
• 青面上の文字は白、橙・緑面上は黒か白、見出しは黄
• 帯テキストは橙地に黄文字で横一列に流す
• 中間色やグラデーションは使わず原色のみで構成
• color-panel は文字 #FFFFFF × 背景 #EA5513 のコントラスト比が 3.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#CE4B11、4.53:1）を使う。
• marquee-band は文字 #FEE001 × 背景 #EA5513 のコントラスト比が 2.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#CE4B11、4.54:1）を使う。

Typography

• 見出しとキャプションは欧文太字サンセリフで統一
• 価格は「品名 数字YEN」の大文字表記で1行ずつ並べる
• キャプションは小さく、写真の主役を邪魔しない
• 日本語は導入リードのみ、字間を広く行間2倍以上
• 文字に影や縁取りをつけない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム、写真は2枚並びも可。PCは2列の非対称グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は左寄せ・右寄せを交互にずらして配置
• 価格キャプションは写真の右下か直下に寄せる
• 写真間の隙間は約8pxと狭く、セクション上下は広く取る
• 一部の写真は前のセクション境界にまたがらせる
• 左端に細い色帯を縦に通す

Elevation & Depth

• 影は一切使わない
• 重なりは色面の切替と写真の境界またぎだけで表現

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 縦長の長方形（約3:4）で直角トリミング。小物は太い色枠付き
• セクション境界: 直線で背景色を切替。帯テキストを区切りに使う
• 角丸を使わない
• 小物写真には4px前後の緑・橙・黄の色枠
• 単色パネルは写真と同寸の長方形

Components

• 左端カラー帯（side-color-band）: 画面左端に縦に通す幅約30pxの別色帯
• 価格カラーパネル（color-panel）: 写真と同寸の単色長方形の中央に価格を置く
• 価格キャプション（price-caption）: 写真脇の大文字欧文の品名と価格リスト
• 流れる帯テキスト（marquee-band）: 限定品を示す英語フレーズを横に繰り返す帯
• 色枠付き小物カード（framed-item-card）: 小物写真を色違いの太枠で3つ並べ、下に価格
• 英語見出し（section-heading-en）: 色面上に黄色の太字欧文で左寄せ
• 一覧へのテキストリンク（view-all-link）: 花アイコンの下に黄色太字の欧文リンク。枠なし

Do's and Don'ts

Do - 原色ベタ面を大きく取り、セクションごとに色を切り替える - 写真を左右交互にずらして余白でリズムを作る - 価格は小さな大文字欧文で写真に添える - 写真の背景色（橙壁・青寝具）を地の色と響かせる - 左端の色帯で隣の地色とコントラストをつける

Don't - 角丸・影・グラデーションを使わない - パステルやくすみ色を地色に使わない - 大きな日本語コピーや装飾見出しを多用しない - 塗りつぶしボタンを目立たせすぎない - 写真を均等グリッドで敷き詰めない

Page Structure

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

1. ファーストビュー（コラボの世界観を一目で伝える）: 全幅のモデル写真に、多色欧文タイトルを左に重ねる
2. コンセプト導入（テーマを短く説明）: 青地に白の英語見出しと3行の日本語リード、左端に橙帯
3. キッズ商品ルック1（親子・キッズ商品を見せる）: 青地に写真を左右交互に配置し価格を添える
4. 小物ライン（雑貨を並べる）: 色枠付きの小物写真を3つ横並び
5. ベビー商品ルック（ベビー商品を見せる）: 写真と橙パネルを2列で並べる
6. 大人ペアルック（大人・親子コーデ提案）: 橙地に左上青帯、写真が境界をまたぐ
7. 別キャラクターシリーズ（もう一つのシリーズ紹介）: 緑地に左青帯、写真と橙パネルを組む
8. メンズ（男性向け商品提示）: 黄の英語見出しと横長写真1枚
9. EC限定商品（限定品を強調）: 上下を流れる帯テキストで挟んだ橙地のルック
10. ユニセックス商品（追加商品を見せる）: 青地に写真を段違いで配置
11. クロージング・CTA（一覧ページへ誘導）: 橙地に左黄帯、中央にタイトル・花アイコン・黄のリンク

Imagery

• もこもこ素材の部屋着を着た子ども・大人を自然光で撮影
• 背景は白い板壁、橙・水色の壁、青い寝具など原色の部屋
• クッションや椅子に原色の小物を配し、地色と呼応させる
• 真正面〜やや引きの構図で、ポーズは自然体
• 小物は木の机や本の上に置いた物撮り
• 装飾は花などの絵本調シンプルアイコンを1点だけ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは2列の非対称グリッド、SPは写真を1列か2枚並びに縮める
• SPでは左端の色帯を幅12〜16pxに細くする
• 価格キャプションはSPでは写真直下に置く
• 帯テキストはSPでも1行で横スクロール表示
• FVは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 行書くと起動時に読み込まれる。