DESIGN.md — 桜色×ライムの周年記念料理教室 LP（Pastel Pink and Lime Anniversary Cooking School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: かわいい、上品・高級、ポップ・元気、やさしい・柔らかい
• キーワード: 周年記念・パステル・大きな数字・角丸パネル・横スクロールカード・料理写真
• 地の質感: マットな単色面。写真だけが質感を担い、面はフラットに保つ
• 形: 上端だけ大きく丸めたパネル、アーチ型の面、角丸の写真フレーム、ギザギザのスタンプバッジ
• 温度感: 暖かく甘い。桜色とライムグリーンで軽さを出す

Colors

• 地は生成り。セクションごとに桜色とライムの全幅パネルを交互に置く
• ローズは数字・強調語・アクセントの細線だけに使う
• ライムは見出しの背景帯、マーカー、スタンプバッジに使う
• ライムや桜色の面の上では見出しを白文字にする
• 黒は写真の中にだけ出し、UI の面には使わない
• 1 画面に強い色は 2 色まで

Typography

• 英字見出しの直下に下線付きの和文小見出しを中央揃えで置く
• 数字は画面幅いっぱいに近い大きさで組み、和文の単位は小さく添える
• 本文は短い行で中央揃えにし、段落の間をはっきり空ける
• 見出しの一部はライムのピル帯に白文字で載せ、イタリックで組む
• 広い字間の欧文小文字で記念ロゴ風のキャプションを作る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは横スクロールの 1.7 枚表示
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは上角を大きく丸めた全幅パネルを前のセクションに重ねる
• 見出しは常に中央揃え
• 特集写真はほぼ全幅の正方形に近いフレームで縦に並べる
• 横スクロール領域には右下に下線矢印付きの scroll 表示を付ける
• スタンプバッジは写真の左上の角にはみ出させる

Elevation & Depth

• 写真フレームは右下にグレーの影をぼかさず板状にずらす
• カードはごく淡い影で浮かせる
• その他の面はフラットにして影を付けない

Shapes

• 角丸: 小 8px ／ 中 24px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 大きな角丸の正方形。内側に白い角丸線の枠を重ねる
• セクション境界: 上角を丸めたパネルを重ねて境界を作る
• 年号の面は上部が半円のアーチ型にする
• アーカイブカードは縦長のピル型、中の画像は正円で切り抜く
• ピックアップカードは上が白、下が淡色で、境界を波線にする
• バッジはギザギザの円形スタンプにする
• 矢印ボタンは線だけの円にする

Components

• 年号アーチパネル（arch-year-panel）: 上部が半円のライム面に、白文字の和文説明と超大型の年号を重ねる。角に丸い Tap バッジを添える
• 実績数値カード（stat-card）: 白い上半分にローズの大きな数値とライムのマーカー強調、波線で区切った下半分に説明文
• 特集写真フレーム（photo-frame）: 角丸の写真に内側の白い線枠と右下の板状の影を付け、下にリンクラベルと円の矢印を置く
• スタンプバッジ（stamp-badge）: ライムのギザギザ円に、セリフ体で数字や月を 2 行で入れる
• PICK UP タグ（pickup-tag）: 左端に付く、右側だけ丸いライムのタブ
• 英字＋和文の見出し（section-heading）: 大きな英字見出しの下に、下線付きの和文小見出し
• アーカイブカード（archive-pill-card）: 縦長のピル型カードに円形画像、抜粋文、ライムの円矢印。縦書きの日付を添える
• 円形矢印ボタン（circle-arrow）: 線だけの円に矢印を入れ、リンクラベルの右に置く

Do's and Don'ts

Do - 桜色とライムの面をセクションごとに交互に置く - 数字はとにかく大きく見せ、単位は小さく添える - 写真はすべて角丸フレームと白い内枠でそろえる - 英字見出しと和文小見出しを必ずセットにする - カードは横スクロールにして、次のカードを少しのぞかせる

Don't - 原色の赤や濃い青を使わない - 四角く尖った写真や面を使わない - 本文を左揃えの長い行で組まない - グラデーションの多用や強いドロップシャドウを使わない - 黒い面を UI 背景に使わない

Page Structure

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

1. ファーストビュー（周年を一目で伝える）: 淡いピンク地に、ローズの細い大型数字とスイーツ写真を重ねる。金の紙吹雪と広い字間の欧文を添える
2. スローガン（ブランドの理念を示す）: 上角を丸めた生成りのパネルに、ライムのピル帯の欧文とセリフ体イタリックを置く
3. イメージ写真（記念商品の世界観を見せる）: 全幅の暗いトーンの物撮り写真
4. ブランドストーリー（沿革を語る）: 中央揃えの短い段落を 4 つ、広い行間で並べる
5. 沿革（年代ごとの歩みを示す）: イタリックの見出しの下に、ライムのアーチ面と大型の年号を置く
6. 魅力ピックアップ（実績を数値で訴求する）: 桜色のパネルに、数値カードの横スクロールを置く
7. 特別キャンペーン（入会特典・限定品へ誘導する）: 角丸の写真フレームを縦に 3 つ並べ、スタンプバッジとリンクラベルを付ける
8. アーカイブ（関連記事へ誘導する）: ライムのパネルに、ピル型カードの横スクロールを置く

Imagery

• 焼き菓子やパンを真上から撮った、色のはっきりした料理写真
• 布や木の器を添えた、温かみのある食卓のスタイリング
• 準備中の写真には淡い白のベールをかけ、セリフ体イタリックの文字を重ねる
• 淡いピンクの背景に溶けかけのスイーツを大きく配置する
• 金色の小さな四角い紙吹雪を散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に最大幅 480〜600px 程度のカラムを置き、左右は生成り地で埋める推奨
• PC では横スクロールのカードを 3 枚並べてもよい
• 大型数字は vw 単位で縮小し、はみ出さないようにする
• 写真フレームは PC で 2 列のグリッドにしてもよい

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