DESIGN.md — 青空×黄色の夏向け氷菓事例紹介 LP（Summer Blue Yellow Case Study LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、清潔・爽やか、力強い・インパクト
• キーワード: 夏・青空・斜めの色帯・ずらし影・事例カード・涼感
• 地の質感: フラットな単色面に青空写真。影はぼかさず、色をずらしたオフセット影だけを使う
• 形: 角丸のない四角が基本。斜めの平行四辺形の帯をマーカーや区切りに使う
• 温度感: クールな青に熱い黄をぶつけた、明るく元気な夏の温度感

Colors

• 地の色は白→黄→白→濃紺の順に切り替え、境界は斜めに入れる
• 黄の面の上には白カードを置き、カードの枠は濃紺、影は水色にする
• 見出しは濃紺。白地の上では黄の斜め帯をマーカーとして下に敷く
• ボタンは濃紺の面に白文字で、下に黄のずらし影をつける
• 数値の強調は黄の吹き出しか下線で入れる
• 使うのは濃紺・黄・水色の3色だけ。赤やオレンジは入れない

Typography

• 大見出しは極太の斜体で、白フチと濃紺のずらし影をつける
• 見出しの一部の語だけを大きくして、文字サイズに強弱をつける
• 本文とリードは中央揃えの太字ゴシック
• 注釈は※付きの小さいグレー文字にする
• ボタンの文字は中央、右端に小さな三角矢印を置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は事例カードを 2 カラムにする
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 18px（375px 幅換算）
• 事例カードは同じ構成を縦に繰り返す（ラベル→企業名→写真→要約→ボタン）
• カード同士の間は約30px
• ボタンはカード幅いっぱいで高さ約44px
• 特長セクションは左に商品写真、右に斜めの黄色帯の箇条を4つ並べる
• グラフは白い枠の中に収め、上部に濃紺の見出し帯を置く

Elevation & Depth

• 影はぼかさず、右下に4〜6pxずらした単色の影にする
• カードは濃紺の枠線＋水色のずらし影
• ボタンは黄のずらし影
• ページトップボタンだけ白丸にソフトな影をつける

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: カード内の写真は横長の長方形で角丸なし。商品はパッケージを切り抜く
• セクション境界: 斜めのラインで区切り、黄と水色の帯を重ねる
• 角丸は使わず、直角の四角で統一する
• マーカーや吹き出しは傾けた平行四辺形にする
• ページトップボタンだけ正円にする

Components

• 主ボタン（button-primary）: 濃紺の長方形に白太字、右端に三角矢印、下に黄のずらし影
• 事例カード（case-card）: 白地に濃紺2pxの枠線、水色のずらし影。中は業種ラベル・企業名・写真・要約・ボタンの順
• 業種ラベル（tag-industry）: カードの左上の角に、薄グレーの小さな四角ラベルを重ねる
• マーカー見出し（marker-title）: 濃紺の企業名の下に、黄の斜め帯を半分重ねて敷く
• 斜体セクション見出し（section-heading）: 極太斜体に白フチ、背後に黄と水色の斜めの帯
• 斜め帯の特長（feature-slant）: 傾いた黄の平行四辺形に、濃紺の短い2行テキストを載せる
• グラフ枠（chart-box）: 濃紺の見出し帯の下に淡い水色地の折れ線グラフ。数値は黄の吹き出しで強調
• 協賛バナー帯（partner-banner）: 濃紺の地に白文字の説明と、水色の外部リンクバナー

Do's and Don'ts

Do - 濃紺・黄・水色の3色に絞る - ずらし影と斜めの帯を、すべてのセクションで繰り返し使う - 事例カードは同じ構成を崩さず並べる - 写真は屋外の明るい現場で撮った、人物の笑顔のものを使う - 数値やエビデンスはグラフにして、黄で強調する

Don't - 角丸やピル型のボタンを使わない - ぼかしたドロップシャドウを多用しない - 暖色系の赤やオレンジを主役にしない - 明朝体や細い書体を見出しに使わない - カードごとにレイアウトを変えない

Page Structure

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

1. ファーストビュー（夏の暑さ対策というテーマと商品を一目で伝える）: 青空と雲の写真に極太斜体のキャッチを置き、黄の帯を重ねる。中央に商品カップ、周りに氷片を散らす
2. 導入リード（活動の趣旨を説明し、事例へつなぐ）: 白地に濃紺太字を中央揃え。※注釈を添え、最後の一文の下に水色の斜め帯を敷く
3. 事例紹介（導入企業の声で信頼をつくる）: 斜めの帯から黄の地に切り替え、白い事例カードを縦に7枚並べる
4. おすすめの理由（商品の機能的なメリットを示す）: 白地に斜体の大見出し。商品写真の横に、黄の斜め帯の特長を4つ並べ、注釈とボタンを置く
5. 実証データ（数値で効果を裏づける）: 斜体見出しと中央揃えの説明文。数値には黄の下線。その下にグラフ枠とニュースリリースボタン
6. 協賛・パートナー（社会的な取り組みを示す）: 斜めに切った濃紺の帯に白文字を置き、外部リンクのバナーを添える
7. フッター（規約と会社情報を示す）: 白地に小さなリンク、社名ロゴ、コピーライト

Imagery

• 明るい青空と白い雲の写真で、FVの涼感を出す
• 商品は白背景で切り抜き、少し傾けて大きく置く
• 黄色い氷のかけらを周りに散らして装飾にする
• 事例写真は夏の屋外の現場で、作業着の人物を自然光で笑顔に撮る
• グラフはフラットな濃紺と水色の折れ線に、アイコンを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは事例カードを2カラムのグリッドにする
• PCのFVは、商品を左・キャッチを右の横並びにする
• PCの特長は、商品の周りに帯を散らして配置する
• PCはコンテンツ幅を約800pxに絞り、中央に寄せる
• ボタンはPCで幅を固定（約300px）して中央に置く

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