DESIGN.md — 赤い花と空色の周年記念コーポレートLP（Festive Camellia Anniversary Corporate LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、和風、信頼・誠実
• キーワード: 周年記念・花のイラスト・紙吹雪・空色グラデーション・生成り・余白多め
• 地の質感: ざらつきのある粒子入りのグラデーションに、フラットな花のイラストを重ねる。地は紙のような生成り色。
• 形: 角丸カード、真円の写真、雲や波のような半円の連なりで区切る
• 温度感: 暖色の花と寒色の空を対比させた、明るく穏やかなお祝いの温度感

Colors

• 地は生成りと白を交互に使い、最後のセクションだけベージュにする
• 赤〜橙の花はイラストだけに使い、文字やボタンには使わない
• ボタン、英字ラベル、波形の区切りは空色系にまとめる
• 金茶はロゴ、紙吹雪、手書き英字などお祝いの飾りに限って使う
• 本文は墨色の1色にし、強調色で太字にしない
• 空色のグラデーションの上に置く文字は白にする
• button-primary は文字 #FFFFFF × 背景 #44A4DB のコントラスト比が 2.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#227DB1、4.53:1）を使う。

Typography

• 見出しは日本語の下に小さな水色の英字ラベルを添えて2段にする
• 本文は字間0.1em前後、行間2倍以上でゆったり組む
• 見出しとメッセージは中央揃え、長い本文は左揃えにする
• 太字はほとんど使わず、細め〜標準の太さで上品に見せる
• 装飾用の英字には手書き風のスクリプト体を1か所だけ使ってよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、PC はお知らせのみ左見出し＋右リストの 2 カラム、取り組みは 3 カラム
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 90px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの間は広く空け、80〜100px を基本にする
• メッセージや取り組みのセクションは、画面端から12px内側に入れた角丸の大きな面に収める
• お知らせはカードを縦に並べ、間隔を8px程度にする
• 画像のギャラリーは大きさを変え、ずらして散らすように配置する
• 英字ロゴや流れるテキストは画面幅いっぱいに使う

Elevation & Depth

• 影は基本的に使わず、平らに見せる
• ピル型ボタンだけに、下方向へ柔らかい影を付ける
• 商品写真には切り抜きの自然な落ち影を付ける

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: アーカイブ写真は角丸の長方形、取り組みの写真は真円、商品は背景を抜いた切り抜き
• セクション境界: 空色の半円が連なる雲・波形で区切る。花のイラストを区切りの上に半分はみ出させて置く
• カードと大きな面はすべて角丸にする
• ボタンは完全なピル型にする
• 鋭い斜めの区切りは使わない

Components

• 空色のピル型ボタン（button-primary）: 中央に置く詳細への誘導ボタン。白文字に柔らかい影を付ける
• 日本語と英字の2段見出し（section-heading）: 日本語の見出しの下に小さな水色の英字を置く。左右に星と紙吹雪の飾りを付ける
• お知らせカード（news-card）: 淡い地の角丸カード。日付とタイトルを並べ、リンクには下線を付ける
• 角丸の大きな面（rounded-panel）: メッセージや取り組みを包む大きな面。生成りやベージュで塗り、隅に細い線のきらめき飾りを入れる
• 横に流れるテキストの帯（marquee-ticker）: 短いキーワードと小さな商品写真を交互に並べ、2段で横に流す
• 半円の波形の区切り（wave-divider）: 空色の濃淡2色の半円を並べ、上下のセクションをつなぐ
• 近日公開の告知カード（coming-soon-card）: 紙吹雪と花のイラストを入れ、中央に手書き英字と短い告知文を置く
• 真円写真とハッシュタグ見出し（circle-pillar）: 円形の写真の下に、金茶のハッシュタグ英字と短い説明文を置く

Do's and Don'ts

Do - 赤い花の大きなイラストを画面の端からはみ出させ、お祝いらしい華やかさを出す - 紙吹雪や星の飾りは、見出しやロゴの左右に小さく散らす - 見出しは必ず日本語＋英字ラベルのセットにする - 本文はゆったりした行間で、静かな語り口に見えるよう組む - 空色のグラデーションには細かい粒子感を加える

Don't - 赤を文字色やボタン色にしない - 濃い影や立体的なボタンを使わない - 原色の黄色を地の色として広く使わない - 見出しを極太にしたり、詰めた字間にしたりしない - 角張った四角いカードを混ぜない

Page Structure

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

1. ファーストビュー（周年のお祝いを印象づける）: 生成りの角丸の面に周年ロゴと紙吹雪を置き、その下に赤い花のイラストと大きな白い英字ロゴを重ねる
2. キーワードの帯（ブランドの要素を軽く伝える）: 白地に短い言葉と商品写真を2段で横に流す
3. メインメッセージ（感謝とこれからの想いを伝える）: 花のイラストから空色のグラデーションへつなげ、白文字を中央に置き、商品写真と月と鳥のイラストを添える。下端は波形で区切る
4. お知らせ（最新情報を伝える）: 2段見出しの下に角丸のお知らせカードを3枚並べる
5. メッセージ（ロゴに込めた意味や理念を説明する）: 花のイラストを上にはみ出させた生成りの角丸の面に、周年ロゴと長い本文を入れる
6. 歴史（歩んできた年月の重みを見せる）: 中央揃えの短い文章とピル型ボタンを置き、セピア色の写真を散らすように配置する
7. スペシャルコンテンツ（今後の企画への期待を高める）: 手書きの英字と花のイラストで作った近日公開カードを置く
8. 未来への取り組み（社会的な活動を伝える）: ベージュの角丸の面に本文、真円の写真3つとハッシュタグ見出し、ボタンを並べる
9. フッター（ブランドとSNSへの導線）: 中央にロゴ、SNSのアイコン、コピーライトを小さく置く

Imagery

• 花はフラットなベクターで描き、赤・朱・橙・山吹を重ねた大きな花びらに細かい粒子の質感を加える
• 空は水色から薄紫へのグラデーションにし、月の円と小鳥のシルエットを添える
• 紙吹雪は金茶のリボン、赤や紺の四角片、四芒星のきらめきで作る
• アーカイブ写真はセピア色やモノクロで、角丸にして散らす
• 商品は白い背景で切り抜き、落ち影を付ける
• 人物や自然の写真は、明るく自然光の雰囲気で真円に切り抜く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はグローバルナビを上部に横並びで置く。SP はハンバーガーメニュー
• PC は FV の英字ロゴを1行にまとめ、横長に構成する
• PC のお知らせは、左に見出し、右に細い横長のリストを置く2カラム
• PC の歴史の写真は横に大きく散らしたコラージュにする
• PC の取り組みは真円写真を3カラムで横に並べる
• 本文の幅は PC では約600〜700pxに抑えて中央に置く

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