DESIGN.md — くすみローズ×マゼンタの周年記念企業 LP（Dusty Rose Anniversary Corporate Illustrated LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、シンプル・ミニマル、信頼・誠実
• キーワード: くすみローズ一色の地・白抜き欧文見出し・マゼンタの曲線・多様な人物イラスト・白いピル型ボタン・年表タイムライン
• 地の質感: グラデーションや柄のないフラットな単色の面。イラストの手描き風の質感だけで温かみを出す
• 形: 大きな角丸の白カード、ピル型ボタン、太い一本線の曲線とループ
• 温度感: 暖かく穏やか。ピンクの地に白とマゼンタを重ねて、親しみと祝祭感を出す

Colors

• ページの地色はくすみローズ 1 色にし、セクションごとに背景色を変えない
• 地色の上の見出しと本文は白抜きにする
• 白い面（カード・ボタン）の上の文字はマゼンタにする
• マゼンタは主 CTA の面、年表の曲線、矢印アイコンに絞って使う
• 黒い文字はほぼ使わない。イラストと写真の中だけに残す
• 古い写真はモノクロのまま載せ、地のピンクとの対比で時代の古さを見せる
• page は文字 #87115D × 背景 #E1A09C のコントラスト比が 4.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#E3A6A2、4.52:1）を使う。
• back-to-top は文字 #FDFEFD × 背景 #B2737D のコントラスト比が 3.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#A8616C、4.52:1）を使う。

Typography

• セクション見出しは幾何学的な欧文サンセリフを大きく中央に置き、すぐ下に小さな和文の見出しを添える
• 和文は太めのゴシックで、字間を少し広めに取る
• 本文も細くせず太字のまま、行間を広めに組む
• 見出し・説明は中央揃えを基本にする。年表の本文だけ左揃えにする
• 年表の西暦はとても大きな太字の数字にして、目印として使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラムで中央揃え。PC はセンター寄せの狭いコンテンツ幅
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 100px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの間は 80〜120px の大きな余白で区切り、線や色の切り替えは使わない
• カードとボタンは左右に 20〜30px の余白を取って中央に置く
• 年表は写真・小見出し・区切り線・本文の順に縦に積み、その背後をマゼンタの曲線が通る
• 人物イラストは格子状に並べるか、横一列に並べる
• 動画は人物イラストの胸元に重ねて置く

Elevation & Depth

• 影はほぼ使わず、フラットな面で表現する
• 白カードと白ボタンは地色との明度差だけで浮いて見せる
• 終了したキャンペーンのバナーは半透明の白をかぶせて薄く見せる

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの長方形。人物イラストは背景を切り抜いて地色に直接置く
• セクション境界: 直線の境界は作らず、地色を続けたまま余白だけで区切る
• ボタンは基本ピル型にする。動画一覧のボタンだけ角丸 12px の横長の白い面
• カードは角丸 20px の白い面にする
• 年表は太さ 10px 前後のマゼンタの一本線で、端にループ（無限記号のような輪）を付ける
• 吹き出しは手描き風の揺らいだ輪郭にし、尻尾をイラストの人物に向ける

Components

• マゼンタのピル型 CTA（button-primary）: マゼンタの面に白文字。右端に白い丸の矢印アイコンを付ける。カードの中に置く
• 白いピル型サブボタン（button-white-pill）: 白い面にマゼンタ文字を 2 行まで入れ、右端に細い横矢印を付ける。地色の上に置く
• 動画一覧のリストボタン（button-list）: 横幅いっぱいの白い角丸の面を縦に並べる。中央にマゼンタ文字、右端にマゼンタの丸矢印
• 白い角丸カード（card-project）: マゼンタの見出し、写真のグリッド、マゼンタの説明文、主 CTA を縦に収める
• 英字＋和文のセクション見出し（section-heading）: 白抜きの大きな欧文見出しの下に、小さな和文見出しを中央揃えで添える
• 年表の項目（timeline-item）: 大きな西暦、モノクロ写真、白抜きの小見出し、白の細い区切り線、本文を縦に並べる。背後をマゼンタの曲線が通る
• 手描き風の吹き出しリンク（speech-bubble）: 白い吹き出しにマゼンタの大小の文字を入れ、右に矢印を付ける。人物イラストの上に置く
• ページトップへ戻るボタン（back-to-top）: 右下に固定する濃いローズの丸。中に白い山形の矢印

Do's and Don'ts

Do - 地色はくすみローズ 1 色で統一する - 見出しは欧文の大見出しと和文の小見出しを 2 段に組む - 白い面の上の文字はマゼンタ、地色の上の文字は白にする - 年齢・職業・国籍がさまざまな人物イラストを繰り返し使い、多様性を見せる - ボタンの右端には必ず矢印を付ける - 年表はマゼンタの曲線でつなぎ、流れが見えるようにする

Don't - セクションごとに背景色を変えない - 黒い文字や濃いグレーの本文を地色の上に置かない - 強い影やグラデーションのボタンにしない - マゼンタ以外の強い色をアクセントに足さない - 写真を角丸にしたり、装飾フレームで囲んだりしない - 文字を詰めて並べず、余白をたっぷり取る

Page Structure

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

1. ヘッダー（ロゴとメニューを出す）: 白い帯の左にロゴ、右にマゼンタの三本線メニューを置く
2. ファーストビュー（周年のスローガンと多様性を印象づける）: 人物イラストを格子状に並べ、中央を空けて白抜きの欧文スローガンと記念ロゴを置く
3. メッセージへの導線（トップメッセージへ誘導する）: 左右に人物イラストを配置し、中央に白いピル型ボタンを置く
4. プロジェクト紹介（参加型企画を知らせる）: 英字見出しの下に白カードを置き、写真のグリッド、説明文、マゼンタの CTA を入れる
5. 沿革・年表（企業のあゆみを伝える）: ループ付きのマゼンタの曲線の上に、西暦・モノクロ写真・説明を 3 項目並べる。最後に白いピル型ボタン
6. 記念商品（記念商品へ誘導する）: 横一列に並べた人物イラストの上に、手描き風の吹き出しリンクを置く
7. 動画（CM 動画を見せる）: 人物イラストの胸元に動画プレーヤーを重ね、下に白抜きのタイトルとサブボタンを置く
8. インタビュー動画一覧（シリーズ動画へ誘導する）: 人物イラストの下に、白い角丸のリストボタンを縦に並べる
9. キャンペーン（キャンペーンの告知と終了表示）: バナーに半透明の白をかぶせ、マゼンタの終了文言とピル型ボタンを重ねる
10. フッター（ロゴと関連リンクを出す）: マゼンタのロゴを中央に置き、白文字のリンクに外部リンクアイコンを付ける。下にコピーライト

Imagery

• 人物イラストは手描き風で、絵の具のような柔らかい塗り。全身を正面から描く
• 年齢・職業・体型・国籍・障がいの有無が違う人を幅広く描き、目を閉じた穏やかな表情やサムズアップのポーズにする
• イラストは背景を描かず、地色に直接切り抜いて置く
• 沿革の写真はモノクロや当時の紙面の雰囲気を残す
• 現在の活動写真は自然光の明るいスナップを 2×2 のグリッドに並べる
• 装飾はマゼンタの太い一本線の曲線と、輪のモチーフに限る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも地色と構成は同じにし、コンテンツ幅を 600px 前後に絞って中央に置く
• PC の年表は曲線を横に振り、項目を左右に互い違いで並べる
• PC は空いた左右の余白に人物イラストを散らして置く
• PC の動画は 2 本を横に並べる
• PC の記念商品セクションでは人物イラストを画面幅いっぱいに横一列で並べる
• ボタンは 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 行書くと起動時に読み込まれる。