DESIGN.md — スマイル花柄×原色ポップのアパレルコラボLP（Maximal Happy Pop Fashion Collab LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: ポップ・元気、かわいい、レトロ
• キーワード: スマイル花・原色背景・ルックブック・レトロ欧文・ステッカー感・マーキー帯
• 地の質感: フラットな単色背景のスタジオ写真に、黒い細線の枠とイラストのステッカーを重ねる。グラデーションや影はほぼ使わない
• 形: 写真は角丸なしの四角に黒い1px枠。ブランドカードだけ角丸。花・クマなどの丸いイラストを四隅にはみ出させて置く
• 温度感: 暖色が中心の高彩度。黄・オレンジ・緑・青をはっきり対比させる

Colors

• 地は白一色で、左右端だけ青地のスマイル花柄を縦に通して画面を囲む
• 色の主役は写真の撮影背景。黄・オレンジ・空色・黄緑・ピンクを写真ごとに変えて、続く写真で同じ色が並ばないようにする
• 購入ボタンは小さくても目立つ蛍光寄りの黄に黒文字・黒枠
• 見出し文字は緑・オレンジ・ピンク・黄の原色。写真の背景色と補色になる色を選ぶ
• ブランドロゴの赤はヘッダーとブランド紹介カードだけに使う
• 本文や価格は黒一色で、色は付けない

Typography

• 見出しは英語だけ。日本語の大きな見出しは置かない
• ディスプレイ用の欧文は写真に半分重ねるか、写真の上端からはみ出させる
• 本文は小さめのゴシックで中央揃えにし、行間を広く取る
• 価格は『商品名 ¥価格』の形で左揃えにし、1行に1点ずつ並べる
• 見出しごとに書体を変えて、雑誌のような遊びを出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。左右各約 20px の柄の帯と中央の白い帯で構成
• 本文ブロックの幅: 画面幅の約 75%
• 余白: セクション間 70px、基本単位 8px、カード内 16px（375px 幅換算）
• 中央の白い帯の中で、写真は帯の幅の約82%に中央配置。全幅の写真は帯の端まで広げる
• 写真の下 12px に価格リスト、その下は 60〜80px 空けて次の写真
• 縦長の写真（約3:4）を基本に、全幅の写真をときどき挟んでリズムを作る
• ページ最上部とファーストビューの下にマーキー帯を置く
• 写真の区切りに小さな花イラストを3つ横に並べることがある

Elevation & Depth

• 影は基本使わず、フラットに作る
• ブランドカードだけ、ずらした黒い細線の影でステッカーのように見せる
• 重なりはイラストを写真の上に置くことで表現する

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 14px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形に黒い1px枠。縦長3:4が中心で、全幅のものもある
• セクション境界: 区切りは直線。マーキー帯または余白で区切る
• 購入ボタンは角丸なしの小さな四角に黒枠
• ブランド紹介カードは角丸14px・黒枠で、下部に緑の丘のイラスト
• スマイル花は写真の角に半分はみ出させる

Components

• マーキー帯（marquee-band）: 欧文の大文字と小さなスマイル花を交互に繰り返す横長の帯。緑地または白地で、上下に黒線
• 左右の花柄の帯（side-pattern）: 青地に白い花びらと黄色のスマイルを敷き詰め、ページ全体の左右端に縦に通す
• 黄色の購入ボタン（button-buy）: 価格の右に置く小さな黄色の四角。黒枠・黒文字で、文字が横に流れるようなはみ出したラベル
• ブランド紹介カード（brand-card）: 黒枠で角丸の白いカード。上辺にクマのイラストが顔を出し、赤いロゴと紹介文、黒いボタン2つを置き、下部に緑の丘と花を描く
• 黒いサブボタン（button-sub）: 白文字の大文字欧文が入った黒い小さな長方形。SNSや外部ストアへのリンク
• ルック写真の枠（look-photo）: 原色背景で撮った写真に黒い1px枠を付け、角にスマイル花のステッカーを重ねる
• 価格リスト（price-list）: 商品名と価格を小さな黒文字で縦に並べ、右に購入ボタンを並べる
• 写真に重ねる見出し（overlay-headline）: 太い欧文や波打つレトロ欧文を写真の上や上端に重ね、写真の背景色と補色の原色で塗る
• 花の区切り（flower-divider）: 緑の葉が付いたスマイル花を3つ等間隔に並べる。じょうろのイラストを添えることもある

Do's and Don'ts

Do - 写真ごとに撮影背景の原色を変え、ページを縦にたどったとき色が次々変わるようにする - スマイル花のステッカーを写真の角にはみ出させて、手で貼ったような感じを出す - 左右の花柄の帯はページの最初から最後まで途切れさせない - どの写真の下にも価格と黄色の購入ボタンをセットで置く - 大きな文字は欧文のディスプレイ書体にとどめ、日本語は小さく控えめにする

Don't - くすみ色やパステルだけでまとめない - 写真に角丸や影を付けない - 購入ボタンを大きなピル型にしない - 日本語の長い説明文やセールス文を並べない - グラデーションの背景やガラス風の表現を使わない

Page Structure

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

1. マーキー帯とヘッダー（コラボであることを示す）: 緑のマーキー帯の下に、2つのロゴを縦線で区切って並べた白い枠。その下に黄色の細い帯
2. ファーストビュー（世界観を一目で伝える）: 山吹色の背景で撮ったモデルの全身写真を黒枠で囲み、スマイル花を2つ角に重ねる
3. テーマの帯（コンセプトの言葉を繰り返し見せる）: 白地のマーキー帯で、テーマの欧文とスマイル花を交互に流す
4. 導入文（コラボの概要を伝える）: 花柄の帯に挟まれた白地に、小さなゴシックを中央揃えで数行置く
5. ブランド紹介（コラボ相手を紹介する）: 角丸の黒枠カードにクマのイラスト・ロゴ・紹介文・黒いボタン2つ・花の丘を収める
6. ルック一覧（商品を着用写真で見せて購入へつなぐ）: 原色背景の写真、価格リスト、黄色いボタンのセットを縦に繰り返す。ところどころで写真に欧文見出しを重ねる
7. 花の区切り（写真の流れに小休止を入れる）: 葉付きのスマイル花を3つ横に並べる
8. 全商品への誘導（一覧ページへ送る）: 太い欧文見出しの下に、黒枠のストアリンクの帯を置く
9. クレジットとフッター（制作者情報と著作権を示す）: 小さな文字のクレジットを中央揃えにし、太い欧文のロゴとコピーライトで締める

Imagery

• 山吹・オレンジ・空色・黄緑・ピンクなど単色の紙背景を使い、スタジオで正面から光を当てて撮る
• 市松の床、スマイル顔のクッション、クマのぬいぐるみなどレトロでポップな小物を添える
• モデルは無邪気な表情やちょっと間の抜けたポーズで、楽しげな空気を出す
• 物撮りは真上から撮るフラットレイか、小物と組み合わせたスタイリングで撮る
• イラストは白い花びらに黄色のスマイル顔、黒い主線。葉付きの花やじょうろも使う
• 写真の上の欧文は、ずらした影や波打つ変形でレトロな看板のように見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも左右に花柄の帯を残す。帯の幅は約45pxに広げ、花柄も大きくする
• PC ではファーストビューを横長の写真にし、ロゴの枠を右上に重ねる
• PC では商品写真を2列のグリッドにし、主なルックだけ中央に1枚で大きく置く
• PC では花の区切りを写真の左右に縦に並べる
• 中央の白い帯は最大幅を約820pxにして中央に寄せる

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