DESIGN.md — 白地×深紅のファッション雑貨ぬいぐるみLP（Red Accent Editorial Plush Toy LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: シンプル・ミニマル、かわいい、上品・高級
• キーワード: エディトリアル・大胆な余白・深紅のアクセント・ずらし配置の写真・スクリプトロゴ
• 地の質感: 白い面がフラットで、写真の毛並みの質感が主役。影はない
• 形: 四角い写真、ピル型ボタン、丸ボタン、二重線の額縁枠
• 温度感: 白とグレーでやや冷たいが、赤が温度を足す

Colors

• 外側はグレー、中身は白い縦長カラム1本にまとめる
• 強調色は深紅1色だけ。面で大きく使うのはボタンと大きな文字に限る
• 本文は黒っぽい文字。見出し・リンク・クレジットは深紅にする
• 写真の中に赤い小物を入れて、UIの深紅と響き合わせる
• FVだけを暗い写真にして、白い文字を乗せる

Typography

• 英字ラベルとボタンは太いサンセリフで字間を広めにする
• 和文の本文は小さめにして、行間2以上で中央揃えにする
• サイズを表す1文字は極太にして、写真の角に重ねるように置く
• スクリプト体はロゴとFVだけに使う
• 価格表記は右寄せにして、丸いBUYボタンと横に並べる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。PCでも中央の幅約300pxのカラムを1本置く
• 本文ブロックの幅: 画面幅の約 100%
• 余白: セクション間 120px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は全幅にせず、左寄せ・右寄せで約80%幅に収めて交互にずらす
• セクションの間に100〜160pxの大きな白余白を取る
• 小さい商品写真とTAP!吹き出しを余白の中に浮かせる
• サイズ文字は写真の上端の外側の角に置く
• 4枚の写真を2×2で並べるグリッドを1回入れる

Elevation & Depth

• 影は一切使わない
• 重なりは、写真と大きな文字の位置をずらして表現する

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの長方形。縦長が多く、片側を画面端まで寄せて切る
• セクション境界: 区切り線は引かず、余白と写真の端で区切る
• 写真は常に角丸0
• ボタンはピル型か正円にする
• 説明枠は二重線で、角を切り欠いた額縁型にする
• TAP!は小さい四角の吹き出しで、下に尻尾を付ける

Components

• 一覧ピルボタン（button-pill）: 深紅のピル型に白い太字英字のボタン。中央に置く
• 丸BUYボタン（button-buy-circle）: 直径約40pxの深紅の正円。左に商品名と価格を並べて右寄せにする
• 巨大サイズ文字（size-letter）: 深紅の極太欧文1文字。横に縦書きの小ラベルを添えることもある
• TAP!吹き出し（tap-badge）: 深紅の小さい四角に白文字を入れ、下に尻尾を付ける。商品写真の上に置く
• 額縁風説明カード（frame-card）: 深紅の二重線で囲む枠。上から写真が顔を出す。中に見出し・本文・イラスト・帯ボタンを入れる
• 帯状リンクボタン（button-bar）: カード内いっぱいの幅の深紅の帯。白文字と右向き矢印を入れる
• 下線テキストリンク（nav-underline）: 深紅の英字リンクに細い下線を引き、縦に並べる

Do's and Don'ts

Do - 白い余白を惜しまずに取って、写真1枚ずつに間を作る - 深紅はボタン・サイズ文字・枠線に絞って使う - 写真の左右の位置を交互にずらしてリズムを作る - 各商品のブロックは価格行と丸BUYボタンで締める - 写真の小物に赤を入れる

Don't - 赤以外のアクセント色を足さない - 影やグラデーションのボタンを使わない - 文字を詰め込んだ訴求型の構成にしない - 写真を角丸にしたり、全部を全幅で揃えたりしない - 和文に太い装飾書体を使わない

Page Structure

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

1. ファーストビュー（世界観とブランドを一瞬で伝える）: 毛並みのクローズアップ写真を全面に敷き、白いスクリプトロゴと英文の一行を中央に置く
2. ラインナップ（サイズ展開を一覧で見せる）: 白背景で商品を並べた写真に赤い英字ラベルを付け、下にピルボタンを置く
3. リード文（商品の雰囲気を短い詩のような文で伝える）: 中央揃えの小さい和文を行間広めに組み、端から商品写真をのぞかせる
4. サイズ別商品紹介（サイズごとに使用シーンを見せて購入へつなぐ）: 巨大サイズ文字、ずらして置いたモデル写真、TAP!付きの小物写真を順に並べ、価格とBUYで締める。サイズの数だけ繰り返す
5. キーチャーム紹介（小物バリエーションを見せる）: 赤背景の2×2写真グリッドと縦書きラベル付きのサイズ文字で、同じ流れを繰り返す
6. ブランドストーリー（キャラクターの背景を伝える）: 額縁風の二重線カードの中に、見出し・本文・イラスト・帯ボタンを入れる
7. 締めのビジュアルとCTA（全商品一覧へ誘導する）: 全身モデル写真の下にピルボタンを置く
8. リンクとクレジット（関連ページと制作情報を載せる）: 下線付きの赤いリンクを縦に並べ、右揃えのラベルと左揃えの名前で2列のクレジットを組む
9. フッター（SNSシェアとブランドを表示する）: SHAREの英字、SNSアイコン、赤いロゴ、コピーライトを中央に並べる

Imagery

• 薄いグレーの無地のスタジオ背景で撮る。自然光で明るく、柔らかい影にする
• モデルは白シャツとデニムに赤い靴下やベストを合わせ、赤を差し色にする
• 商品を頭に乗せる・宙に浮かせるなど、遊び心のあるポーズにする
• 白抜きの小さな物撮り（レトロな雑貨と商品）を余白に浮かせる
• 質感が伝わるマクロ写真をFVや区切りに使う
• 絵本のような油彩調イラストを1点、物語の説明に添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでもコンテンツはスマホ幅の中央カラムのまま。左右はグレーの地にする
• PCではカラムの右横にロゴ・英文・ナビリンクを固定で置く
• SPではカラムを画面幅いっぱいにして、写真のずらし幅は同じ比率を保つ
• SPでは、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 行書くと起動時に読み込まれる。