DESIGN.md — ミモザ黄×白×黒の雑誌風ヘアケア企画 LP（Mimosa Yellow Editorial Haircare Campaign LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、シンプル・ミニマル、清潔・爽やか
• キーワード: ミモザイエロー・エディトリアル・白カードのずらし配置・縦書き欧文ラベル・手描きイラスト・黒の直線ボタン
• 地の質感: フラットな単色面。影は付けず、色面を重ねて奥行きを出す
• 形: 基本は角丸なしの長方形。円形の装飾ドットと、角丸の大きい吹き出しカードを差し色に使う
• 温度感: 明るく暖かい春の黄色。黒と白で全体を締める

Colors

• 章ごとに地の色を変える。導入はレモン黄、第2章は山吹色、第3章は淡黄、章のあいだは薄いグレーにする
• 本文は必ず白か淡グレーのカードに載せ、黄色い地に直接置かない
• ボタンと日付ラベルは黒で統一し、黄色の中でも締まって見えるようにする
• 鮮やかな黄は縦書きラベル・期間バッジ・短い下線だけに使う
• 最下部のお知らせ帯だけ、くすんだピンクベージュで落ち着かせる

Typography

• 欧文の大見出しは細いサンセリフを白抜きにし、写真や色面にかぶせる
• 日本語の見出しは明朝、本文はゴシックで字間を広めにとる
• 章ラベルは鮮黄の欧文を縦書きにし、カードの端に沿わせる
• 日付は太いセリフの数字とイタリックの月名を組み合わせる
• インタビュー本文は、要点だけ太字にして強弱をつける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは左右どちらかに寄せ、画面幅の約 92% にする
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 64px、基本単位 8px、カード内 30px（375px 幅換算）
• 白いカードは片側の端に付け、反対側に約 30px の色地を見せる
• 章扉では、カード右上に日付タブを付けてずらす
• 写真はカード幅いっぱいに置き、片側を画面端まで伸ばす
• 見出しの下に短い細線（約 40px）を引いて区切る
• ボタンはカード内の幅いっぱいに置く

Elevation & Depth

• 影は使わず、色面のずれと重なりで階層を表す
• 吹き出しカードも影を付けず、白い面だけで浮かせる

Shapes

• 角丸: 小 0px ／ 中 16px ／ 大 28px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角いトリミングで、片側を画面端までブリードさせる。イラストは白い正円の中に入れる
• セクション境界: 直線で区切る。境界付近に黄色の円形ドットを散らす
• 主ボタンは角丸なしの黒い長方形
• 補助リンクとバッジだけピル型にする
• お客様の声の吹き出しは角丸 28px 前後
• 情報ボックスは角丸 16px で、上部に黄色の帯を付ける

Components

• 黒い長方形ボタン（button-primary）: 中央に白文字、右端に＞矢印
• 日付タブ（date-tab）: カード右上に付く白い四角。大きな番号とイタリックの月名
• 縦書き章ラベル（vertical-label）: 鮮黄の細い欧文を、カードの端に縦向きで置く
• 月別アコーディオン（accordion-month）: 白い帯に番号・月名・2 行の説明・下向き矢印を並べる
• 期間バッジ（badge-period）: 鮮黄のピル型に、黒の太字で期間を書く
• 黒丸バッジ（badge-circle）: 写真の角に重ねる黒い正円。限定情報を白文字 2 行で入れる
• 声の吹き出し（voice-bubble）: 淡黄の地に置く白い角丸カード。最後に下線付きの名前を入れる
• 開催情報ボックス（info-box）: 上部が鮮黄の帯、下部が淡黄の角丸枠。日時・場所を表組みで載せる
• プロフィール枠（profile-card）: 淡グレーの面に、丸い顔写真と欧文の名前、小さい文字の経歴を入れる

Do's and Don'ts

Do - 黄色の地には、白カードを片側に寄せて重ねる - 見出しは明朝と細い欧文の組み合わせにする - 黒の要素は少なめにし、ボタン・日付・バッジに限る - 黄色の丸いドットをカードの境目に 2〜3 個散らす - 本文は字間と行間を広めにして、雑誌のように見せる

Don't - ドロップシャドウやグラデーションのボタンを使わない - 赤や青などの強い差し色を加えない - 黄色の地に長い本文を直接置かない - 太いゴシックの大見出しで押し出しを強くしない - カードを中央揃えだけで並べ、ずらしをなくさない

Page Structure

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

1. ファーストビュー（季節の世界観と商品をひと目で伝える）: 黄色い地に商品の俯瞰写真。細い白の欧文コピーを重ね、黄色の丸を散らす
2. 導入メッセージ（企画の趣旨を伝える）: 明朝の 2 行見出し、短い線、行間の広い本文
3. 月別スケジュール（3 か月分の企画を一覧で示す）: 白い帯のアコーディオンを 3 本並べる
4. 第1章 コラボ企画（雑誌とのコラボと出演者を紹介する）: グレー地に白カードと日付タブ、縦書きラベル。プロフィール枠と黒ボタンを置く
5. プレゼント（応募を促す）: 黄色い円の上に商品写真、欧文セリフの見出し、期間バッジ、黒ボタン
6. 第2章 限定商品（限定品の魅力を伝える）: 山吹色の地に白カード。写真に黒丸バッジを重ね、香調を 3 段の帯で見せる
7. 連携・寄付（関連サービスと社会貢献を示す）: グレーと淡黄の小さな枠にロゴとボタンを入れる
8. お客様の声（使った人の実感を伝える）: 手描きイラストの扉のあと、Q 番号と白い吹き出しを縦に並べる
9. 開発者インタビュー（開発背景で信頼感を出す）: 淡グレーの枠に丸い顔写真と長い本文。黄色の短い線で小見出しを区切る
10. 第3章 イベント（イベントへの来場や申込を促す）: 会場写真、開催情報ボックス、円形イラスト 3 点と黒ボタン
11. エッセイ（読み物でブランドの世界観を深める）: 3×2 の写真グリッドと欧文見出し、記事リンクのカード
12. お知らせ・店舗検索・フッター（補足情報と回遊導線をまとめる）: ピンクベージュの帯、黒ピルボタン、セリフ体の大きなナビ、黒いフッター

Imagery

• 商品は淡い黄色の背景に置き、自然光で俯瞰に撮る。手前に黄色い花をぼかして入れる
• 人物とイベントのシーンは、細い線画に黄色・ベージュをかすれ気味に塗った手描きイラストで描く
• イラストは白い正円の中に収める
• 小さなイラスト（はさみ・花・商品）を、カードの端にスタンプのように散らす
• エッセイの写真は、ボトルの接写を柔らかいピントで撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では、写真とテキストを 2 カラムに並べ、左右交互に配置する
• 月別スケジュールとイラスト 3 点は、PC では横 3 列にする
• PC でも、白カードを片側に寄せて重ねる構成は保つ
• フッターのナビは、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 行書くと起動時に読み込まれる。